Vòng lặp âm thanh HTML5

Gần đây, tôi đã chơi với âm thanh HTML5 và mặc dù tôi có thể giúp nó phát âm thanh mà nó chỉ phát một lần. Bất kể tôi thử làm gì (đặt thuộc tính, trình xử lý sự kiện, v.v.), tôi dường như không thể làm cho nó lặp lại.

Đây là mã cơ bản tôi đang sử dụng:

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

Tôi đang thử nghiệm bằng Chrome (6.0.466.0 dev) và Firefox (4 beta 1), cả hai đều có vẻ vui khi bỏ qua yêu cầu lặp lại của tôi. Có ý kiến ​​gì không?

CẬP NHẬT : Thuộc tính vòng lặp hiện được hỗ trợ trong tất cả các trình duyệt chính.

Trong khi loopđược chỉ định, nó không được triển khai trongbất kỳ trình duyệt nào tôi biết Firefox [cảm ơn Anurag đã chỉ ra điều này] . Đây là một cách lặp thay thế sẽ hoạt động trong các trình duyệt hỗ trợ HTML5:

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

Để thêm một số lời khuyên khác kết hợp các đề xuất của @kingjeffrey và @CMS: Bạn có thể sử dụng loopnó ở những nơi có sẵn và quay lại trình xử lý sự kiện của kingjeffrey khi không có. Có một lý do chính đáng khiến bạn muốn sử dụng loopvà không viết trình xử lý sự kiện của riêng mình: Như đã thảo luận trong báo cáo lỗi của Mozilla , mặc dù loophiện tại không lặp lại liền mạch (không có khoảng trống) trong bất kỳ trình duyệt nào mà tôi biết, điều đó chắc chắn là có thể và có khả năng trở thành tiêu chuẩn trong tương lai. Trình xử lý sự kiện của riêng bạn sẽ không bao giờ liền mạch trong bất kỳ trình duyệt nào (vì nó phải chạy vòng qua vòng lặp sự kiện JavaScript). Do đó, tốt nhất bạn nên sử dụng loopnếu có thể thay vì viết sự kiện của riêng bạn. Như CMS đã chỉ ra trong một bình luận về câu trả lời của Anurag,looploop biến - nếu nó được hỗ trợ, nó sẽ là boolean (false), nếu không nó sẽ không được xác định, vì nó hiện đang có trong Firefox.

Kết hợp chúng lại với nhau:

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();

Mã của bạn phù hợp với tôi trên Chrome (5.0.375) và Safari (5.0). Không lặp lại trên Firefox (3.6).

Xem ví dụ.

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();
});

Chỉ cần đặt loop = true trong canplaythrough eventlistener.

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

Cách đơn giản nhất là:

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

Hãy thử sử dụng jQuery cho trình nghe sự kiện, sau đó nó sẽ hoạt động trong Firefox.

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

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

myAudio.play();

Đại loại vậy.

Tôi đã làm theo cách này,

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

và nó trông như thế này

Điều này hoạt động và việc chuyển đổi các phương pháp ở trên dễ dàng hơn rất nhiều:

sử dụng nội tuyến: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

Bật vòng lặp bằng cách $(audio_element).attr('data-loop','1'); Tắt vòng lặp bằng$(audio_element).removeAttr('data-loop');

Bạn có thể thử một setInterval, nếu bạn biết chính xác độ dài của âm thanh. Bạn có thể để setInterval phát âm thanh mỗi x giây. X là độ dài âm thanh của bạn.