html 5 audio player
Today I am going to discuss about html 5 audio player with playlist.Before going to discuss , we need to know about the audio player.
What is HTML 5 audio player?
HTML 5 audio player is audio element.Using the element we can embed music file and play it inside website.
Browser Support
Here table specify the first browser version that fully supports <audio> the element.
Chrome | Internet explorer | Firefox | Safari | Opera |
---|---|---|---|---|
4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
The HTML <audio> Element
Here is the audio element of html 5
<source src=”my.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
Now we are entering to the topic.Here we are creating four button.Those are play, pause, next, previous with audio player.
<a data-player=”play” class=”btn play-btn” onclick=”document.getElementById(‘xAudio’).play()”><i class=”fas fa-play” style=”margin-top: 15px;”></i></a>
<a data-player=”pause” class=”btn pause-btn” onclick=”document.getElementById(‘xAudio’).pause()”><span class=”fa fa-pause” style=”margin-top: 15px;”></span></a>
<audio id=”xAudio” autostart=”0″ autostart=”false” preload =”none” controlsList=”nodownload” style=”display: none;”></audio>
<a data-player=”next-track” class=”btn next” data-track-no=”1″ style=”cursor: pointer;”><span class=”fa fa-step-forward” style=”margin-top: 15px;”></span></a>
Here xAudio is ID of audio element.We are using play and pause method to start and pause the audio element.
Playlist
Now we are creating playlist.This playlist contains three songs.
<ul>
<li>
<a data-track-index=”0″ class=”track playing” target=”_blank”>Song 1</a>
<a data-track-index=”1″ class=”track” target=”_blank”>Song 2</a>
<a data-track-index=”2″ class=”track” target=”_blank”>Song 3</a>
</li>
</ul>
</div>
We need the jquery library for that.
Now here the main full script, which controls all things.
var playlist = [
“assets/audio/song1.mp3”,
“assets/audio/song2.mp3”,
“assets/audio/song3.mp3”
];$(‘.track’).on(‘click’,function(){
var track_no=parseInt($(this).data(‘track-index’));
player(track_no,’play_track’);
if(track_no > 0)
$(‘.prev’).data(‘track-no’,track_no-1);
if(track_no < playlist.length)
{
$(‘.next’).data(‘track-no’,track_no+1);
}
})
$(‘.prev’).on(‘click’,function(e){
e.preventDefault();
var track_no=parseInt($(this).data(‘track-no’));
player(track_no,’prev’);
if(track_no > 0)
$(this).data(‘track-no’,track_no-1);
if(track_no < playlist.length)
$(‘.next’).data(‘track-no’,track_no+1);
});
$(‘.next’).on(‘click’,function(e){
e.preventDefault();
var track_no=$(this).data(‘track-no’);
player(track_no,’next’);
if(track_no > 0)
$(‘.prev’).data(‘track-no’,track_no-1);
if(track_no < playlist.length-1)
$(this).data(‘track-no’,track_no+1);
});
var xA = document.getElementById(“xAudio”);
xA.volume = 0.3;
xA.controls = true;
function player(x,type=”) {
$(‘#playlist ul’).find(‘li’).children(‘a’).removeClass(‘playing’);
$(‘#playlist ul’).find(‘li’).children(‘a[data-track-index=”‘+x+'”]’).addClass(‘playing’);
var i = 0;
xA.src = playlist[x]; // x is the index number of the playlist array
xA.load(); // use the load method when changing src
if(type !=”)
xA.play();
xA.onended = function() { // Once the initial file is played it plays the rest of the files
/* This would be better as a ‘for’ loop */
i++;
if (i > playlist.length) { // … Repeat
i = 0;
}
if(i > 0)
$(‘.prev’).data(‘track-no’,i-1);
if(i < playlist.length-1)
$(‘.next’).data(‘track-no’,i+1);
xA.src = playlist[i];
xA.load();
xA.play();
}
}
player(0); // Call the player() function at 0 index of playlist array
});
At initial loading we are calling the player function and passing 0 parameter for first song.We create a playlist array.Here we also define click event for next and previous button.
If you like this post, please share it and make good comment.