如何仅加载波形并等待用户单击 'play' 以在 Wavesurfer-js 上下载音频？

Question

在我的服务器上，我使用 Audiowaveform 从我的音频文件中生成 JSON 数据。

在前端，我使用 Wavesurfer-JS 根据之前的 JSON 数据绘制波形。

问题是在页面准备好后，Wavesurfer-JS 一直在后台下载音频文件（不仅是在用户点击播放按钮时）。

This是我的尝试。

这是重点：

<div id="waveform">
    <audio id="song" style="display: none" preload="false" src="http://api.soundcloud.com/tracks/45398925/stream?client_id=fa791b761f68cafa375ab5f7ea51927a"></audio>
</div>

<script>
    var wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'grey',
      backend: 'MediaElement',
      mediaType:'audio',
      progressColor: 'red',
      cursorColor: '#fff',
      normalize: true,
      barWidth: 3
    });

    wavesurfer.load(document.querySelector('#song'), ['.$json.']);
</script>

所以基本上我需要专注于 wavesurfer.load 并为此 Javascript 添加一个新功能以仅从峰值（JSON 数据）绘制波形而不下载音频页面加载文件，但仅当用户点击播放按钮时。

如何实现？

Answer 1

我花了一些时间来破解 wavesurfer js 代码，以了解如何在不加载歌曲的情况下绘制它：P

在后端变量中设置峰值并调用 drawBuffer 就成功了，将其与一些播放按钮逻辑相结合，我们得到以下代码：

//Create new wavesurfer
wavesurfer = WaveSurfer.create({
    container: '#waveform',
    backend: 'MediaElement',
    mediaType:'audio',
    normalize: true,
    barWidth: 3
});

//Set song
wavesurfer.song = "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"

//Set peaks
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];

//Draw peaks
wavesurfer.drawBuffer();

//Variable to check if song is loaded
wavesurfer.loaded = false;

//Load song when play is pressed
wavesurfer.on("play", function () {
    if(!wavesurfer.loaded) {
        wavesurfer.load(wavesurfer.song, wavesurfer.backend.peaks);
    }
});

//Start playing after song is loaded
wavesurfer.on("ready", function () {
    if(!wavesurfer.loaded) {
        wavesurfer.loaded = true;
        wavesurfer.play();
    }
});

确保从 html 中删除不必要的 <audio> 标签，浏览器似乎会在加载时下载这些标签中的所有音频文件，并且 preload=false 等属性似乎会被忽略。 ..

如何仅加载波形并等待用户单击 'play' 以在 Wavesurfer-js 上下载音频？

How can I load only waveform and wait to user click 'play' to download the audio on Wavesurfer-js?

javascript

audio

jquery

json

waveform