Play/Pause multiple audio tracks along a timeline

The first part of acceptance is admitting there is a problem. :wink: joking!

Seriously though @Jonathan how hard would this realistically take to implement? Is this a feature that would be difficult to add?

Thanks again for paying attention to my little issue and admitting it needs to be tackled in the app.

Aside from never being able to accurately answer that until the feature is complete, and our general policy of not making promises about upcoming features/releases: I think the reason we didn't do this originally was more from a UI side (action menu complexity) than it being a difficult task. It is on the radar :slight_smile:.

2 Likes

Fair enough Jonathan, thanks!

1 Like

Hi Mike!

Didn't forget You - I had a job that was something of a Sisyphean task - but that's done and now on to your request to start/stop multiple audio tracks along a timeline.

Live Demo here.
Hype Project: playPauseMultipleAudio_JHSv3.hype.zip (367.6 KB)

Overview

In the Scene we see several elements (Please see Fig.1 Below for reference):

  1. A red rectangle that rotates, representing animations on the timeline.

  2. Three soundtrack controls, one for each soundtrack in this Demo. It is not necessary to have these soundtrack controls visible. They are in the innerHTML of the rectangle ("rect") called "Audio Tag Holder". You can have multiple audio tags (soundtracks) in one rect. You can simply drag this rect off screen to hide it or remove the "Controls" from the audio tag itself. It would be good to have this rect offscreen in any event to reduce clutter.

  3. A "Start Playing" button, which when clicked, starts the "Main Timeline" and starts the second audio track ("dig-Vondra.mp3" - voiceover) playing by triggering the function "playSnd2". After this button is clicked it disappears to be replaced by the "Pause" button. This "Pause" btn is a toggle that will pause and play the sound tracks. When this "Pause" button is clicked it will place into a list (called an "array") any currently playing sound tracks... a "Play" button then "appears" (same button just the name changes).

At 3 seconds into the "Main Timeline" the "playSnd1" function is triggered via a timeline action which plays audio track 1 ("dig-wind1.mp3" - wind sound effect).

When the "Play" button is clicked all the soundtracks that were placed into the array will start playing from the exact place in each soundtrack as when the "Pause" button was clicked. In this Demo there will be at most two soundtracks triggered. The third soundtrack not used directly but is a "control group" (more on this under "Details" below "Fig.1"

Fig.1
Screen Shot 2021-02-17 at 9.51.35 PM


Details

Inside the rect "Audio Tag Holder" is where, as previously mentioned, the audio tags reside (Please see Fig.2). This is where You can remove the "controls" for an audio track. You will also note each audio tag has the class "voiceOver". This can be changed as desired - but it will need to match the class specified in the function "playPauseAudio" which does most of the work in this Demo (more on this in a bit).

Note: Audio track "CanCan.mp3" was used here as a control. It has the class "voiceOver" but it is not playing anywhere. It was used to test that only audio tracks (class "voiceOver") that were currently playing would be selected. Audio tracks (class "voiceOver") that were not playing would not be selected.

Fig.2
Screen Shot 2021-02-17 at 10.27.26 PM



function "playPauseAudio"

This function does most of the work in this Demo (Please see Fig.3). As You seem unfamiliar with JavaScript I will not write up details here with one important exception (and the reason why I am showing it at all):

In line 5 is where we select all (querySelectorAll) of the audio tags with our desired class ".voiceOver" - note the "dot" in front of ".voiceOver" which is how we indicate class in this JavaScript notation (the audio tag's class notation does not have a dot):

var audios = document.querySelectorAll('.voiceOver');

Fig.3
Screen Shot 2021-02-17 at 11.36.27 PM

You can change this class to another name, just make sure the class in the audio tag agrees with the class in line 5 of this function. There are rules for naming of classes read more about them here.

OR if You wanted to select ALL the audio tags regardless of class You could just use the following in line five of the code:

var audios = document.querySelectorAll('audio');

Note that we are referencing the audio tag here only - no "dot" used (which indicates class).

You do not need to manipulate any other part of this code for things to work as presented in this Demo.

3 Likes

Jim, I can't thank you enough, it works wonderfully!

The only issue I have at this point is that I need to be able to clear the array so that I can continue to use the same JS calls for every slide. So for instance, I have a timeline action to trigger my audio playback, so I'm using the audio id of "slide(xx)". In my first slide that equates to slide01 - slide07.

I named them generically enough that I could reuse those same ids for each slide, and I'm hopefully not needing to make unique audio id's for every single instance throughout the presentation. Is there a way to 'flush out' the array after moving to another scene?

Regardless, it's a solution that works, so thank you!

1 Like

Hi Mike!

Glad You have found the Demo to be of use!

I will be checking in with You here tomorrow afternoon (Monday, 22nd - PST). Briefly - there is already a flush mechanism for the array in place. I will go over the ID scenario with You at that time as well.

2 Likes

Hi Mike!

So let us note here that IDs are unique for a given element on a page. Hype Scenes (in a single Project) are really all on one page. So IDs will have to be unique for every Scene in your project - ditto for individual Layouts which will need unique IDs as well.

Why don't You post here on the Forum a simple sample project with say two Scenes, each with maybe 3 slides and a couple of audios for each slide in the Scene, that is representative of your over all design. This way I can better understand your set-up.

If I can see an example we might be able to come up with an efficient solution. Without a Demo of yours to reference I will be guessing - instead of understanding - your needs (though I have a reasonably good idea).

The Forum has a 3MB upload limit, but a simple Demo should come in under that (small images & short audio tracks). If your images are of a confidential nature You can PM me - or use images/audio tracks that do not have this restriction.

1 Like

Ah very good, thanks for clarifying those points. I was afraid that would be the case, it's good to know my assumptions were correct on this.

I'd be happy to throw something together when I have a moment to spare, right now we're trying to wrap up a few things so that has most of my attention, but if you think there might be a more optimal way to accomplish what I'm trying to do I'm all for it.

Thanks again for all your help Jim, I'll be sure to hit up this thread again soon!

1 Like

Howler works really nicely, even for not very capable coders like me. I've named six sounds in my head HTML and then play or pause them using this toggle code - 'fraid I've forgotten who posted it here:
return sound1.playing() ? sound1.pause() : sound1.play();

My problem is pausing the other five sounds in an efficient way.

I currently do it like this but it slows things down when running from a browser:

sound2.pause()
sound3.pause()
sound4.pause()
sound5.pause()
sound6.pause()

anybody got a better solution ?

1 Like

Iā€™m using Wad.js
This is a very nice library. It has the capability of stop all sounds at once. Wad.stopAll()
Also you can play sounds after each other. Like a musical scale. Check it out.

2 Likes

Thanks for the player Howler tip, I used it to create a player for mobile devices. Here's my example: http://intaplink.ru/player/. I made two in one and audio and radio player

2 Likes

Hi,
thanks for all the infos. I'm overloaded and lost in space (javascript).
Could you give me a very simple instruction please?
I need a javascript-function to pause an audio-file. And a second to play it from this point again.
Sure the answer was given here already, but I'm an absolute beginner in javascript.
At the moment the audio file is playing from a timeline-Point (not the main timeline). And there I have two areas with visual buttons (pause + play). For these both areas I need the functions.

Is it possible to pause the audio-file or in this case all audio-files with the script of Jonathan?:
image

... and to start at the point again (with the same function, but with "play" and another Audio-Tag-Name instead)? Sorry for my poor knowledge in Javascript.

image

You can use that script to pause all audio. In order for it to work, you must first uncheck Use low latency Web Audio API in the Document Inspector. Otherwise it will not create the audio tags it is looking for.

This can likewise be used (as long as low latency web audio api is unchecked), but I see you changed the document.getElementsByTagName('audio') to have 'LP02_VO_WAIP'. This is incorrect; it is looking for a tag name (not an ID or anything), so it must still have 'audio' in there.

If you want to play/pause a specific file, you could do so with code like:

var audioElements = document.getElementsByTagName('audio');
for(var i = 0; i < audioElements.length; i++) {
    try {
        if(audioElements[i].innerHTML.indexOf('YOURFILENAME.mp3') != -1) {
            audioElements[i].pause(); // or use .play(); here
        }
    } catch (e) { }
}

(change 'YOURFILENAME.mp3' accordingly)

Great. So helpful. Thanks, Jonathan. :grinning:

It would be a great thing if someone wants to program an audio timeline for Hype (similar to After effects). Would anyone like to do it? :thinking: :kissing: :grin:

1 Like