How to Create Custom Audio Media Player With HTML5 and JQuery P1 ~ Coding Savvy
Coding Savvy FB Twitter Google
» »

How to Create Custom Audio Media Player With HTML5 and JQuery P1

The aim of this tutorial is to create an awesome audio music player that can work cross-browser and make it feel like the user is having the app directly on their computer, Which is cool. This is going to be fun you can sit back, You are about to learn the real power behind HTML5 and JQuery combination. One of the most difficult things the web is facing it to access local file from user system and read/write on them, most browsers prevent this for security reason which is fine. All we need for this tutorial is just a read only access to mp3, mp4, wave e.t.c files on user system, In the part two we are going to do more.
How to Create Custom Audio Media Player With HTML5 and JQuery P1

Download Script Live Demo
The access will also affect us somehow in this tutorial because there are some audio file that we might not gain fill access to on the user system. The app is meant to access audio files and get their meta to view their Album Cover,Artist, Time, and year of release using JavaScript ID3 reader but not all browsers will allow enough access. This would have been a lot easier if only our app is a desktop app. but we are on the we will work with what we have. This app will make use of ID3 JavaScript Library, Jquery , DropZone and HTML5 to read audio files. As I was developing the media player, I was going through my stuffs I found that I had a web media player developed by Dan Markov.
This is just the first part of what we can do with this music player, soon we are going to user this player to read mp3 file from server side too. I add some new things like sorting of the playlist, manual uploading apart from the normal drag and drop of mp3 file. I also added a voice recognition to improve the file search but I removed it because it is only supported by Chrome and Opera. Other browsers like Safari, Firefox and IE are still working on it and also the voice detection is hard when your plying a track because it doesn't recognize human voice from the system speaker sound yet. Here is the java Script file responsible for the action it was easy with the help of some javascript libraries like JQuery,WaveSurfer.JS e.t.c.

var allTracks = [], // An array for all the files loaded in the track 
playlist = [], // An array for the current playlist 
temporarySearchPlaylist = [], // A helper array for when we are searching 
 i = 0, // The number of the current track 
shuffle = false, // Shuffle flag 
repeat = 0, // Repeat flag 
lastPlayed = [], // Array for last played (used when shuffling songs) 
 timer = 0;// An interval for the track's current time. 
startPlayerWhenReady();
//Dropping files 
var dropZone = $('#drop-zone'), searchInput = $('#searchBox');
$(document).on('dragover', function(event) {
event.stopPropagation();
event.preventDefault();
dropZone.removeClass('hidden');
}
);
dropZone.on('dragleave', function(event) {
event.stopPropagation();
event.preventDefault();
dropZone.addClass('hidden');
}
);
dropZone.on('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'copy';
}
);
// Get file data on drop 
dropZone.on('drop', function(e) {
e.stopPropagation();
e.preventDefault();
if(e.originalEvent.dataTransfer.items){
// For chrome users folder upload is supported 
var items = e.originalEvent.dataTransfer.items;
for(var j=0;j<items.length;j++){
var item = items[j].webkitGetAsEntry();
if(item){
traverseFileTree(item);
} } }
else{
// Other browser users have to upload files directly 
var files = e.originalEvent.dataTransfer.files;
for(var j=0;j<files.length;j++){
if(files[j].type.match(/audio\/(mp3|mpeg)/)){
getID3Data(files[j], function (song) {
allTracks.push(song);
playlist.push(song);
$('#list').append($(returnTrackHTML(song, playlist.length-1)));
}
);
}
}
}
// If new files are added to existing playlist, cancel search. 
 if(allTracks.length){
searchInput.val('');
searchInput.trigger('input');
temporarySearchPlaylist = [];
}
dropZone.addClass('hidden');
}
);
// Recursively get files from folder (works only in chrome).  
function traverseFileTree(item,path) {
path = path || "";
if(item.isFile){
item.file(function(file){
if(file.type.match(/audio\/mp3/)){
getID3Data(file, function (song) {
allTracks.push(song);
playlist.push(song);
$('#list').append($(returnTrackHTML(song,playlist.length-1)));
});
}}) }
else if(item.isDirectory){
var dirReader = item.createReader();
dirReader.readEntries(function (entries) {
for(var j=0;j<entries.length;j++){
traverseFileTree(entries[j], path + item.name + "/");
}}) }
}
//file upload via button 
var fileInput = $('#upinp');
fileInput.on('change', function (e) {
e.preventDefault();
var files = fileInput.get(0).files;
for(var j=0;j<files.length;j++){
if(files[j].type.match(/audio\/(mp3|mpeg)/)){
getID3Data(files[j], function (song) {
allTracks.push(song);
playlist.push(song);
$('#list').append($(returnTrackHTML(song, playlist.length-1)));
});
}}
window.document.getElementById("upform").reset();
}
);
// Generate an object with all the needed information about a track. 
function getID3Data(file, done) {
getTags(file,function(result){
result.audioTrack = file;
result.playing = false;
done(result);
});}
// Get ID3 data tags from file. 
function getTags(file,done){
var result = {};
ID3.loadTags(file.name, function() {
var tags = ID3.getAllTags(file.name);
result.artist = tags.artist || "Unknown Artist";
result.title = tags.title || "Unknown";
result.album = tags.album || "";
.....................
In the part 2 of this mp3 audio player the //TODO: is to make it read file from server side, Create keyboard short-cut for player controls, Manual Editing of mp3 files that the ID3 reader is unable to name. and uploading of local files to the server. The purpose of the check box is to help select songs user want to upload.
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

1 comment: