Simple JavaScript Audio Player for Beginners

Simple JavaScript Audio Player for Beginners (Free Code)

Simple Javascript Audio Player

JavaScript Audio Player is a popular client-side project. This type of Simple JavaScript Audio Player is used when using audio in projects or websites. Music player is made in many advanced ways using different types of programming code.

From this tutorial, you will learn how to create a Simple Audio Player using HTML 5 and javascript. There are many tutorials on the Internet for creating HTML audio players. 

However, I noticed that a lot of advanced JavaScript has been used to create that design. I have created this music player tutorial to solve that problem.

Simple Javascript Audio Player

You will find many tutorials on creating a simple audio player on the Internet. However, in most cases, a lot of difficult JavaScript has been used. However, in this case, I have used very simple JavaScript and no external library is used here.

Ordinary music players have many options. Image, song change options, playlists, etc. make the audio player interesting. Live Preview 👇

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

Hopefully from the demo above you have learned how to create an HTML Audio Player. With this music player HTML code you can copy from the demo section.

Since this is a simple design, there are not many options. Only one audio has been used here. It also has some control buttons that will control the audio. It also has a sound control button in this Simple JavaScript Audio Player.

How to Create an Audio Player in JavaScript

Now I am going to see step-by-step how to create this project (music player HTML CSS javascript). Here I have used HTML, CSS, and javascript.

Step 1: Basic structure of Audio Player

A box has been created at the top of the web page using the following HTML and CSS. This box will serve as the basic structure of this audio player.

<div class=”container”>
  <div class=”text-container”>
  </div> 
</div>
* {
  box-sizing: border-box;
}
html {
  background: #084b78;
}
html, body, .container {
  height: 100%;
  margin: 0;
 font-family: Arial, Helvetica, sans-serif;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-container {
  background-color: rgb(255, 255, 255);
  padding: 40px 50px;
  border-radius: 5px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
Basic structure of Audio Player

Step 2: Add a heading in Music Player

Now a heading has been added to this Simple JavaScript Audio Player. This heading is for design only.

<span class=”text”>Audio Play</span>
.text {
  color: #ffffff;
  display: block;
  background-color: green;
  margin: -40px -50px 30px -50px;
  font-size: 25px;
  padding: 3px;
}
Add a heading in Music Player

Step 3: Button to control Audio Player

Now different types of control buttons have been added here. There are basically four buttons to control this js audio player. 

For a fast forward, for a fast backward, it has play and stops buttons. An on-click function has been added for each button.

<div class=”playback_controls”>
    <button onclick=”skip(‘back’)”><i class=”fa fa-fast-backward”></i></button>
    <button onclick=”playpause()”><i class=”fa fa-play”></i><i class=”fa fa-pause”></i></button>
    <button onclick=”stop()”><i class=”fa fa-stop”></i></button>
    <button onclick=”skip(‘fwd’)”><i class=”fa fa-fast-forward”></i></button>
</div>
.playback_controls{
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
  padding: 20px 40px;
}
button {
  background: #000000;
  color: #ffffff;
  background: linear-gradient(0deg,#000000,#262626);
  font-size: 14px;
  border: none;
  outline: none;
  padding: 0px 15px;
  width: 55px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
}
Button to control Audio Player

Different background colors have been added to the four buttons by your own CSS.

button:nth-child(1){
  background: rgb(2, 57, 130);
}
button:nth-child(2){
  background: rgb(172, 4, 4);
}
button:nth-child(3){
  background: rgb(24, 157, 6);
}
button:nth-child(4){
  background: rgb(2, 57, 130);
}
Audio Player for Beginners

Step 4: Audio’s distance control slider

Now it needs to create a range slider that will control the distance of the music. This means that you can determine where you want to listen to the audio with this control button.

<div id=”seekbar”>
   <input type=”range” oninput=”setPos(this.value)” id=”seek” value=”0″ max=””>
</div>
input[type=”range”] {
  border: 1px solid #000000;
  height: 5px;
  max-width: 200px;
  width: 100%;
  vertical-align: middle;
  border-radius: 20px;
  background-color: #232323;
  outline: none;
}
input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 20px;
  border: 4px solid  #035179;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #ffffff;
}
Audio's distance control slider

Step 5: Audio Player’s Sound Control Slider

Now you need to create a volume control button in this Simple JavaScript Audio Player. There are two things to control the volume. 

First, there is a button which is basically to turn on and off the audio in this music player. Then there is a range slider by which the value of volume can be controlled.

<div class=”volume_controls”>
    <button id=”mute” onclick=”mute()”><i class=”fa fa-volume-up”></i></button>
    <input type=”range” id=”volume” oninput=”setVolume(this.value)” min=”0″ max=”1″ step=”0.01″ value=”1″>
</div>
.volume_controls button{
  background: rgb(167, 62, 1);
} 
Audio Player's Sound Control Slider

Step 6: Activate Audio Player with JavaScript

JavaScript will help you to implement this simple audio player. Although js plays the most important role in this design. For this, you must have some idea about JavaScript.

var song = new Audio;
var muted = false;
var vol = 1;
song.type = ‘audio/mpeg’;
// audio url
song.src = ‘https://www.bensound.com/bensound-music/bensound-summer.mp3’; 
function skip(time) {
   if (time == ‘back’) {
      song.currentTime = (song.currentTime – 5);
   } else if (time == ‘fwd’) {
      song.currentTime = (song.currentTime + 5);
   }
}
//pause button
function playpause() {
   if (!song.paused) {
     song.pause();
   } else {
     song.play();
   }
}
//stop button
function stop() {
   song.pause();
   song.currentTime = 0;
   document.getElementById(‘seek’).value = 0;
}
function setPos(pos) {
   song.currentTime = pos;
}
//sound mute button
function mute() {
  if (muted) {
    song.volume = vol;
    muted = false;
    document.getElementById(‘mute’).innerHTML = ‘<i class=”fa fa-volume-up”></i>’;
  } else {
    song.volume = 0;
    muted = true;
    document.getElementById(‘mute’).innerHTML = ‘<i class=”fa fa-volume-off”></i>’;
  }
}
function setVolume(volume) {
   song.volume = volume;
   vol = volume;
}
song.addEventListener(‘timeupdate’,function() {
   curtime = parseInt(song.currentTime,10);
   document.getElementById(‘seek’).max = song.duration;
   document.getElementById(‘seek’).value = curtime;
})
Audio Player with JavaScript

This design is sufficient to use as a free music player on different web pages. Since I designed it to target beginners, I used the simplest code. If there is any problem then you can definitely let me know by commenting.