javascript - HTML5 音频在某些浏览器中无法工作

Question

我在游戏中使用这些声音，因此我在整个游戏过程中通过 JQuery 多次调用它们。在 fireFox 中，声音播放正常，但在 Chrome 和 Safari 中，每次只播放一次。

<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>

在脚本中，我将大部分声音称为这样..

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

但其中一些有超时功能。有没有更好的方法来正确支持所有浏览器？

Answer 1

当您播放声音时，它会在音频 channel 上播放。使用您列出的代码，当您尝试播放第二个声音时，它将尝试在同一音频 channel 上播放。如果此时第一个声音尚未完成，它将阻止第二个声音的播放。诀窍是使用一些 Javascript 来判断音频元素是否已完成播放，如果没有，则使用不同的元素。

这是一个包含一些很好的示例代码的 URL:http://www.storiesinflight.com/html5/audio.html