Codehints | HTML5 Audio and Video and how to make a playlist

HTML5 Audio and Video and how to make a playlist

Anish

Apr 22^nd, 2015

HTML

With the release of HTML5 A whole bunch of new elements where introduced including the audio and video elements. The huge advantage of these new elements is that most browsers today can understand these new HTML5 elements, this is great since Adobe is no longer supporting flash for mobile. Also since the audio and video are now a real element on the page and not some flash addon, you have an even greater level of control over these media elements.

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

#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;}

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