In my current effort, here's the sort of command I'm using to make sounds occur...

<audio src="sounds/button_booster.wav" autoplay />

However, if there is ANOTHER sound following this, they play over each other. Is there a way I can get one sound to play and then another? And this has to be in the same section - no splitting across code areas.

Off the top of my head, how about something like…

<audio src="sounds/first_sound.wav" autoplay onended="$('#secondsound').play()" />
<audio src="sounds/second_sound.wav" id="secondsound" />

Well, the problem is I don't know which (if any) second sound will be played. Essentially this is for my spaceship game, and one example would be engines. If you apply thrust, you get the roar. But then, if you pass the mid-way fuel point, you should then hear "Bingo fuel!".

Or maybe I'll have to check the fuel level before the engine sound.

Of course, there might be a number of different sounds - proximity alerts, ship sightings, etc.

In that case, you could have something like…

    $(document).on('ended canplay', '.sfxqueue', () => $('.sfxqueue').each(
      (i, element) => (element.ended ? $(element).remove() : (element.play() ? false : false))
    ));

in your startup, and then output audio elements like:

<audio src="sounds/first_sound.wav" class="sfxqueue" />
<audio src="sounds/second_sound.wav" class="sfxqueue" />

It sets up an event handler which I think should be fired whenever an audio element with that class either ends, or has buffered enough audio that it can start playing. The event removes all the audio elements that have already finished, and then if there are any left, plays the first. If you're loading a second sound effect when the first is still playing, it will just tell the first to play again, which should have no effect; so the second one will be played when the first ends.

Edit: Added the ugly "false:false" construct, in an attempt to ensure this will work properly on browsers regardless of whether they're using the old or new standard for .play()'s return value.

I gave it a try but might be doing it wrong. It didn't seem to work. I even put a test sound in there to make sure it worked. The test sound worked but the sequential sounds don't.

[[Start]]:

    $(document).on('ended canplay', '.sfxqueue', () => $('.sfxqueue').each(
      (i, element) => (element.ended ? $(element).remove() : (element.play() ? false : false))
    ));

[[next]]

[[next]]:

<these sounds do not play>
<audio src="sounds/button_view.wav" class="sfxqueue" />
<audio src="sounds/button_solar.wav" class="sfxqueue" />

<this one (old style) does>
<audio src="sounds/button_booster.wav" autoplay />

Did sound play?

Apologies if I'm adding this wrong. I'm not sure what I'm doing here.

I was working from theory, so could be my mistake. Is there anything in the console?

Could be worth adding breadcrumbs to display a message when the event is called, check that it's working.
I'll try to find time to take a look tomorrow if I'm not behind on work again.

It's not a big deal - nice to have. Either that or could you give me some sort of timer loop? Hows that work? (that would be the easiest way to gimic this up).