web-dev-qa-db-ja.com

HTML5オーディオループ

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

私が使用している基本的なコードは次のとおりです。

//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）を使用してテストしていますが、どちらも私のループ要求を無視して喜んでいます。何か案は？

UPDATE：ループプロパティは、すべての主要なブラウザで サポート になりました。

javascripthtml5html5-audio
73
Toji

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

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

@kingjeffreyと@CMSの提案を組み合わせていくつかのアドバイスを追加するには：loopが利用可能な場合はそれを使用し、利用できない場合はkingjeffreyのイベントハンドラーにフォールバックします。 loopを使用し、独自のイベントハンドラを記述しない理由は十分にあります。 Mozillaバグレポート で説明したように、現在loopはシームレスにループしません（私が知っているどのブラウザでも、ギャップなしで、それは確かに可能であり、将来的に標準になる可能性があります。独自のイベントハンドラーがどのブラウザーでもシームレスになることはありません（JavaScriptイベントループを処理する必要があるため）。したがって、可能な場合は、独自のイベントを作成する代わりに、loopを使用することをお勧めします。 CMSがAnuragの回答に関するコメントで指摘したように、loop変数を照会することでloopのサポートを検出できます。サポートされている場合はブール値（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();
61
mgiuca

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

例を参照

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​
17
Anurag
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();
});

Canplaythroughイベントリスナーでloop = trueに設定するだけです。

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

3
JazzCat

イベントリスナーにjQueryを使用すると、Firefoxで動作します。

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

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

myAudio.play();

そんな感じ。

2
Matt

このようにして

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

こんな感じ

enter image description here

1
Tomarinator

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

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

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

0
Zack

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

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

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

0
WebsterDevelopine