Control audio through javascript

Controlling the audio through JavaScript is not a complex task. I will show how to play and pause the audio by clicking the play button and changing the play icon to the pause icon.

What will be the result

The UI does not look that good. But here we will be mainly focusing on writing the JavaScript code. So, when the play button is clicked the music will play ▶️, and clicking it again will pause ⏸️ the music.

Let's create some starter files

HTML

In your project folder create an HTML file with the name index.html

Add the following code to it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Music Player</title>

    <!-- linking the CSS file here -->
    <link rel="stylesheet" href="style.css" /> 

    <!-- linking the JavaScript code from Font Awesome to use the icons -->
    <script
      src="https://kit.fontawesome.com/43c11ae329.js"
      crossorigin="anonymous"
    ></script>


  </head>
  <body>

    <!-- a Div Container contains the three icons for back,play,forward-->
    <div class="container">
      <i class="fa-solid fa-backward"></i>
      <i class="fa-solid fa-play" id="ctrlIcon"></i>
      <i class="fa-solid fa-forward"></i>
    </div>

    <!-- Linking a audio file here -->
    <audio controls id="song">
      <source src="media/despacito.mp3" type="audio/mp3" />
    </audio>

    <!-- Linking the JavaScript code, that we're going to use to play/pause the song -->
    <script src="script.js"></script>
  </body>
</html>

So this is a fundamental HTML code. Here for icons, I used Font Awesome.

CSS

Now Create a style.css file and add the following CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  width: 450px;
  height: 200px;
  background-color: #999;
  margin: auto;
  margin-top: 200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fa-solid{
font-size: 50px;
}

#song{
  display: none;
}

Nothing much in this CSS as well. I used flexbox to align the icons inside the div element.

JAVASCRIPT

Now finally add a script.js file

Here we will write some code to play/pause the audio and change the play icon to pause.

Create two variables to store elements object. One for the play icon and another one for the audio.

//creating a play button varaible

let play = document.querySelector('#ctrlIcon');

//creating a audio variable

let song = document.querySelector('#song');

Now add an event listener on the play button. So that clicking it will execute some operation.🤔

play.addEventListener("click",function(){
//Here will put what operation it will perform
});

Now we have to add code to change the icon and play the song inside the curly braces.

The icon element for the play button has two classes fa-play and fa-solid. To change it to a pause icon we have to remove fa-play and add a fa-pause class.

To play/pause the audio execute the play()/pause() function on the audio element.

play.addEventListener("click",function(){
//Here will put what operation it will perform

//If play icon contains fa-play class means it is paused.
if(play.classList.contains('fa-play')){

    play.classList.remove('fa-play');
    play.classList.add('fa-pause');
    song.play(); 
  }
});

If the song is playing on clicking the icon the song must be paused on clicking it again. So add an else block.

play.addEventListener("click",function(){
//Here will put what operation it will perform

//If play icon contains fa-play class means it is paused.
  if(play.classList.contains('fa-play')){

    play.classList.remove('fa-play');
    play.classList.add('fa-pause');
    song.play();
  /  
  }else{
    play.classList.remove('fa-pause');
    play.classList.add('fa-play');
    song.pause();
  }
});

Now on clicking the play icon the audio will play and the icon will be changed as well.

Final JavaScript code

//creating a play button varaible

let play = document.querySelector('#ctrlIcon');

//creating a audio variable

let song = document.querySelector('#song');

//Adding an event listener on play icon.
play.addEventListener("click",function(){
//Here will put what operation it will perform

//If play icon contains fa-play class means it is paused.
  if(play.classList.contains('fa-play')){

    play.classList.remove('fa-play');
    play.classList.add('fa-pause');
    song.play();

  }else{
    play.classList.remove('fa-pause');
    play.classList.add('fa-play');
    song.pause();
  }
});

END🤝

I want to thank everyone who took the time to read my first blog 😀. Please post your reviews.

Lokesh Singh's Blog