how to play

Question

I have two tags like this:

<audio id="1" src="lub0.mp4" />
<audio id="2" src="lub1.mp4" />

I want to play them one by one, i.e. .play() first one and when it launches onend event, I'll .play() the second one. Unfortunately this gives me a pop sound in between. Is there any correct crossbrowser way to do this without click?

The files themselves are fine, if I glue them to each other in ffmpeg, sound is perfect.

Thanx.

Loading them in an audio buffer using the web audio api and then playing them might remedy this - but the code is a lot more involved — William, Jan 26 '16 at 15:39

aemorales1 · Answer 1 · 2016-01-29T16:03:38.233

3

Try the following.

var fileOne = document.getElementById('1');
fileOne.onended = function() {
    document.getElementById('2').play();
}

fileOne.play();

I did format the audio tag differently, I tried it the way you had it and it failed. Here is how I have it

<audio id="1">
<source src="movie.mp4" type="video/mp4">
</audio >

<audio id="2">
  <source src="movie.mp4" type="video/mp4">
</audio >

edited Jan 29 '16 at 16:03

answered Jan 29 '16 at 15:39

aemorales1

312
3
13

I was able to get this going without hearing anything in between plays – aemorales1 Jan 29 '16 at 15:43
However I was using mp3 not mp4 files, – aemorales1 Jan 29 '16 at 15:45
Just tried it with MP4 and was able to get it without any sounds in between plays – aemorales1 Jan 29 '16 at 15:48
Can u create a fiddle? I tried this also, but had a delay. What browser did u use for testing? – Stepan Yakovenko Jan 29 '16 at 16:27
I also had about a half second delay. I don't have any local mp3 or mp4 files, just went to w3schools and played with their files. I'll try to see if I can get rid of the delay, though I'm not sure it's possible. – aemorales1 Jan 29 '16 at 16:30

score 2 · Answer 2 · answered Feb 02 '16 at 13:46

Here is a fiddle you can check. You don't need to click on them, they are in a playlist and js eventlistener checks when one ends it goest to another. when one ends other one will start.Note that i did not create that fiddle but used it as an example for myself as well in my project.

http://jsfiddle.net/WsXX3/33/

HTML:

    <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
    <source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
    Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
    <li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
    <li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
    <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
    <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>

</ul>

CSS:

#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}

JS:

var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    audio[0].play();
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}

Sasha · Answer 3 · 2016-02-05T02:47:28.967

If I understood you correctly...

This only thing that I can recommend now is adding preload="auto" (to reduce time for buffering).
Example:

HTML:

<audio id="file1" src="http://www.freesound.org/data/previews/335/335253_3162775-lq.mp3" controls preload="auto"></audio>
<br>
<audio id="file2" src="http://www.freesound.org/data/previews/331/331122_4490625-lq.mp3" controls preload="auto"></audio>

JS:

var file1 = document.querySelector('#file1');
var file2 = document.querySelector('#file2');

file1.onended = function() {file2.play();}
file2.onended = function() {file1.play();}

file1.play();

However, although this seems to work when MP3s are two unrelated songs or etc, cutting one sound with ffmpeg into two separate files and playing them in this way will show a glitch in the beginning of second file. Never-the-less, in my case concatenating them back into single file doesn't repair glitch (i.e. in my case glitch is a property of sound files themselves as they appeared by inaccurate cutting of single file into two pieces -- not the result of browser behavior -- can you provide your file?).

This is my [result of concatenation](http://www.filedropper.com/concat) (the [original file](http://www.freesound.org/data/previews/331/331122_4490625-lq.mp3) was split at 00:00:05.000 and then concatenated back). It's interesting that plays perfectly in Amarok, but playing it with browser still shows glitch at 00:00:05.000 -- i.e. the concatenated file sounds differently in different players. — Sasha, Feb 05 '16 at 02:26

how to play blocks one by one with no pops and clicks?

3 Answers3

how to play