86

最近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プロパティがすべての主要なブラウザでサポートされるようになりました。

4

9 に答える 9

120

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

var myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();
于 2010-07-17T22:47:34.257 に答える
63

@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();
于 2011-06-23T10:54:12.163 に答える
20

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

例を参照してください。

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​
于 2010-07-17T22:53:55.650 に答える
6

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

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();
于 2018-03-29T16:04:01.273 に答える
4 
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

于 2015-04-29T16:14:07.893 に答える
3

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

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

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

myAudio.play();

そんな感じ。

于 2012-03-02T14:14:31.170 に答える
2

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

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

こんな感じです

ここに画像の説明を入力してください

于 2012-06-11T04:04:19.933 に答える
0

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

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

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

于 2013-10-30T21:48:04.270 に答える
0

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

于 2015-03-10T23:47:40.817 に答える