7

我在我的 HTML 文件中使用 HTML5 音频元素。

尝试了很多方法，我只是无法通过 AJAX 替换音频文件，它仍然返回相同的音频文件。

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

所以我记录了一个名为 test.ogg 的新文件，它覆盖了旧文件。我尝试使用 jQuery 并使用$("#audiodiv").html('') 和重新渲染这部分。然后通过获取元素document.getElementbyID，然后使用.play() function.

它返回相同的旧 test.ogg，它已经被新的覆盖。

所以我试图删除缓存，仍然是同样的问题。

唯一可行的方法是删除缓存并关闭浏览器并再次调用页面......

我该如何解决这个问题？

非常感谢您的帮助。

4

4 回答 4

4

如果您不打算更改文件的名称但继续更新它，那么您需要将即时ExpiresHTTP 标头添加到服务器端的响应中。具体如何执行此操作取决于您使用的服务器。常见的包括Apache和IIS。

但是，让浏览器缓存音频并为每个新文件指定不同的名称会更容易，也更好。

于 2012-10-24T00:29:50.597 回答
2

最快和最简单的解决方案是更改文件的名称。这将解决问题。否则，请使用 robertc 的解决方案。就个人而言，我只会更改文件名。

于 2012-10-24T01:43:34.100 回答
2

我使用相同的文件服务器端使用 JS 无缓存技巧，如下所示：

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

设置 Expire、Last-Modified 和 Cache-control 标头对我不起作用，但是将随机数字字符串添加到 src 作为 GET 变量就可以了。

于 2016-01-01T03:54:42.363 回答
0

如果您将<audio>标签放在<iframe>

<iframe>然后在您上传新声音文件的活动期间以 5 秒的延迟刷新。它可能会输出您的新声音文件。

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

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

也许？？？我是新来的。

于 2013-05-30T05:56:14.740 回答