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();

但是其中一些有onOout函数。有没有更好的方法来支持所有浏览器？

Answer 1

当您播放声音时，它会在音频通道上播放。使用您列出的代码，当您尝试播放第二个声音时，它将尝试在同一音频通道上播放。如果第一个声音此时尚未完成，它将阻止正在播放的第二个声音。诀窍是有一些Javascript可以判断一个音频元素是否已经完成播放＆amp;如果没有，请使用另一个。

以下是包含一些示例代码的网址：http://www.storiesinflight.com/html5/audio.html

HTML5音频在某些浏览器中无效

1 个答案: