HTML5 오디오 루핑

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 베타 1)를 사용하여 테스트하고 있는데, 둘 다 루핑 요청을 무시하고 기뻐하는 것 같습니다. 어떤 아이디어?

업데이트 : 이제 모든 주요 브라우저에서 loop 속성이 지원 됩니다.

---

loop지정된 동안에는 구현되지 않습니다.내가 아는 모든 브라우저 Firefox [이 점을 지적 해 주신 Anurag에게 감사드립니다] . 다음은 HTML5 지원 브라우저에서 작동해야하는 또 다른 루핑 방법입니다.

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

---

@kingjeffrey 및 @CMS의 제안을 결합하여 더 많은 조언을 추가하려면 사용 loop가능한 곳에서 사용하고 그렇지 않은 경우 kingjeffrey의 이벤트 처리기로 대체 할 수 있습니다. 사용하려는 이유 좋은 이유있다 loop으로는 논의 : 자신의 이벤트 핸들러를 작성하지 모질라의 버그 리포트는 하지만, loop현재 내가 알고있는 모든 브라우저에서 (간격)없이 완벽하게 루프를하지 않는가에 가능성이 확실히 가능하고있어, 미래에 표준이됩니다. 자체 이벤트 핸들러는 어떤 브라우저에서도 원활하지 않습니다 (JavaScript 이벤트 루프를 통해 펌프질해야하기 때문에). 따라서 loop자신의 이벤트를 작성하는 대신 가능한 경우 사용 하는 것이 가장 좋습니다 . CMS가 Anurag의 답변에 대한 의견에서 지적했듯이looploop 변수-지원되는 경우 부울 (거짓)이되고, 그렇지 않으면 현재 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();
});

canplaythrough eventlistener에서 loop = true로 설정하면됩니다.

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

---

이벤트 리스너에 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>

그리고 이것은 이렇게 보입니다

---

가장 간단한 방법은 다음과 같습니다.

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

---

이것은 작동하며 위의 방법을 전환하는 것이 훨씬 쉽습니다.

인라인 사용 : 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는 소리의 길이입니다.

참고URL : https://stackoverflow.com/questions/3273552/html5-audio-looping