# 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
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1672593534441/d8ae569b-a334-411f-ab10-8d8b2f8530c6.png align="center")
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.
```xml
Music Player
```
So this is a fundamental HTML code. Here for icons, I used [**Font Awesome**](https://fontawesome.com/)**.**
### CSS
Now Create a style.css file and add the following CSS
```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.
```javascript
//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.🤔
```javascript
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.
```javascript
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.
```javascript
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
```javascript
//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.