Potential Audio Fix

[gratefuljamhead]

So, I have been chasing down an error trying to get the audio functionality to work, and I think I found a solution. I won't attempt to proposed a real solution as I am sure there is a more elegant way to do this, but here is what I am running into:

Here is audio file list:
settings.soundFiles = [ 'enginehum', ]

This is a .mp3 stored in the default folder (assets/audio). Then I call ambient in the room I want it to play in triggered by on enter:

    //#region Room|Port Engine Bay
    createRoom("z1r1", {
    alias:'Port Engine Bay',
    desc:"The room is dominated by a large rocket motor and an ion motor. Fuel and liquid oxygen lines run to the rocket motor. Tanks of xenon gas are bolted to the walls in racks as fuel for the ion motors used in interplanetary travel",
    
    afterEnter:function(){
     ambient('enginehum.mp3', 6)
    },

    afterExit:function(){
     ambient()
    },

The audio tag gets created as expected from the list load in _settings.js. I did have to correct "audio.seAttribute" to "audio.setAttribute" to even get the tags created:

      // This is currently untested !!!!
      if (settings.soundFiles) {
        const main = document.querySelector('#main')
        for (let el of settings.soundFiles) {
          const audio = document.createElement('audio')
          audio.setAttribute('id', el)
          audio.setAttribute('src',settings.soundsFolder + el + settings.soundsFileExt)
          main.appendChild(audio)
        }
        settings.performanceLog('Audio loaded')
      }

<audio id="enginehum" src="assets/audio/enginehum.mp3" loop=""></audio>

However, the issue comes when we start processing afterEnter in the ambient function:

function ambient(filename, volume) {
  //console.log(settings.ssFolder)
  _msg('Your browser does not support the <code>audio</code> element.', {}, {action:'ambient', name:filename, volume:volume})
}`

We pass in the file name which becomes the name attribute in the data object when being sent to the output queue:
(~ line 943 in _io.js)

 if (data.action === 'ambient') {
    for (let el of document.getElementsByTagName('audio')) el.pause()
    if (!settings.silent && data.name) {
      const el = document.getElementById(data.name)
      el.currentTime = 0
      el.loop = true
      el.play()
      if (data.volume) el.volume = data.volume / 10
    }
  }

When trying to set the audio element attributes, currenttime, loop, and then call play, since the audio tag is constructed with the list element name (in this case "enginehum") as populated from the settings.SoundFiles, we get a null ref when set the current time and other properties, because the data.name is actually the file name and not the list item name provided in settings.js (which is the true id for the audio element/tag.

data.name is actually "enginehum.mp3" while the audio tag built earlier has an id = "enginehum"

I was able to work around this using:

const el = document.getElementById(data.name.replace(".mp3", ''))

So a couple of considerations. We could add another param to the ambient call something like:

function ambient(filename, volume, itemid) {
  //console.log(settings.ssFolder)
  _msg('Your browser does not support the <code>audio</code> element.', {}, {action:'ambient', name:filename, volume:volume, id:itemid})
}

Then update the ambient output processor case to use the id property:

const el = document.getElementById(data.id)

We also just force the user to include the extension in the sound file list, which would set the id to the file name and bypass the whole issue.

I dunno, just some post debug ramblings. I hope this makes sense and I apologize for any misused terms here, just wanted to save someone else some grief, and if the comment in _settings.js is correct, consider it now tested!