Question

I want to implement a html audio player in my project having playlist with it. I gone through many jquery plugins (jplayer,etc…) but that does not fulfill my requirement.

Actually a listing of songs will should be displayed to user having other information with it like (rating,price,time,buy now). Jplayer library provides a utility of playing plylist but there song list is not easily customizable.

Can anybody please help me with an example of such a audio player or near about this or any instructions regarding the same would be great help.

Thanks

Answer 1

A simple demo for Chrome: http://jsfiddle.net/yJfbX/2/

The playlist is a plain unordered list so it is easy customizable via CSS. Please consider this as a simple proof of concept to create your own playlist, since I’ve not considered different audio container than mp3

markup

<ul id="playlist">
    <li data-src="http://....mp3">title 1</li>
    <li data-src="http://....mp3">title 2</li>
    <li data-src="http://....mp3">title 3</li>
</ul>

jQuery

var audio    = new Audio();
    playlist = $('#playlist');

    playlist.on('click', 'li', function() {
        playlist.find('.current').removeClass('current');
        $(this).addClass('current');
        audio.src = $(this).data('src');
        audio.play();
    });

audio.controls = true;
document.body.appendChild(audio);

​