When I was in first semester of MCA, there was a mini project session that we needed to submit to department. That time i had submitted Audio player created using HTML and JavaScript. So today in this tutorial I am going to share the basic concept of how to design and develop a customized HTML5 Audio Player using Bootstrap and JQuery.
In the past story of audio implementation in websites we needed to use 3rd party plugins such as FLASH. But before few years, the new that Adobe will no longer support Flash for mobile, many developer are looking at the other ways to incorporate audio into their projects. So this is where HTML5 plays an important role to solve this problem.
HTML5 Provides a simplest way to implement audio into web page using new tag that is “audio”. See the following syntax for audio tag.
<audio controls>
<source src="sample.ogg" type="audio/ogg">
<source src=" sample.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute adds audio controls, like play, pause, and volume.
The
Now we are going to create our Audio player ui with bootstrap framework. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is completely free to download and use!. If you are not familiar with bootstrap, so learn it first.
To make my project Dependency here I am using Bower. You can also use CDN instead. This is our HTML Makeup as fallows,
In the above step we see what is syntax and how works the HTML5 Audio tag. When we start design customized Audio player using JavaScript we need to know little bit about JavaScript and JQuery.
So in this tutorial we have defined document ready in jQuery, then after we have created variable that hold the audio file that going to play.
$song = new Audio("path-to-audio-file.ogg"); The Audio() is an Class provided by JQuery that return object of Audio tag . using constructor we pass the file name to class constructor.
After then, we have some function that responds to feature of our Audio player that is Play, pause, stop, and mute. Where we use list of actions that we can take with variable that is $song. Those actions are shows bellow,
Once the styling and markup has been done it's time to make the player actually come to working. We can do this using JQuery . as describe above after document ready fuction get declare we creates some variables as fallows
$playpause = $('#playpause');
$mute = $("#mute");
$bool = true;
$mutetoggle = true;
$song = new Audio("assets/ogg/akon beautiful ft.ogg");
$totaltime = $(".totaltime");
$curtimediv = $(".curtime");
$bool is a Boolean variable that will get changed runtime according to either Audio is Play Or pause also, $mutetoggle will get changed runtime according to either Audio is mute Or not.
Next things we are going to create our click function which will allow us to play, pause, mute and stop the Audio.
play = function() {
$bool = !$bool;
if($bool){
$song.pause();
$playpause.removeClass("fa-pause-circle-o");
$playpause.addClass("fa-play-circle-o");
}else{
$song.play();
$playpause.removeClass("fa-play-circle-o");
$playpause.addClass("fa-pause-circle-o");
$totaltime.text((parseInt($song.duration, 10)/60).toFixed(2));
}
}
mute = function(){
$mutetoggle = !$mutetoggle;
if($mutetoggle){
$song.volume = 1;
$mute.removeClass("fa-volume-off");
$mute.addClass("fa-volume-up");
}else{
$song.volume = 0;
$mute.removeClass("fa-volume-up");
$mute.addClass("fa-volume-off");
}
}
stop = function(){
$song.pause();
$song.currentTime = 0;
$bool = true;
$playpause.removeClass("fa-pause-circle-o");
$playpause.addClass("fa-play-circle-o");
}
The final part of the jQuery is to calculate total duration and current time of the audio. We do this by adding an event listener to it and when the audio time updates we call the function.
$song.addEventListener('timeupdate',function (){
$curtime = parseInt($song.currentTime, 10);
$curtimediv.text((parseInt($song.currentTime, 10)/60).toFixed(2));
$(".nikiphoros-main .player .thumbnail .progress-bar .overlay").css("width",(($curtime/Math.round($song.duration))*100)+"%");
});
And here we go. We create a customized HTML Audio Player using Jquery.
Tailor your digital solutions with our custom web apps services. Our team specializes in creating bespoke web applications that cater to your specific business requirements. Whether it's process automation or data management, our custom web apps are designed for efficiency. Explore more about our custom web apps services.
read more
It is said that “Old habits die hard”. But what if these habits are required to change?
When it comes to building a successful website, two crucial roles come into play: web design and web development. While the terms are often used interchangeably, they refer to distinct aspects of the website creation process. This article will explore the differences between web design and web development, shedding light on the unique skills and responsibilities associated with each role.
Responsive web design is not just a trend; it's a fundamental approach to creating websites that can adapt to the diverse range of devices and screen sizes in use today. As we enter 2023, mastering responsive web design is more critical than ever. This comprehensive guide will take you through the key principles, best practices, and the latest techniques to ensure your websites provide an optimal user experience across all platforms.
Typography is a fundamental element of graphic design, shaping how information is presented and perceived. In this exploration, we delve into the transformative power of typography in modern graphic design, examining its influence on visual communication and user experience.
