如何强制HTML5 Audio标记重新加载(更改)文件

Question

我在javascript中有一些代码生成一个wav文件,然后将它附加到一个按钮,以便它可以播放:

function makeWav(){        
            $.get(("../testsound/getsound.pl?text="+document.myform.outputtext.value));
setTimeout(callback, 500);
            return false;
        }
function callback() {
var audio = new Audio('http://www.joereddington.com/testsound/hope.wav');
audio.load();
audio.play();
           //     $("#player").html("<embed src=http://www.joereddington.com/testsound/hope.wav autostart=true  >");
        }

很明显,hope.wav文件会定期更改.但我的问题是,除非我每次都完全重新加载网站,否则只会生成第一个 .wav.如何使(可能)回调函数去获取.wav的新版本而不是缓存？

编辑:在iPad上工作正常 - 我在Firefox中遇到这个问题.

Answer 1

您无法从JavaScript中直接控制缓存.检索文件是浏览器的责任,这就是您在不同浏览器上获得不同结果的原因.

当Web服务器将文件发送到浏览器时,它还会发送一些标头以及有关该文件的额外详细信息.其中之一是在Cache-Control头部,告诉浏览器如果文件缓存.发送Cache-Control: no-cache标头应该停止浏览器缓存文件,并使后续请求从服务器检索文件.

在Apache上,您可以使用服务器配置中的.htaccess文件或<Directory>规则来更改/testsound目录中文件的缓存.将以下内容放入/testsound/.htaccess:

<ifModule mod_headers.c>
    Header set Cache-Control no-cache
</ifModule>

另一种技术是在请求中包含"缓存清除"参数.您的Web服务器正在提供静态文件 - 但您的Web浏览器不知道这一点.据它所知,请求/testsound/hope.wav?cb=foo可以将完全不同的文件返回给请求/testsound/hope.wav?cb=bar.因此,如果在Web请求中包含一个始终更改的参数,则浏览器将无法在其缓存中找到它,并且它将检索新文件.时间戳是一个不错的选择:

function callback() {
  var url = "http://www.joereddington.com/testsound/hope.wav?cb=" + new Date().getTime();
  var audio = new Audio(url);
  audio.load();
  audio.play();        
}

Answer 2

对于那些尝试更改src源元素属性的人，我找到了此规范说明。

当源元素已插入视频或音频元素时，动态修改源元素及其属性将不起作用。要更改正在播放的内容，只需直接使用媒体元素上的 src 属性即可

假设你有：

<audio>
    <source src='./first-src'/>
</audio>

修改src：

<audio src='./second-src'/>
    <source src='./first-src'/>
</audio>