Can I play the same sound more than once at the same time with HTML5?

HTML5 Web Development Front End Technology

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>