logo标签列表

如何重复播放HTML5音频

javascripthtmlhtml5-audio
3

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

我想通过以下方式平滑地无缝重复播放一个长度为10秒的音轨（例如3次）：

  1. 从给定的音频播放器提取音频 - 不需要，从服务器加载.wav文件等即可
  2. 将音轨连接n次（将其添加到自身的末尾）
  3. 在新播放器中播放结果

如何执行第2步？最好附有示例，但第2步是最棘手的。

注意： 将原始播放器设置为重复播放等不是一种选项，因为大多数浏览器都不会很流畅。

你能在JavaScript中播放声音吗，还是必须使用HTML音频元素？ - scrblnrd3
1
据我所知，您无法访问html5 audio标签的原始数据。您可以通过ajax获取二进制blob并使用Audio API，但它仍然非常、非常实验性。在我调查这个API时，它只支持Chrome Canary浏览器。 - Tommi
是的，现在对我来说很实验性我感到满意 - 我只想在浏览器中得到一个演示。顺便说一句，那是一篇很好的文章，谢谢。 - James
1
我建议使用像node.js这样的东西，其中合并流相当容易，而不是试图弄清楚一种技术（音频API），因为它是如此新的技术，甚至不能保证在一个Chrome版本到另一个版本之间工作方式相同。 - adeneo
虽然你说得没错，但我非常想要尝试一些实验性的东西，因为我想避免做服务器端的工作（负载太大）。 - James
显示剩余2条评论
6个回答
4

循环属性是一个布尔属性。

当存在时，它指定音频在完成后每次都会重新开始。

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

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.

将音频文件添加到队列中：
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()

这里还有一些其他的功能，比如清除队列、从队列和/或库中删除项目。但是它应该不难理解。

稍微改进一下的话，可以添加一个 else clearInterval(player);。 - Silly Freak
1
我觉得编写这个代码很有趣，所以我创建了一个存储库。这是我的第一个存储库。链接 我会尽量抽出时间进行改进。 - Kevin Kuyl
1
这个问题很老了，为什么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>

0

这并不是对问题的直接回答，但是要无限播放HTML5音频，可以按照以下步骤进行：

const audio = new Audio('url_here.mp3');
audio.loop = true;
audio.play();
0
-1

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

var sound=new Audio(document.getElementById("audio").src);
for(var i=0;i<3;i++){
   sound.play();
}
2
很抱歉，sound.play(); 不是同步的，所以它只会播放一次声音。 - James
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接