How to Create Custom Audio Media Player With HTML5 and JQuery P1 ~ Hybrid Mobile Apps Development, React Native, Flutter, JavaScript, Darts, iOS, Android, NodeJS
Coding Savvy FB Twitter Google
» »

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

The tutorial you have basic knowledge of HTML and JavaScript, We are going to create an awesome audio music player that can work cross-browser with an incredible look and feel.
 JQuery is involved for compatibility. I/O is still evolving on the web lot of security constraints has been put in place for user protection. Our aims are quite simple. Get audio files, read them and play.
Streaming is done by the app. The supported extension is mp3, mp4, wave e.t.c.
How to Create Custom Audio Media Player With HTML5 and JQuery P1

Download Script Live Demo
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 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 stuff 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 use this player to read an mp 3 file from server side too. There are some new things like sorting of the playlist, manual uploading apart from the normal drag and drop of an mp3 file.

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 part 2 of this mp3 audio player, the //TODO: is to make it read a file from the 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 checkbox 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: