如何不間斷地播放聲音？

Question

我試圖在基於瀏覽器的游戲中播放車輛驅動的聲音（連續不斷）。
我的.wav文件長度為1秒，從開始到結束具有相同的頻率。 但是在下一次迭代之前聲音會稍微休息一下。
這是代碼：

function playSound()
{
    //alert("");
    myAudio = new Audio('http://ithmbwp.com/feedback/SoundsTest/sounds/tank_driven.wav'); 
    if (typeof myAudio.loop == 'boolean')
    {
        myAudio.loop = true;
    }
    else
    {
        myAudio.addEventListener('ended', function() {
            this.currentTime = 0;
            this.play();
        }, false);
    }
    myAudio.volume = 0.3;
    myAudio.play();
}

任何人都可以幫我連續播放聲音嗎？

版

您可以在此處訪問我的頁面以觀察問題。

 window.onload = function() { playSound(); }; function playSound() { //alert(""); myAudio = new Audio('http://ithmbwp.com/feedback/SoundsTest/sounds/tank_driven.wav'); if (typeof myAudio.loop == 'boolean') { myAudio.loop = true; } else { myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); } myAudio.volume = 0.3; myAudio.play(); } 

 <h3 style="font-family:verdana;">Please listen the sound break.</h3> <h3 style="font-family:verdana;">It should be continuous.</h3> 

Answer 1

使用AudioContext API及其bufferSourceNode接口， 可以獲得無縫循環的聲音。

請注意，您還需要正確編輯音頻以避免噼啪聲和聲音片段，但您的音頻似乎很好。

 const aCtx = new AudioContext(); let source = aCtx.createBufferSource(); let buf; fetch('https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav') // can be XHR as well .then(resp => resp.arrayBuffer()) .then(buf => aCtx.decodeAudioData(buf)) // can be callback as well .then(decoded => { source.buffer = buf = decoded; source.loop = true; source.connect(aCtx.destination); check.disabled = false; }); check.onchange = e => { if (check.checked) { source.start(0); // start our bufferSource } else { source.stop(0); // this destroys the buffer source source = aCtx.createBufferSource(); // so we need to create a new one source.buffer = buf; source.loop = true; source.connect(aCtx.destination); } }; 

 <label>play audioBuffer</label> <input type="checkbox" id="check" disabled><br><br> Just to compare <audio src="https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav" loop controls> 

或者使用您的代碼段：

 window.onload = function() { playSound(); }; function playSound() { if (AudioContext) { out.textContent = "yeah now it's continuous !!!"; playAsAudioBuffer(); } else { out.textContent = "you should consider updating your browser..."; playNormally(); } } function playAsAudioBuffer() { var aCtx = new AudioContext(); // here is the real audioBuffer to sound part function ondecoded(buf) { var source = aCtx.createBufferSource(); source.buffer = buf; source.loop = true; var gainNode = aCtx.createGain(); gainNode.gain.value = .3; // here you set the volume source.connect(gainNode); gainNode.connect(aCtx.destination); source.start(0); } var xhr = new XMLHttpRequest(); xhr.onload = function() { aCtx.decodeAudioData(this.response, ondecoded); }; xhr.onerror = playNormally; xhr.responseType = 'arraybuffer'; xhr.open('get', 'https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav'); xhr.send(); } // An ugly workaround in case of old browsers function playNormally() { var myAudios = [new Audio('https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav')]; myAudios.push(new Audio(myAudios[0].src)); myAudios.forEach(function(a){ a.addEventListener('timeupdate', checkTime); a.volume = 0.3; }); function checkTime(){ if(this.currentTime > this.duration - 0.4){ startNext(this); } } var current = 0; function startNext(el){ current = (current + 1) % 2; myAudios[current].play(); el.currentTime = 0; el.pause(); } myAudios[0].play(); } 

 <h3 id="out"></h3> 

Answer 2

蜜蜂酷，只需使用幾行代碼

 window.onload = function() { playSound(); }; function playSound() { var myAudio = new Audio('http://ithmbwp.com/feedback/SoundsTest/sounds/tank_driven.wav'); myAudio.volume = 0.3 ; var tank_driven_sound = setInterval(function() { myAudio.currentTime = 0; myAudio.play(); }, 800); } 

 <h3 style="font-family:verdana;">Please listen, it's continuous.</h3>