Tại sao tôi không thể phát âm thanh nhiều lần bằng thẻ âm thanh HTML5?

Question

Đây là cách âm thanh được "lưu trữ":

<audio id = "hammer" src="res/sounds/Building/hammer.wav"></audio> 

Trong trò chơi thực tế (mà tôi sử dụng âm thanh cho), tôi sử dụng để phát âm thanh:

function playSound(soundid) 
    { 
     document.getElementById(soundid).currentTime = 0; 
     document.getElementById(soundid).play(); 
    } 

Nhưng lượt âm thanh chỉ là lần đầu tiên, và không bao giờ một lần nữa! tôi đã cố gắng thiết lập lại "currentTime" trong giao diện điều khiển bằng 0, nhưng tôi theo nghĩa đen có được điều này:

>document.getElementById("hammer").currentTime = 0 
0 
>document.getElementById("hammer").currentTime 
0.340... 

Tại sao điều này xảy ra, làm thế nào để sửa chữa nó?

Answer 1

Xem this slide và ba trang trình bày trước đó là Evan Wallace and Justin Ardini's presentation on html5 game dev.

Đối với tất cả các nguồn lực để thực hiện một số trò chơi tuyệt vời, một phần của cuộc nói chuyện của họ: http://madebyevan.com/gamedevclass/

âm thanh vẫn không hoạt động liên tục trên tất cả các trình duyệt, tính đến ngay bây giờ:

• Một yếu tố phải được tải lại trong Chrome hoặc nó sẽ chỉ phát một lần
• Một phần tử không được tải lại trong Firefox hoặc sẽ có sự chậm trễ

function playSoundEvent() { 
    if (window.chrome) elems[index].load() 
    elems[index].play() 
    index = (index + 1) % elems.length 
} 

Answer 2

Một vài tháng trước khi tôi gặp phải vấn đề tương tự khi phát triển Piano bằng HTML5. Khi một phím được nhấn lặp đi lặp lại, tôi phải dừng lại, tua lại và phát âm thanh trên mỗi lần nhấn phím. Tôi đã sử dụng cùng một mã được viết trong câu hỏi này hoạt động trong Firefox và Safari, nhưng không phải trong Chrome. Trong Chrome nó không phát lại. Cuối cùng tôi đã phải sửa đổi mã để làm cho nó hoạt động. Đã thêm một trình lắng nghe cho sự kiện onseeked, sau đó đặt currentTime = 0 và trong trình xử lý sự kiện được gọi play. Điều này làm việc cho tôi. Tương tự như vậy tôi đã phải chờ đợi sự kiện của một hành động trước khi đưa ra hành động tiếp theo ở nhiều nơi. Đó là một phiên bản cũ của Chrome. Sau đó, tôi phát hiện ra rằng ngay cả một số phiên bản Trình duyệt hỗ trợ Âm thanh, cách thức mỗi trình duyệt hỗ trợ hơi khác nhau. Sự khác biệt này sẽ không hiển thị nếu chúng ta chỉ cần đặt một thẻ âm thanh và phát âm thanh, nhưng sẽ trải nghiệm khi chúng tôi cố gắng kiểm soát âm thanh bằng cách sử dụng Javascript. Dù sao thì tất cả về các phiên bản Trình duyệt cũ hơn, nó tốt hơn nhiều trong tất cả các phiên bản mới nhất. Vì vậy, hãy kiểm tra phiên bản Chrome mới nhất (Ngay cả đàn piano của tôi đã hoạt động trong Chrome 10 mà không cần sửa đổi mã) và liên quan đến định dạng âm thanh, tôi khuyên bạn nên giữ các tệp mp3 và ogg của âm thanh thay vì tệp wav duy nhất.

Answer 3

Gần đây, tôi gặp vấn đề này với html5. Làm việc ở mọi nơi ngoại trừ safari. Sử dụng load() trước khi gọi play() đã giải quyết được sự cố này. Nó cũng giúp đảm bảo rằng hiệu ứng âm thanh không trùng lặp với các nút bấm nặng khi trình xử lý sự kiện kích hoạt âm thanh.

Here what I used 
<audio id="sound-one" preload="auto"> 
    <source src="http://myurl/foo.mp3"></source> 
    <source src="http://myurl/foo.ogg"></source> 
</audio> 


<a href="#" id="navigation-id">click here</a> 



Jquery 
$("#navigation-id") //this attached is to an element on the page 
.mouseover(function() { 
    sound-one.load();        
    sound-one.play(); 
    }); 

Answer 4

Đối với bất kỳ ai ngại trong bài đăng này trong tương lai, thẻ âm thanh thực sự không phải là cách hay để thực hiện âm thanh trò chơi.

Tôi khuyên bạn nên dành thời gian tìm hiểu cách WebAudio API thay thế.