我正在使用 wavesurfer.js 庫來創建多軌播放器。(https://wavesurfer-js.org/)我的 HTML 非常簡單:<div id="player"></div><div id="player_controls"> <button class="btn btn-sm btn-dark" disabled="disabled" id="btn_play"><i class="fas fa-play"></i></button> <button class="btn btn-sm btn-dark" disabled="disabled" id="btn_pause"><i class="fas fa-pause"></i></button> <button class="btn btn-sm btn-dark" disabled="disabled" id="btn_stop"><i class="fas fa-stop"></i></button></div><script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script><script type="text/javascript" src="mixer.js"></script>那么我的mixer.js文件如下:var audiofiles = ["drums.wav","bass.wav","vocals.wav",];var buttons = { play: document.getElementById("btn_play"), pause: document.getElementById("btn_pause"), stop: document.getElementById("btn_stop")};var spectrum = [];var ready = [];for(var i=0; i<audiofiles.length; i++){ready.push('false');}for(var i=0; i<audiofiles.length; i++){ spectrum[i] = WaveSurfer.create({ container: '#player', progressColor: "#28a745" }); spectrum[i].on('ready', function () { ready.pop(); ready.push = 'true'; checkAllReady(); }); spectrum[i].on('seek', function () { console.log(i); // var currentProgress = spectrum[i].getCurrentTime() / spectrum[i].getDuration(); // for(var j=0; j<audiofiles.length; j++){ // spectrum[j].seekTo(currentProgress); // } }); spectrum[i].load('separations/'+audiofiles[i]);}function checkAllReady(){ if(!ready.includes('false')){buttons.play.disabled = false;}}buttons.play.addEventListener("click", function(){ for(var i=0; i<audiofiles.length; i++){spectrum[i].play();} buttons.stop.disabled = false; buttons.pause.disabled = false; buttons.play.disabled = true;}, false);然而,尋找一個位置只是重新調用相同的尋找函數,直到我得到一個Maximum call stack size exceeded錯誤。任何想法如何解決這個問題?
在多軌設置中使用waveform.js 庫在音頻中尋找位置的問題
侃侃無極
2022-07-21 10:57:39