Using Java Script and multiple audio files playing simultaneously, wrong audio file unmuted when reloading page

Mar 16, 2024

Dan Lidholm
By Dan Lidholm

Hi,

I made a drag & drop production about reverberation where 4 almost identical audio files are playing at the same time. They are synchronized and loops, they never stops except when the paus button is used.

All files except one are muted, using trigger to decide what audio should be unmuted or not.

The big problem

The problem is that the correct audio file is not always unmuted and the problem is a little bit random.

Everything works fine the firs time it's loaded in the web browser but when it is reloaded the wrong audio file can be unmuted. But a few times, now and then, it can mix up the audio files the first time.

The JS should pick up the audio files in the order they are published and it should not be possible for the code to change after publishing. 

I also tried to use the audio ID to point to the correct audio files but I did not get it to work. (var audioElement1 = document.getElementById("29"); etc.)

To spare you the audio introduction, a trigger is temporary added to jump to the drag & drop-part. A small part of the audio may be heard before the jump. 

Red labels about the audio added to the drop zones.

Also, variables values on the top. Not sure if it is possible to show the name on audio file.

Example: https://360.articulate.com/review/content/15e51691-2bf8-416d-bbca-5bcb29a81e47/review

I know there are some gurus here that probably can see what's wrong. I hope you can help me.

10 Replies
Jürgen Schoenemeyer
1 month ago03/25/24 at 6:34 am (UTC)

the order of the audios in the dom tree is not fixed

it can be different at every start

test with firefox, first start

second start

=> different order

so your methode to find the correct audio cannot work

idea:  identify the filenames of the audio

var filename1 = audioElement1.src.split("/").slice(-1)
var filename2 = audioElement2.src.split("/").slice(-1)
var filename3 = audioElement3.src.split("/").slice(-1)
var filename4 = audioElement4.src.split("/").slice(-1)

so you can use the filenames to find the correct audio

Dan Lidholm
1 month ago03/25/24 at 3:26 pm (UTC)

It's working fine now. I made this adjustment to go by file name instead of dom order:

// Find audio elements based on filenames
var audioElement1 = findAudioElement("audio1.mp3");
var audioElement2 = findAudioElement("audio2.mp3"); // Just an example of file name
var audioElement3 = findAudioElement("6D6r7VdJ4SD_44100_160_0.mp3"); // This is more how the file names looks after publishing
var audioElement4 = findAudioElement("6b4wCyNNRLl_44100_160_0.mp3");

// Find audio element based on filename
function findAudioElement(filename) {
    var audioElements = document.querySelectorAll('audio');
    for (var i = 0; i < audioElements.length; i++) {
        var src = audioElements[i].src;
        if (src.includes(filename)) {
            return audioElements[i];
        }
    }
    return null; // If filename is not found
}

This way it is working perfect, in any browser.

Thanks Jürgen!

@Sam Hill, thanks for your input.

Dan Lidholm
1 month ago03/27/24 at 10:24 am (UTC)

Thanks Sam. You know, when the question comes from the customer: Is it possible to do this?
- Yes, it's just a matter of time.

I also made an audio fader test that can fade between two different file. Not 100% tested yet. It could also be used for panning between left & right channel by using two audio files that are panned right or left. https://360.articulate.com/review/content/f57e1c00-ff1d-4a30-b214-25d088ab5cc8/review

And this example (not mine) really stretch the capabilities of Storyline: It would be interesting to know how they solved it: https://youtu.be/HHyRTmlJe-4?si=6UyT259dHA41rN1l

Sign In to Reply