Home/ Questions/Q 8810227
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T03:04:45+00:00

I am using these sounds for a game, so I am calling on them

  • 0

I am using these sounds for a game, so I am calling on them multiple times throughout the playing process via JQuery. In fireFox the sounds play fine but in Chrome and Safari they only play once each time.

<div class="audio-wrapper">

    <audio id="successSound" preload="auto">
        <source src="sounds/games-sound-fx/cashtill.ogg" type='audio/ogg; codecs="vorbis"'></source>
        <source src="sounds/games-sound-fx/cashtill.mp3" type='audio/mpeg; codecs="mp3"'></source>
    </audio>

    <audio id="failSound" preload="auto">
        <source src="sounds/games-sound-fx/electric.ogg" type='audio/ogg; codecs="vorbis"'></source>
        <source src="sounds/games-sound-fx/electric.mp3" type='audio/mpeg; codecs="mp3"'></source>
    </audio>

    <audio id="moveSound" preload="auto">
        <source src="sounds/games-sound-fx/throw.ogg" type='audio/ogg; codecs="vorbis"'></source>
        <source src="sounds/games-sound-fx/throw.mp3" type='audio/mpeg; codecs="mp3"'></source>
    </audio>

    <audio id="hitSound" preload="auto">
        <source src="sounds/games-sound-fx/hit.ogg" type='audio/ogg; codecs="vorbis"'></source>
        <source src="sounds/games-sound-fx/hit.mp3" type='audio/mpeg; codecs="mp3"'></source>
    </audio>

    <audio id="missSound" preload="auto">
        <source src="sounds/games-sound-fx/miss.ogg" type='audio/ogg; codecs="vorbis"'></source>
        <source src="sounds/games-sound-fx/miss.mp3" type='audio/mpeg; codecs="mp3"'></source>
    </audio>

    <audio id="audio-bg">
        <source src="sounds/games-sound-fx/BGmusic.ogg" type='audio/ogg; codecs="vorbis"'></source>
        <source src="sounds/games-sound-fx/BGmusic.mp3" type='audio/mpeg; codecs="mp3"'></source>
    </audio>
</div>

In the script I call most of my sounds like this..

var successSound = $("#successSound")[0];
successSound.play();

But some of them have timeOut functions on them. Is there a better way to do it that supports all browsers properly?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you are playing a sound, it plays on an audio channel. With the code you listed, when you attempt to play a second sound, it will attempt to play on the same audio channel. If the first sound hasn’t finished at this point, it’ll block the second being played. The trick is to have a bit of Javascript that can tell if an audio element has finished playing & if not, use a different one.

    Here’s a URL with some good example code: http://www.storiesinflight.com/html5/audio.html

    • 0