How to make a simple mp3 player with php, jquery

Introducing a new series of tutorials to make a web audio player which can load mp3 files from a folder with basic html5 and jquery. This can help you to make web audio player for your web projects. The first tutorial will cover how to obtain the songs and the basic controls of the player. We will later cover topics like controlling the volume,Song length seek bar, song tags and fetching album art from API of spotify music.
View Demo

The basic html5 structure has a main div with .player class. Inside there are two div’s with classes songlist and controls

<div class="player">
<div class="songlist">
</div>
<div class="controls">
<a class="previous"><i class="fa fa-backward"></i></a>
<a class="play" data-current="0"><i class="fa fa-play-circle"></i></a>
<a class="pause"><i class="fa fa-pause"></i></a>
<a class="next"><i class="fa fa-forward"></i></a>
</div>
</div>

 

I have used the font awesome pack for the control button icons. You could get a copy of font awesome icons from here

CSS

.player{
border-radius: 3px;
background: #fff;
}
.songlist{
padding-top: 15px;
}
.songlist li{
list-style: none;
padding: 15px;
font-size: 13px;
padding-left: 30px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.songlist li i{
display: none;
}
.playing{
background: #f06;
color: #fff;
}
.playing i{
float: right;
font-weight: bold;
font-size: 20px;
display: none;
}
.speakericon{
display: inline !important;
}
.controls{
padding: 15px;
margin-top: -1px;
border-top: 1px solid #ddd;
}
.controls a{
vertical-align: -webkit-baseline-middle;
padding: 0px 5px;
cursor: pointer;
}
.controls .previous{
font-size: 20px;
}
.controls .play,.controls .pause{
color: #f06;
font-size: 50px;
}
.controls .pause{
display: none;
}
.controls .next{
font-size: 20px;
}

This will render a basic mp3 player which can be customized in your own way.

PHP

The next part is to load the mp3 files in a folder and get the output via jquery. For a better more comfortable way, we use php to get all mp3 files in a folder and display it in json format so that the data is accessible in a simple and easier way. To get the files in the folder named mp3, we use $files=glob(“mp3/*.mp3*”) and the convert the header content type of the page to application/json . Then we encode the output to json format with json_encode function.

The whole php code will look like this.

<?php
$files=glob("mp3/*.mp3*");
header('Content-Type: application/json');
echo json_encode($files);
?>

JQuery

Why we use jquery is for the interaction with the elements of the page.The below is the jquery code for the mp3 player which defines various interactions like play,next song, previous song etc.. and the loading of php page with json data to the html structure.

$(document).ready(function(){

var audioElement = document.createElement('audio');
var a=[];
var listlength=0;
var startlist=0;
$.ajax({
url: "getsong.php",
dataType: "JSON",
success: function(json){
for(var i=0;i<json.length;i++){
a[i]=json[i];
$('.songlist').append('<li id="slid'+i+'"><a id="said'+i+'" data-url="'+json[i]+'" data-songid="'+i+'">'+json[i]+'</a><i class="fa fa-volume-up"></i></li>');
listlength=i;
}
audioElement.setAttribute('src', a[0]);
}
});

$(document).on('click','.songlist li a',function(){
var sid=$(this).attr('data-songid');
var element=$(this);
startlist=1;
guiplay(sid,a,element);
});

$(document).on('click','.next',function(){
var current=$('.play').attr('data-current');
startlist=1;
var sid=0;
if((parseInt(current)+1)>listlength)
{
sid=parseInt(current);
}
else {
sid=parseInt(current)+1
}
var element=$('#said'+sid);
guiplay(sid,a,element);
});

$(document).on('click','.previous',function(){
startlist=1;
var current=$('.play').attr('data-current');
var sid=0;
if((parseInt(current)-1)<0)
{
sid=parseInt(current);
}
else {
sid=parseInt(current)-1;
}
var element=$('#said'+sid);
guiplay(sid,a,element);
});

$(document).on('click','.pause',function(){
audioElement.pause();
$('.playing a i').hide();
$('.play').show();
$('.pause').hide();
});

$(document).on('click','.play',function(){
audioElement.play();
if(startlist==1){
}
else {
$('#slid0').addClass('playing');
$('#slid0 i').addClass('speakericon');
}
$('.play').hide();
$('.pause').show();
});

function guiplay(sid,a,element)
{
$('.playing').removeClass('playing');
element.parent().addClass('playing');
$('.speakericon').removeClass('speakericon');
element.parent().children().addClass('speakericon');
audioElement.setAttribute('src', a[sid]);
$('.play').attr('data-current',sid);
audioElement.play();
$('.play').hide();
$('.pause').show();
}

});

This will give you a basic mp3 player which can get mp3 from a folder and pass it to the player list.What we do in this jquery code is ,creating an audio element and setting its src attribute. And then we use jquery audio functions like play,pause to control the audio.

We will be soon adding more features like song progress bar, ID3 tags, fetching album art from spotify and so on. So keep looking for more post from us. Meanwhile follow us on our social media websites and for any queries or updates comment.

 

Leave a Reply