Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Can I play the same sound more than once at the same time with HTML5?
Suppose you want to make a quiz app. In it, if you click the wrong option, an audio will be played in the background saying “wrong answer”. But if you click two or more options simultaneously which are wrong, you won’t be able to hear the sound as many times wrong answer is clicked at the same time. So, how to resolve this issue.
In this article, you will see if you can play the same sound more than once at the same time with HTML5 or not.
The answer is Yes!!!
There are two methods for doing so.
Let us see what the methods are in our subsequent sections.
Using cloneNode() method
Using this method, we simply need to make copies or clone an audio which we want to repeat.
Example
<html > <head> <title> cloneNode() method </title> </head> <body> <h1> cloneNode() method </h1> <button onclick = “myOperation() “> Options </button> <audio id=”example” controls autoplay> <source src="/example/audio.mp3" type="audio/mpeg"> <source src="/example/audio.ogg" type="audio/ogg"> </audio> <script> function myOperation() { const object = document.getElementById("example"); const copy = object.cloneNode(true); document.body.appendChild(copy); } </script> </body> </html>
On clicking the options button, the audio will be copied and played since you have set the autoplay control. As many times you click the button, that many times the audio will be played simultaneously.
<button> tag is used to add clickable buttons on your HTML page. It has various attributes like type, name, formaction, value, autofocus, form etc.,
Example
<button type = “submit” > Submit </button>
onclick event happens when the user clicks on the element containing that event.
Syntax
In HTML, <element onclick = “myCode” >
In Javascript, object.onclick = myFunction() { code};
Example
<button onclick = “getElementById( ‘example’)” > Example </button>
<audio> tag is used to add audios to your HTML page. It has attributes like id, controls. The controls attribute is used to add audio controls like play, pause, volume. The autoplay attribute is used to play the audio automatically.
The <source> element enables the users to specify the audio source file and the type of audio to be played.
Syntax
<audio id= “ “ controls = “ ”> <source src = “source of audio” type = “ ” > </audio>
Example
<audio id = “example” controls autoplay > <source src = “example.ogg” type = “audio/ogg> </audio>
The cloneNode() method is used to create copies of an HTML element. It copies all their attributes and value.
Syntax
element.cloneNode()
Parameter
true, false
If you want to make copies of the children of element, then keep the parameter as true. Otherwise, set it to false.
Example
<script> const node = document.getElementById (‘ demo’); const clone = node.cloneNode(true); </script>
The appendChild() method enables the user to add an element or a node which becomes the last child of a parent node or element.
In our code, it is used to append the copies of the audio to the document’s body.
Syntax
node.appendChild()
Parameter
the node or element which is to be appended.
Example
Create a <div> element and append it to the document’s body.
<script> let div = document.createElement (“div”); let node = document.createElement( “This is an example”); div.appendChild(node); document.body.appendChild(div); </script>
By preloading multiple versions of sound
Another way to playing a sound multiple time can be by preloading multiple versions of a sound. In this section, let us seek ways to preload multiple versions of sound -
Example
let n = 3; let sounds = []; const sources = [ “audio1.mp3”, “audio2.mp3”, “audio3.mp3”]; for (i = 0; i < n; i ++) sounds.push([]); for (i = 0; i < audioSource.length; i ++) for (j = 0; j < n; j ++) sounds[j].push(new Audio(sources[i])); let play = []; for (i = 0; i < audioSources.length; i ++) play[i] = 0; playSound = function (id, vol) { if (vol <= 1 && vol >= 0) sounds[play[id]][id].volume = vol; else sounds[play[id]][id].volume = 1; sounds[play[id]][id].play(); ++ play[id]; if (play[id] >= n) play[id] = 0; }
Here,
Variable n is declared to specify the number of times you want to repeat the sound.
Variable sounds create an array for all the sounds.
for loop is used to have n different copies of the sound.
The push() method is used to add new items to an array.
Example
const array = [ “this”, “is”, “an”]; array.push( “example”);
The Audio() object creates and returns a new HTML audio.
Syntax
new Audio()
Variable play talks about which version of the sound is played at that moment. For doing this, again we have used the for loop.
playSound is a function in which we tell the browser to play the sounds.
The volume property sets the volume of the audio currently playing.
Syntax
audio.volume = value
Value
it is number which specifies the volume. It must be between 0 to 1.
Example
1 is the highest volume that is, 100% while 0 is the lowest that is, muted.
<script> let div = document.createElement (“div”); let node = document.createElement( “This is an example”); div.appendChild(node); document.body.appendChild(div); </script>
&& is a logical operator. If both the boolean operands are true, then the operator returns true, otherwise false.
Example
<p id = “example”></p> <script> let a= 4; let b = 6; document.getElementById( “example” ).innerHTML= (a < 5 && b > 5) + “<br>” + (a < 5 && b < 5); </script>
++ play[id] is used to specify the browser that after every time sound is played, there will be an increment so that the other version is played.
Conclusion
In this article, there are different methods and approaches to play the same sound more than once at the same time using HTML5 and Javascript.
1K+ Views
