javascript - 数秒ごとに再生されるアニメーションにサウンドを追加する

Question

数秒ごとにアニメーション化されたこのベルが下にあります。

デモ
http://inspectelement.com/demos/css3/bell

コード
http://inspectelement.com/tutorials/ring-a-bell-with-css-keyframe-animations

私が持っているサウンドベルを追加したいのですが、毎回アニメーションの開始時にのみサウンドを再生したいです。

Answer 1

これを試して：

var soundFile = 'sound.wav';
playSound(soundFile);
setInterval(function () {
    playSound(soundFile);
}, 8000);

function playSound(audio) {
    var soundElement = '<audio style="display:none; width: 0px; height: 0px;" id="audioNotifier" src="' + audio + '" controls preload="auto" autobuffer></audio>';
    $('#audioContainer').html(soundElement);
    $('#audioNotifier')[0].play();
}

まず、タイムアウトがあります。8 秒ごとにplaySound関数が呼び出されます。 playSoundオーディオ コンテナに HTML5 オーディオ プレーヤーを設定し、オーディオを再生します。オーディオ コンテナは単なる DOM 要素であり、特別なものではありません。サウンド ファイルへの URL を引数として に渡す必要がありますplaySound。