Web：如何无延迟地一个接一个地播放音频文件？答案

【问题标题】：Web: How to play audio files one after the other without a delay ?Web：如何无延迟地一个接一个地播放音频文件？
【发布时间】：2016-06-28 02:02:44
【问题描述】：

我有几个这样的音频文件的网址：

example.net/{num}.mp3

我想一个接一个地播放它们，它们之间没有延迟。

我尝试使用 preload=true 设置两个音频元素并在它们之间切换，但仍然有延迟。

有什么想法吗？

【问题讨论】：

我确定您已经想到了这一点，但您是否确认音轨中没有内置静音？

标签： javascript html audio web html5-audio

【解决方案1】：

我想看看你目前所拥有的实际代码，因为我不能 100% 确定“在它们之间切换”是什么意思，但我编写了以下示例，它在第一个文件之前开始播放下一个文件一个完成。您指定一定数量的“重叠”，它开始播放下一个文件 JSFiddle：http://jsfiddle.net/76xqhupw/4/

const OVERLAP_TIME = 1.0; //seconds

const song1 = document.getElementById('audio1');
const song2 = document.getElementById('audio2');

song1.addEventListener("timeupdate", function() {
  if (song1.duration - song1.currentTime <= OVERLAP_TIME) {
    song2.play();
  }
});

song1.play();

这与立即播放下一个音频元素有关，因为您说您已经有两个音频元素，但如果我遗漏了什么，请告诉我。

【讨论】：

【解决方案2】：

  <html>
<head>
    <title>Subway Maps</title>

    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body onload="onload();">
    <video id="idle_video" width="1280" height="720" onended="onVideoEnded();"></video>
    <script>
        var video_list      = ["Skydiving Video - Hotel Room Reservation while in FreeFall - Hotels.com.mp4",
                                "Experience Conrad Hotels & Resorts.mp4",
                                "Mount Airy Casino Resort- Summer TV Ad 2.mp4"
                            ];
        var video_index     = 0;
        var video_player    = null;

        function onload(){
            console.log("body loaded");
            video_player        = document.getElementById("idle_video");
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }

        function onVideoEnded(){
            console.log("video ended");
            if(video_index < video_list.length - 1){
                video_index++;
            }
            else{
                video_index = 0;
            }
            video_player.setAttribute("src", video_list[video_index]);
            video_player.play();
        }
    </script>
</body>

参考how to display multiple videos one by one dynamically in loop using HTML5 and javascript

【讨论】：

【解决方案3】：

您可以使用ended事件，Array.prototype.shift()将元素的src设置为数组中的下一项，如果数组.length大于0，则调用.load()，.play()

var url = "example.net/"
var type = ".mp3";
var n = [0,1,2,3,4,5];
var audio = document.querySelector("audio");
audio.onended = function() {
 if (n.length) {
  this.src =  url + n.shift() + type;
  this.load();
  this.play();
 }
}
audio.src = url + n[0] + type;
audio.load();
audio.play();

【讨论】：