![](/img/trans.png)
[英]How to prevent Wavesurfer.js stopping playback with click on waveform?
[英]How can I load only waveform and wait to user click 'play' to download the audio on Wavesurfer-js?
在我的服務器上,我使用Audiowaveform從我的音頻文件生成JSON數據。
在前端,我使用Wavesurfer-JS根據以前的JSON數據繪制波形。
問題是在頁面准備好Wavesurfer-JS背景音頻文件一直下載(而不僅僅是當用戶點擊播放按鈕時)。
這是我的嘗試。
這是顯着的部分:
<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數據)中繪制波形,不要在頁面加載時下載音頻文件,但只有當用戶點擊播放按鈕時。
我怎樣才能實現它?
花了一些時間來破解waveurfer 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
這樣的屬性似乎被忽略...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.