Web: How to play audio files one after the other without a delay ?

Question

I have urls of several audio files like this:

example.net/{num}.mp3

And I would like to play them one after the other without a delay between them.

I tried having two audio elements with preload=true and switching between them, but I still have a delay.

Any ideas ?

I'm sure you already thought of this, but have you confirmed that there is no silence built into the audio tracks? — Rob Louie, Jun 28 '16 at 02:25

score 1 · Answer 1 · answered Jun 28 '16 at 02:48

I'd like to see the actual code of what you have so far, because I'm not 100% sure what "switching between them" means, but I wrote the following example which starts the next file playing before the first one finishes. You specify a set amount of "overlap", and it starts playing the next file 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();

This is just relevant to playing the next audio element instantly, since you said you already had two audio elements, but if I'm missing something let me know.

guest271314 · Answer 2 · 2016-06-28T02:19:44.877

You can use ended event, Array.prototype.shift() to set src of element to next item within array, if array .length is greater than 0, call .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();

score 0 · Answer 3 · edited May 23 '17 at 10:28

  <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: How to play audio files one after the other without a delay ?

3 Answers3