Html5 animation sound associated with a key frame

This is in response to questions by BeLing. I wanted to post it top level because it is important.

In KoolMoves/KoolShow, sound can be associated with a button action (mouse over or mouse click) or with a key frame. Fairly recently, many browsers ignore sound unless it is initiated by a user action like a button click. Sound tied to a key frame no longer works universally.

I investigated under what condition sound can be associated with a key frame. I have attached a simple example.Attachment 75956

In key frame 1, I placed a text button with audio attached to a button click. In the next key frame, I placed simple text to indicate when that key frame is reached and key frame audio should start playing. I attached audio to that key frame.

I run the movie (using FireFox) in two different ways. First I click on the button in key frame 1 and that sound plays. When the movie reaches the next key frame with the sound attached, the other sound plays. That says that sound only needs to be associated with a user action (button click) once and subsequent sound associated with key frames should play.

I edited the html file to remove the auto play in the audio tag aud1 or else the audio plays twice, at the start of the movie and when the key frame is reached.

Next I run the movie without clicking on the sound button in the first frame. When the movie reaches the key frame with the attached sound, there is no sound. That clearly indicates that the button click was essential. You may get different results in different browsers.

There may be tricks to fool the browser so a button click isn't required. It will require more online investigation.

One trick I can think of is to use a button to start the movie and associate with that button a small sound file that has very low volume.

Quote:

---

Originally Posted by Bob Hartzell

One trick I can think of is to use a button to start the movie and associate with that button a small sound file that has very low volume.

---

The best trick is to load ALL the movie sounds with the first button click.
That's what I did here:
https://necromanthus.com/Games/HTML5/slot/firefly/
It works perfect in Chrome and Edge, but out of sync in Firefox.
Again, these days the sound in browsers is buggy.

Hey necromanthus, ALL the sounds seemed connected to buttons. Was there supposed to be music or something else? (And I have no idea what your game is about; but that's beside the point.)

What sound program do you use to adjust your sounds? Mine never seem to line up right. I'm on Edge.

Quote:

---

Originally Posted by BeLing

ALL the sounds seemed connected to buttons.

---

In that case you don't need to preload anything.
This topic is about "sound associated with a key frame".
So in this case you need somehow to preload the sounds before accessing that keyframe, otherwise they won't work.
And the solution is to preload them all with the first button click.
Of course, you will make them "invisible" setting the volume close to ZERO for each one.
The only thing that matters here is to fool the browser.