Question

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

table { table-layout: fixed; }

我想在他们之间一个接一个地播放他们。

我尝试了两个带example.net/{num}.mp3的音频元素并在它们之间切换，但我仍有延迟。

有什么想法吗？

Answer 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();

这与立即播放下一个音频元素有关，因为你说你已经有两个音频元素，但是如果我遗失了某些内容，请告诉我。

Answer 2

如果数组Array.prototype.shift()大于src，您可以使用ended事件.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();

Answer 3

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

for refrence how to display multiple videos one by one dynamically in loop using HTML5 and javascript

Web：如何一个接一个地播放音频文件而没有延迟？

3 个答案: