Play/Pause multiple audio tracks along a timeline

Elements Audio & Video
4

Hi Michael!

Checkout this Demo: stopMultipleAudio.hype.zip (235.8 KB)

Just Hype & JavaScript - no external Libraries. I've used two different file types: ".mp4" & ".mp3".

Note: I've included audio controls in this demo for each file for ease of manipulation & visibility on the stage, but obviously not needed in the real production.

Two different approaches to handling a sound file in this Demo:

The ".mp4" has its class ("audio") set in the Hype interface ("Identity Inspector") and the ".mp3" is referenced from a rectangle's innerHTML with the following <audio> tag code:

<audio class="audio" width="400" controls="controls" preload="auto">
	<source src="${resourcesFolderName}/canCan.mp3" type="audio/mpeg">
</audio>

Note the class ("audio") is here set in the tag itself - not in the Hype interface - unlike the ".mp4" file. Also note the ".mp4" file shows up in the Timeline, whereas the ".mp3" file itself does not.

The ".mp4" file also could have had an audio tag set up; just wanted to show alternate set-ups here.

The "Play/Pause" button, which acts as a toggle, will play/pause all audio that has a class of "audio" and uses the following code (function stop_AllAudio):

var audios = document.querySelectorAll('.audio');
	
	if (audios.length != 0){
		for (var i=0; i < audios.length; i++){
			(audios[i].paused) ? audios[i].play() : audios[i].pause();
		}
	}

Note the "querySelectorAll" is selecting by a class named "audio" which we have given to our two sound files... BUT if You were to remove the "dot" before "audio" in the code You would be searching for an <audio> tag instead which would select for the ".mp3" file (no need for a class distinction).

2 Likes