Hello coders, hope you all are doing good. I’m back with an interesting and very useful topic. Today You’ll learn how to make a custom music player in javascript with the cool design of radio. Earlier, you’ve learned to create a responsive educational website using HTML, CSS & Javascript.
For creating a custom music player the main thing you need to know is Javascript. All the functionality can be created only with the help of javascript. However, the designing part is also important but there is a main role of javascript in the music player. Without doing further late let’s move towards the overview of the music player we are going to make today.
As you have already seen in the above image, that’s exactly what we are going to make today. In this music player, I have tried something different for its design. I have tried to give it the look of old vintage radio. At the top, there is an antenna and after that the main body of the radio start. In the main body, there are three different div; one outer layer, one div for the title and featured image, and one div for all the control buttons and progress bar. That’s all in the designing part. Let me remind you that this one is completely responsive that can be run on all sizes of the screen smoothly and perfectly.
If you are feeling difficulty understanding what exactly I’m saying, you can watch the video below.
You Might Also Like
Video of the custom radio music player in javascript
As you can see in the above video, all the designs are completely responsive and created with pure CSS. You have also seen the javascript code which plays a vital role in creating this music player. If you are a beginner and feeling difficulty understanding javascript code then, don’t worry I have provided well-commented source code for free. Believe me, it’s really easy. You have to just go through the code carefully. To get the source code of this custom radio music player, you just need to scroll down.
Before the source code, let me explain the key points of
javascript used in this music player. For showing the progress bar I have divided
the total duration of music by the current playing time and converted it into
percentages. After that, I submitted the calculated percentage to the width
of the progress bar. When the playing time of music has changed the width of the progress
bar also changes. The function is as follows:-
function progressbar(){
var progressed = music.currentTime*100/music.duration;
progress.style.width = progressed + "%";
}
For creating play and pause features I’ve created two
functions for play and pause separately that will check whether the music is
playing or not as well the image is rotating or not. If the music is in the pause
position then you have to click on the play button. When you click the play button
music will start playing, the image will start rotating and the pause button appear.
The same process is done in a reverse way for the pause function. The functions are
as follows:-
Play function
function playmusic(){
if(playing==false && imagerotation==false){
music.play();
pause.style.display = "grid";
image.style.animation = "imagerotate 4s linear infinite";
playing = true;
imagerotation = true;
}
}
Pause function
function pausemusic(){
if(playing==true && imagerotation==true){
music.pause();
pause.style.display = "none";
image.style.animation = "none";
playing = false;
imagerotation = false;
}
}
For the forward function, I’ve added five seconds to the current
playing time and for backward I’ve subtracted five seconds in the current
playing time. The codes are as follows:-
Forward function
function forwardMusic(){
var time = music.currentTime;
music.currentTime = time + 5;
}
Backward function
backward.addEventListener('click', backwardMusic);
function backwardMusic(){
var time = music.currentTime;
music.currentTime = time - 5;
}
Custom Radio Music Player in Javascript [Source Codes]
To create this radio music player you have to create three files i.e. an HTML file, a CSS file, and a Javascript file. After creating these files just paste the below code into your files. The folder structure is given below.
First, create one HTML file with the name index.html and
paste the below HTML codes into your file. Remember, you have created a file with a .html extension.
index.html
Second, create a file with the name style.css and paste
the below codes into your CSS file. Remember you have to create a file with a .css
extension.
style.css
At last, create a file with the name script.js and paste
the below codes into your javascript file. Remember, you have to create a file
with a .js extension.
script.js
That’s all you have to do. Congratulation, you have
successfully created your own custom radio music player in javascript. If you
have faced any problems while creating this music player, drop your problems
and queries below in the comment. I will help you to solve your problem. That’s
all for today I’ll be back with the next stunning blog later.
#keeplearning #keepcoding
Post a Comment