Play/Pause multiple audio tracks along a timeline

Elements Audio & Video
13

The JavaScript for playing an audio element (myaudioelement) present on the scene is the following:

var myAudio = document.getElementById("myaudioelement");
myAudio.play()

So the above JS function could be run as a function triggered as a Hype Timeline Action, but most browsers will likely say 'user interaction needed'. So the play(); function would ideally happen in response to a click/tap.

You can chain any number of audio elements to play as long as you have the IDs:

var myAudio = document.getElementById("audio"); 
var myAudio2 = document.getElementById("audio2"); 

myAudio.play();
myAudio2.play();

And if you have the IDs, you can also make a toggle, so that each audio element can be set to pause if it's playing, or play if it is paused:

  if (myAudio.paused) { 
    myAudio.play(); 
    } 
  else { 
    myAudio.pause(); 
  }

@JimScott's tip of using document.querySelectorAll('.audio'); is helpful here, since it would handle each audio element with the class 'audio' on the page, instead of needing to know IDs.

Not to complicate things further, but @MaxZieb did some work on abstracting some of the hard parts of custom audio in this extension: Extend Tumult Hype with JavaScript: hypeDocument.extensions - #20 by MaxZieb

1 Like