JavaScript – How to Play Audio?

January 12, 2023 | by Arround The Web | No comments

JavaScript – How to Play Audio?

While creating an entertainment-based website, there can be a requirement to include audio to clear out the user’s understanding. For instance, appending audio relevant to the added content. In such cases, playing audio in JavaScript is of great aid in engaging the audience, thereby increasing the traffic, and improving the user’s interaction with the site.

This article will describe the approaches to play audio in JavaScript.

How to Play Audio in JavaScript?

To play audio in JavaScript, apply the below-stated approaches:

Method 1: Play Audio Using the “play()” Method in JavaScript.

The “play()” method plays the current audio, and the “pause()” method stops the audio being played. These methods can be applied to play and pause the associated audio with the help of a user-defined function.

Example

Let’s overview the below-stated example:

</audio>

<br>

<button onclick="pauseAudio()" type="button">Pause</button>

let x =document.getElementById('mySound');
functionplayAudio() {
x.play();
}
functionpauseAudio() {
x.pause();
}

</script>

In the above code lines:

Firstly, include an “<audio>” element along with the “audio” attribute that allows to include the play, and pause controls.
After that, include a “<source>” element to attach the audio file and specify the type of the file in the “type” attribute.
In the next step, create two buttons with attached “onclick” events invoking the stated functions to play and pause the audio file.
Now, in JavaScript code, fetch the audio file by its “id” using the “getElementById()” method.
Then, define a function named “playAudio()”.
In its definition, apply the “play()” method to play the associated audio.
Likewise, declare a function “pauseAudio()”, and the “pause()” method in its definition will similarly pause the corresponding audio.

Output

In the output, it can be seen that the included audio is being played and paused properly.

Method 2: Play Audio Using autoplay Property in JavaScript

In this method, the “autoplay” property enables the audio as soon as it is loaded. This property can be utilized to play the corresponding audio upon being loaded.

Example

The below-stated example illustrates the stated concept:

<button onclick="pauseAudio()”>Pause</button>

let myAudio = new Audio();
functionplayAudio() {
alert('The audio will start playing now.')
myAudio.src = 'sound.mp3';
myAudio.autoplay = true;
myAudio.loop = true;
}
functionpauseAudio(){
alert('Now the audio will pause')
myAudio.pause();
}

</script>

In the above code block:

Likewise, create two buttons with an “onclick” event redirecting to the functions playAudio() and pauseAudio(), respectively.
In the JavaScript part of the code, create a new audio object with the help of the “new” keyword and the “Audio()” constructor, respectively.
After that, define a function named “playAudio()”.
In its definition, it generates an alert to notify the playing of audio.
In the next step, the “src” attribute specifies the audio path.
The “autoplay” property indicates that the audio will play when the function becomes invoked.
“loop” property defines that the audio file will be played till the next action.
Lastly, similarly, declare a function named “pauseAudio()”.
In its definition, display an alert dialogue box referring to a notification before the audio is paused.

Output

The above output indicates that upon clicking the buttons, the audio has been played and paused appropriately.

Conclusion

To play audio in JavaScript, apply the “play()” and “pause()” methods in combination or the “autoplay” property. The former methods can be implemented to play and pause the associated audio file with the help of controls, respectively. The latter approach can be applied to play and pause the audio file as soon as the corresponding functions are invoked. This article discussed the approaches to play audio in JavaScript.

Source: linuxhint.com