Forum Discussion

DanLidholm-48cd's avatar
DanLidholm-48cd
Community Member
6 months ago

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

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.

storyline 360
  • SamHill's avatar
    SamHill
    Super Hero
    6 months ago

    Hi Dan, which operating system and browser are you using. I ran on Win11/Chrome latest and couldn't replicate (or don't think I could) the issues you've been experiencing.

    • DanLidholm-48cd's avatar
      DanLidholm-48cd
      Community Member
      6 months ago

      Hi Sam,

      Windows 10/latest Chrome. Interesting that you cannot replicate in W11. I will try it.

      However, looks like Jürgen has the answer below. The dom tree is changing. Will try to adjust the JS to see if it works.

  • Jürgen_Schoene_'s avatar
    Jürgen_Schoene_
    Community Member
    6 months ago

    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

    • DanLidholm-48cd's avatar
      DanLidholm-48cd
      Community Member
      6 months ago

      Hi Jürgen, thank you for your answer. That made it clear. However, I didn't know that it could be change after it was published.

      Great suggestion to use the file name. Could not get ID to work but hopefully your suggestion will do the trick.

      I'll be back.

    • DanLidholm-48cd's avatar
      DanLidholm-48cd
      Community Member
      6 months ago

      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.

  • SamHill's avatar
    SamHill
    Super Hero
    6 months ago

    The elements will be dynamically inserted via JavaScript. It's odd that that would change order, but is definitely possible. The filename would be reliable solution as Jürgen suggests.

  • SamHill's avatar
    SamHill
    Super Hero
    6 months ago

    Thanks for the shout out, but kudos to  Jürgen for digging deeper and solving this one.

    BTW @Dan, really impressive and interesting use of Storyline. I love seeing how people can stretch it's capabilities.

    • DanLidholm-48cd's avatar
      DanLidholm-48cd
      Community Member
      6 months ago

      Thank you so much for the link. Sam. Amazing, I've been trying Java Script to do the same thing but not succeeded. This is an simple and ingenious solution. Really smart.

Related Content