Làm thế nào để ngăn chặn âm thanh HTML5 từ tải xuống/phát trực tiếp khi tải?

Question

Tôi có trang web một trang liệt kê một bộ sưu tập các trình phát âm thanh HTML5. Vấn đề là trang web đã trở nên chậm chạp vì các trình duyệt sau bắt đầu predownloading nội dung (mp3 và ogg)

Internet Explorer 
Google Chrome 
Firefox 
Safari 
(probably Opera) 

tôi sử dụng mã cơ bản để thực hiện các cầu thủ. Có cách nào tôi có thể ngăn các trình duyệt tải xuống các tệp âm thanh và chỉ hoạt động khi họ nhấp phát không?

<audio controls="controls" height="32" width="300" tabindex="0"> 
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source> 
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source> 
</audio> 

Answer 1

<audio controls="controls" preload="none"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element. 
</audio> 

Note - preload="none" - có thể được sử dụng với Video HTML5 và AUDIO HTML5.

Thuộc tính tải trước được hỗ trợ trong tất cả các trình duyệt chính, ngoại trừ Internet Explorer và Opera.

Answer 2

MSIE vẫn chiếm khoảng 30% lưu lượng truy cập web, vì vậy preload="none" chỉ là một giải pháp một phần. Trong một vài trang nơi tôi có vấn đề này, tôi thêm một kịch bản nhỏ để tiêu đề trang của tôi:

<script type="text/javascript"> 
function addAudio(t) { 
    var l=t.innerHTML.length; 
    var audioName=t.parentElement.id; 
    if(t.children.length==0) { 
    t.innerHTML=t.innerHTML+'&nbsp; &nbsp; <audio controls="controls"><source src="'+ 
     audioName+'.ogg" type="audio/ogg" /><source src="'+ 
     audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>'; 
    } 
} 
</script> 

và sau đó sử dụng DHMTL để tự động thêm thẻ âm thanh, ví dụ:

<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li> 

Điều này là định nghĩa một mục danh sách có chứa một khoảng văn bản. Khi người duyệt các lần nhấp trên văn bản được mở rộng, javascript sẽ kích hoạt và gắn thêm thẻ <audio>. Bạn có thể sử dụng thuộc tính onmouseover để thẻ âm thanh được thêm vào di chuột.

Thêm thuộc tính preload vào mã được tạo nếu bạn muốn. Đây là cách tiếp cận đơn giản, nhưng nếu bạn đang sử dụng jQuery trên trang web của mình, tôi lưu ý rằng điều này cung cấp các lựa chọn thay thế thanh lịch.