Question

请在回答之前仔细阅读（谢谢）：

我希望通过以下方式无缝地重复曲目（比如10秒）一定次数（比如3次）：

从给定的音频播放器中提取音频 - 不是必需的，从服务器上加载.wav等都很好
连接音频n次（将曲目添加到自身的末尾）
在新播放器中播放结果

怎么可能做到2？一个例子很棒，但2是最令人费解的。

注意：将原始播放器重复设置等不是一个选项，因为它在大多数浏览器上并不流畅。

Answer 1

对此问题有效的脏解决方案是设置间隔：

var sound = new Audio(document.getElementById("audio").src)
var trackLength = 5000 // 5 seconds for instance
var playthroughs = 3 //play through the file 3 times

var player = setInterval(function(){
    if(playthroughs > 0){
        sound.play();
        playthroughs--;
    }
    else clearInterval(player)
}, trackLength);

编辑：有人向我指出我的代码可以使用一点点改进，我有点被带走了。结果如下：

var Sound = {
  que: {
    items: [],

    add: function(name){
      if(Sound.lib.items[name]) return Sound.que.items.push(Sound.lib.items[name]) - 1;
    },

    remove: function(key){
      Sound.que.items.splice(key, 1);
    },

    clear: function(){
      Sound.que.items = [];
    },

    play: function(startTrack){
      var playing = startTrack -1 || 0;


      var playNext = function(key){
        if(Sound.que.items[key]){
          if(Sound.que.items[key].isLoaded){
            var trackLength = Math.floor(Sound.que.items[playing].duration * 1000);

            Sound.que.items[key].play();

            var play = setTimeout(function(){
              playing++
              playNext(key +1)
            }, trackLength)
          }
          else{
            Sound.que.items[key].addEventListener('canplaythrough', function(){
              playNext(key);
          })
        }

        }
      }

      playNext(playing);
    }
  },
  lib: {
    items: {},

    add: function(src, name){
      var obj = new Audio(src);
          obj.addEventListener('canplaythrough', function(){
            this.isLoaded = true;
          })
      if(!name){
        var key = 0;
        for(i in Sound.lib.items){
          key++;
        }
        name = key;
      }

      Sound.lib.items[name] = obj;
    },

    remove: function(name){
      if(typeof name == "string"){
        delete Sound.lib.items[name];
      }
    }
  },
}

面向对象的方法。它有一个简单的声音库和一个可以按任何顺序添加声音的曲目。我不知道它是否完全调试过，但似乎效果很好。

将新音频文件添加到库中：

Sound.lib.add('path/to/file.mp3', 'trackName'); //trackname will be numerical if none is given.

将音频文件添加到que：

Sound.que.add('trackName');

玩阙：

Sound.que.play(2); // 2 indicates to start playing at the second sound in the que, assuming the que has 2 or more sounds in it.

清除阙：

Sound.que.clear()

还有更多功能，例如清除que，从que和/或库中删除项目。但它不应该很难弄明白。

Answer 2

O_o这个问题很老，为什么StackOverflow会告诉我这个。

这样做的一个简单方法就是听完结束重新开始播放。

function play(audio, times, ended) {
    if (times <= 0) {
        return;
    }
    var played = 0;
    audio.addEventListener("ended", function() {
        played++;
        if (played < times) {            
            audio.play();
        } else if (ended) {
            ended();
        }
    });
    audio.play();
}

var audio = document.getElementsByTagName("audio")[0];
play(audio, 3, function() {
    var sound = new Audio("http://www.soundjay.com/button/button-1.mp3");
    play(sound, 2);
});

<audio src="http://www.soundjay.com/button/beep-01a.mp3"></audio>

Answer 3

loop属性是一个布尔属性。

如果存在，则指定每次完成时音频将重新开始。

<!DOCTYPE html>
<html>
<body>

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

<p><strong>Note:</strong> The audio tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio_loop

Answer 4

执行此操作的唯一方法是使用Web Audio API (spec) MDN page。然而，这是一个正在开发中的标准，因此尚未最终确定。

Answer 5

我认为最无缝的方法是使用Javascript

var sound=new Audio(document.getElementById("audio").src);
for(var i=0;i<3;i++){
   sound.play();
}

如何重复html5音频

5 个答案: