HTML5オーディオループ

最近HTML5オーディオで遊んでいますが、サウンドを再生することはできますが、再生されるのは1回だけです。何をしようとしても（プロパティ、イベントハンドラーの設定など）、ループさせることができないようです。

これが私が使用している基本的なコードです：

//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

Chrome（6.0.466.0 dev）とFirefox（4 beta 1）を使用してテストしていますが、どちらもループのリクエストを無視して満足しているようです。何か案は？

更新：loopプロパティがすべての主要なブラウザでサポートされるようになりました。

一方でloop指定されている、それが実装されていません私が知っているブラウザ Firefox [これを指摘してくれたAnuragに感謝します]。HTML5対応のブラウザで機能するはずのループの代替方法を次に示します。

var myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

@kingjeffreyと@CMSの提案を組み合わせたアドバイスをさらに追加するには：loop利用可能な場所で使用し、利用できない場合はkingjeffreyのイベントハンドラーにフォールバックできます。loop独自のイベントハンドラーを使用せずに作成するのには十分な理由があります。Mozillaのバグレポートで説明されているように、loop現在、私が知っているどのブラウザーでもシームレスに（ギャップなしで）ループしませんが、それは確かに可能であり、将来的には標準になります。独自のイベントハンドラーは、どのブラウザーでもシームレスになることはありません（JavaScriptイベントループを介してポンプする必要があるため）。したがって、loop独自のイベントを作成するのではなく、可能な場合は使用することをお勧めします。CMSがAnuragの回答に対するコメントで指摘したように、looploop 変数-サポートされている場合はブール値（false）になり、サポートされていない場合は現在Firefoxにあるため、未定義になります。

これらをまとめる：

myAudio = new Audio('someSound.ogg'); 
if (typeof myAudio.loop == 'boolean')
{
    myAudio.loop = true;
}
else
{
    myAudio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}
myAudio.play();

あなたのコードはChrome（5.0.375）とSafari（5.0）で動作します。Firefox（3.6）ではループしません。

例を参照してください。

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​

var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3");

audio.addEventListener('canplaythrough', function() {
    this.currentTime = this.duration - 10;
    this.loop = true;
    this.play();
});

canplaythrougheventlistenerでloop = trueを設定するだけです。

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

最も簡単な方法は次のとおりです。

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

イベントリスナーにjQueryを使用してみてください。そうすれば、Firefoxで機能します。

myAudio = new Audio('someSound.ogg');

$(myAudio).bind('ended', function()  {
    myAudio.currentTime = 0;
    myAudio.play();
});

myAudio.play();

そんな感じ。

私はこのようにしました、

<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>

こんな感じです

これは機能し、上記の方法を切り替えるのははるかに簡単です。

インラインで使用： onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

によってループをオンにします。によって$(audio_element).attr('data-loop','1'); ループをオフにします。$(audio_element).removeAttr('data-loop');

サウンドの正確な長さがわかっている場合は、setIntervalを試すことができます。setIntervalにx秒ごとにサウンドを再生させることができます。Xはサウンドの長さになります。