CODEWITHSUNDEEP
htmlaudio
N. McA.
N. McA.

Reputation: 4946

Playing sounds sequentially HTML5

In HTML5, is there an easy way to group audio clips together? I'm hoping to play 3 extremely short mp3s sequentially, but unfortunately it's key that there is no lag between them. I also need to have one play button for all of them. Thanks to anyone who knows,

N

Upvotes: 2

Views: 1289

Answers (1)

atrljoe
atrljoe

Reputation: 8151

You cant do this entirely with HTML5, you will need to add jQuery or some other javascript library to help you accomplish this. I recently created a mobile web app that used this tutorial as a starting point. You can check out an example here. Essentially all you need to do is modify the default functionality of the HTML5 audio player, and then make it do what you want.

HTML:

<audio id="audio" preload="auto" tabindex="0" controls="" >
    <source src="http://www.archive.org/download/bolero_69/Bolero.mp3">
    Your Fallback goes here
</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>

jQuery:

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

Source: http://blog.lastrose.com/html5-audio-video-playlist/

Upvotes: 3

Related Questions