<audio controls loop>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

它不会产生差距，请检查音频文件，大部分音频文件都有差距。

你可以测试它here，只需添加循环属性并运行页面。

使用JavaScript

这也是使用javascript

的替代方案

myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

这里的JavaScript会产生很小的差距，你可以通过播放循环来克服它，而不是在音频完成时但音频即将完成时。这是代码。

这就是你想要的。

myAudio = new Audio('http://unska.com/audio/pinknoise.ogg'); 
myAudio.ontimeupdate= function(i) {
  if((this.currentTime / this.duration)>0.9){
    this.currentTime = 0;
    this.play();
  }
};
myAudio.play();

Here是Demo。

Answer 2

这里的派对有点晚了，但是https://github.com/floatinghotpot/cordova-plugin-nativeaudio

我有一个无间隙的解决方案

不是最美丽的实现 - 但它完全无间隙地工作：

的Javascript

const LOOP_INTERVAL = 5000

window.plugins.NativeAudio.preloadComplex( 'loop1', getMediaURL('media/loop.mp3'), 1, 1, 0, function(msg){
  }, function(msg){
    console.log( 'error: ' + msg );
  });

window.plugins.NativeAudio.preloadComplex( 'loop2', getMediaURL('media/loop.mp3'), 1, 1, 0, function(msg){
  }, function(msg){
    console.log( 'error: ' + msg );
  });

function startGaplessLoop () {
  var flag = false;
  setInterval(function() {
     flag = !flag
     window.plugins.NativeAudio.play(flag ? 'loop2' : 'loop1') 
     setTimeout(function() {
      window.plugins.NativeAudio.stop(flag ? 'loop1' : 'loop2')
    }, 30)
  }, LOOP_INTERVAL)

  window.plugins.NativeAudio.play('loop1')
}

startGaplessLoop()

不要忘记停止间隔并在完成后卸下声音！

Answer 3

试试SoundJS。它包含cordova plugin。

如何使用移动浏览器进行无间隙音频循环？

3 个答案: