Âm thanh HTML5. Thay thế phần tử vẫn là cùng một tệp âm thanh (được lưu trong bộ nhớ cache) cách giải quyết?

Question

Tôi đang sử dụng phần tử Âm thanh HTML5 bên trong tệp HTML của mình.

Thử nhiều phương pháp, tôi không thể quản lý để thay thế tệp âm thanh qua AJAX, nó vẫn trả về cùng một audiofile.

<div id="audiodiv"> 
    <audio id="audioelement"> 
    <source src="test.ogg" type="audio/ogg"> 
    </audio> 
</div> 

Vì vậy, tôi ghi lại tệp mới có tên test.ogg ghi đè tệp cũ. Tôi đã thử sử dụng jQuery và sử dụng $("#audiodiv").html('') và hiển thị lại phần này. Sau đó tìm nạp phần tử qua document.getElementbyID và sau đó sử dụng .play() function.

Nó trả về cùng một test.ogg cũ, đã được ghi đè bởi phiên bản mới.

Vì vậy, tôi đã cố gắng xóa bộ nhớ cache, vẫn là vấn đề tương tự.

Cách duy nhất hoạt động này là xóa bộ nhớ cache và đóng trình duyệt và gọi lại trang ...

Làm cách nào để giải quyết vấn đề này?

Cảm ơn bạn rất nhiều vì đã trợ giúp.

Answer 1

Nếu bạn không thay đổi tên của tệp nhưng tiếp tục cập nhật tệp thì bạn cần thêm ngay các tiêu đề HTTP Expires HTTP vào phản hồi ở phía máy chủ. Chính xác như thế nào bạn làm điều này phụ thuộc vào máy chủ bạn đang sử dụng. Thông thường bao gồm Apache và IIS.

Tuy nhiên, sẽ dễ dàng hơn và cũng có thể là better practice, để cho trình duyệt lưu vào bộ nhớ cache và chỉ cung cấp cho mỗi tệp mới một tên khác.

Answer 2

Giải pháp nhanh nhất và dễ nhất là thay đổi tên của tệp. Điều này sẽ giải quyết vấn đề. Nếu không, hãy đi với giải pháp của robertc. Cá nhân tôi sẽ chỉ thay đổi tên tập tin.

Answer 3

NẾU bạn đặt thẻ <audio> trong một

THEN làm mới với một sự chậm trễ 5 giây trong trường hợp nơi bạn tải lên tập tin âm thanh mới của bạn. Nó có thể xuất ra tập tin âm thanh mới của bạn.

$('#UploadNewSoundButton').click(function(){ 
     //insert code that uploads new sound file 

     setTimeout(function(){ 
      window.frames['iframeWithAudio'].location.reload(); 
     },5000) 
}) 

có thể ??? Tôi là người mới ở đây.

Answer 4

tôi đã sử dụng cùng một phía máy chủ tập tin bằng cách sử dụng JS không lừa bộ nhớ cache như thế này:

var audioPlayer = $('<audio src="/' + mp3FileName + '?noCache=' + Math.floor(Math.random() * 1000000) + '" type="audio/mpeg" autoplay controls></audio>'); 

Thiết lập Hết Hạn, cuối-Modified, và Cache-control tiêu đề không làm việc cho tôi, nhưng thêm một chuỗi ngẫu nhiên của các số để src như một biến GET đã làm các trick.