Playing audio via tags in browser embedded mode (via Javascript)

[IDemiurge]

Hello, I'm experimenting with what can be done for a browser text-game with ink and so far the one thing I'm missing is ability to add some audio. I tried a quick hack with modifying main.js but it only got the game to freeze. Here's the basic function (copy-pasted from W3C so I'm pretty sure it should be OK)

function sound(src) {
  this.sound = document.createElement("audio");
  this.sound.src = src;
  this.sound.setAttribute("preload", "auto");
  this.sound.setAttribute("controls", "none");
  this.sound.style.display = "none";
  document.body.appendChild(this.sound);
  this.play = function(){
    this.sound.play();
  }
  this.stop = function(){
    this.sound.pause();
  }
}

And here the tag's usage (put it right next to IMAGE and CLASS tags of course)

if (splitTag && splitTag.property == "SOUND" ) {
                    var sound = new sound(splitTag.val);
            sound.play();
}

I am pretty sure that it hangs on new sound(), I 'debugged' this with adding sound path as a paragraph and it doesn't get beyond that point.

Is there a better way to do it? Or any tips on how to get this JS hack to work? Btw, it could be very nice default addition to main.js I believe! PS I'm pretty new to this tech, sorry if I'm missing something obvious.

[titusvk]

You need more proper understanding of javascript. You need a object with new and not only a function.

[IDemiurge]

Isn't sound an object there as well? How would I need to change this code to make it work?

[Selsynn]

What exactly do you want to achieve. Just reading audio, without being able to pause it? What happens if you need to have more than one elements reading sound at the same time? You can look into some library that may be doing what you want better than just html5 and plain js. It depends of what you need and how you want to achieve it.

Please also provide the link where you found your code snippet, just saying W3C means nothing. JS is a very quickly evolving technology, so a snippet written 3 years ago will not work anymore. Can you also paste your html code if you have any?

And re-reading your first message i am not sure if you really have the function you posted in your js. Can you confirm all the modification you have done? If you have only added the lines at the end of your message, how do you suppose js know what a sound is and how to create one ?

[IDemiurge]

Yes I don't think that pausing will be necessary, it's just for unique sounds possible voiceover. OK, so here's the source of main sound function - https://www.w3schools.com/graphics/game_sound.asp Is it not just html5 but some library there?

Html code is just the default, I'm embedding via itch. And here's the full main.js I am using: https://pastebin.com/Qwy9Nqcc It's just helper functions and modified copy-paste of a tag handling clause for SOUND.

I'm just surprised that this 'simple' solution doesn't work, of course I could put in some more time to do it with a library but it seems wrong to do so w/o understanding why this failed.

[Selsynn]

1) every time you detect the sound tag => you are creating a sound "object" (that's why I sometimes hate JS and its type-validating, it is a function dammit, not an object) without removing it or reusing it, so your page will be more and more heavy.

2) As you are printing the value, can you give an example of splitTag.val the code is expecting something like an URL. Are you passing the good parameter (the one from your ink file)?

3) I am really dubious about the code on W3School. I think i would go to another lib like HowlerJs if i need it because the documentation is clearer. (https://github.com/goldfire/howler.js)

[Selsynn]

Solutions possible:

• Have all the sounds created at startup and reference it at the loading. Have each of them a unique id. In the ink, just reference this id and do the sounds.play()
• Load the sound via the ink file and have an error message in the console if the audio file is not found. If you never reload the same sound over and over again, you are good with creating it on the fly like you have in your code
• Alter the code to create or load the element audio to not always create it on the fly.

[Selsynn]

Btw this issue should be more on the inkjs repository as it is only js and outside of the reach of the ink project itself https://github.com/y-lohse/inkjs/issues

[lunarcloud]

Be careful with "autoplaying" audio. Google broke the web API a couple years ago to force audio never to work without a "user gesture" kicking it off (to fight noisy ads), which can be finicky and I've had issues with it in the past. I've since almost always just let the browser draw audio controls and have users click the play button themselves.

[titusvk]

Same in IOS, mobile IOS devices don't play sound correctly for game efforts.

Sound works seamlessy only in mobile apps, produced with the latest Cordova and XCODE.