Audio Object

Audio files in JavaScript Today we are going to learn about controlling audio components in JavaScript. We will use w3schools where we will find all the JavaScript components, but in today's lesson we will learn how to control the audio components.

We create an audio element in html that is audio and select an audio file from the files.

<button onclick="playMusic()">play</button>
<button onclick="pause()">stop</button>
<button onclick="load()">refresh</button>
<audio id="music" src="file path"></audio>

We created three buttons which are to play, refresh, stop and onclick, and we created an audio file, and we specified an id for it to be identified and called via JavaScript.

Code in javascript file

var music = document.getElementById("music");
function playMusic(){
	music.play();
}
function pause(){
	music.pause();
}
function load(){
	music.load();
}

We put a variable called music and called the audio file in it with the hands, and then we used the function to set the commands for the three buttons: play, pause, and refresh. The result of the browser is

When you press the play button, the audio file will play, and when you press stop, it will stop playing. And when you press update, the command will happen, and when you run it again, it will start again.

Volume control in JavaScript

Through the volume element, we can control the high and low volume of the sound according to the specified proportions.

Code format in html file.

<button onclick="playMusic()">play</button>
<button onclick="pause()">stop</button>
<button onclick="load()">refresh</button>
<button onclick="stopVolume()">turn off the sound</button>
<button onclick="playVolume()">Audio playback</button>
<audio id="music" src="hazt.mp3"></audio>

Code form in javascript file.

var music = document.getElementById("music");
function playMusic(){
	music.play();
}
function pause(){
	music.pause();
}
function load(){
	music.load();
}
function stopVolume(){
	music.volume = 0;
}
function playVolume(){
	music.volume = 1;
}

We created a function called stopVolume and set the variable with the volume property and gave it the command when the button is pressed the command is executed and the volume becomes 0% i.e. stop. We created a second function called playVolume and set the volume to 100%.

playbackRate audio acceleration

Through this feature, we can control the speed of the audio file, whether we want it fast, according to a percentage that we specify for it, or a slow rate that we also specify for it.

html code.

<button onclick="playMusic()">play</button>
<button onclick="pause()">stop</button>
<button onclick="load()">refresh</button>
<button onclick="stopVolume()">turn off the sound</button>
<button onclick="playVolume()">Audio playback</button>
<button onclick="speedUp()">speed up sound</button>
<button onclick="slowDown()">slow down the sound</button>
<audio id="music" src="hazt.mp3"></audio>

javascript code.

var music = document.getElementById("music");
function playMusic(){
	music.play();
}
function pause(){
	music.pause();
}
function load(){
	music.load();
}
function stopVolume(){
	music.volume = 0;
}
function playVolume(){
	music.volume = 1;
}
function.speedUp(){
	music.playbackRate +=0.10;
}
function.slowDown(){
	music.playbackRate -=0.10;
}

We created a function called speedUP and its property is that the acceleration is 10 and also a second function unlike the first.

When you press the acceleration button, the audio clip will become very fast, and when you press the down button, the audio clip will become slow.