如何只加载波形并等待用户单击“播放"以在Wavesurfer-js上下载音频? [英] How can I load only waveform and wait to user click 'play' to download the audio on Wavesurfer-js?

问题描述

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

On my server I use Audiowaveform to generate JSON data from my audio files.

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

On frontend I use Wavesurfer-JS to draw the waveform based on previous JSON data.

问题在于，在页面上准备好Wavesurfer-JS总是在后台下载音频文件(不仅是在用户按下播放按钮时).

The problem is that on page ready the Wavesurfer-JS download on background the audio file all the time (and not only when the user hit the play button).

这是我的尝试.

这是重要的部分:

<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数据)中提取波形，并且仅在用户单击播放按钮时才下载页面加载时的音频文件.

So basically I need to focus on wavesurfer.load and add a new function to this Javascript to only draw from peaks(JSON data) the waveform and don't download audio file on page load but only when the user hit the play button.

如何实现?

推荐答案

花点时间浏览Wavesurfer js代码，以了解如何在不加载歌曲的情况下进行绘制:P

Took me a while to hack around the wavesurfer js code to find out how I can make it draw without loading the song already :P

在后端变量中设置峰值并调用drawBuffer达到了目的，将其与一些播放按钮逻辑结合在一起，我们得到以下代码:

Setting the peaks in the backend variable and calling drawBuffer did the trick, combining that with some play button logic and we get the following code:

//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之类的属性似乎会被忽略...

Make sure to remove the unnecessary<audio> tag from the html, browsers seem to download all audio files in those tags on load and attributes like preload=false seem to be ignored...

这篇关于如何只加载波形并等待用户单击“播放"以在Wavesurfer-js上下载音频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！