Web：如何无延迟地一个接一个地播放音频文件？
Posted
技术标签:
【中文标题】Web：如何无延迟地一个接一个地播放音频文件？【英文标题】：Web: How to play audio files one after the other without a delay ? 【发布时间】：2016-06-28 02:02:44 【问题描述】：我有几个这样的音频文件的网址：
example.net/num.mp3
我想一个接一个地播放它们，它们之间没有延迟。
我尝试使用 preload=true 设置两个音频元素并在它们之间切换，但仍然有延迟。
有什么想法吗？
【问题讨论】：
我确定您已经想到了这一点，但您是否确认音轨中没有内置静音？ 【参考方案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" 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();
【讨论】：
以上是关于Web：如何无延迟地一个接一个地播放音频文件？的主要内容，如果未能解决你的问题，请参考以下文章
在 iOS 13 safari/chrome 浏览器中播放音频 (mp3) 的延迟