javascript – 如何连续播放声音而不会中断？

我试图在基于浏览器的游戏中播放车辆驱动的声音(连续不断).
我的.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();
}

任何人都可以帮我连续播放声音吗？
版
您可以访问我的页面here来观察问题.

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>

解决方法:

使用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>

标签：javascript,html5,html5-audio,audio,audio-streaming
来源： https://codeday.me/bug/20190608/1197439.html