javascript 如何强制 HTML5 Audio 标签重新加载（更改）文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25821915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force the HTML5 Audio tag to reload a (changing) file
提问by Joe
I have a bit of code in javascript that generates a wav file and then attaches it to a button so it can be played:
我在 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 >");
}
Obviously the hope.wav file changes very regularly. But my problem is that only the first.wav to be generated is played unless I completely reload the site each time. How do I make the (presumably) callback function go and get a new version of the .wav rather than the cache?
很明显，hope.wav 文件经常变化。但我的问题是，除非我每次都完全重新加载站点，否则只会播放要生成的第一个.wav。如何使（大概）回调函数运行并获取 .wav 的新版本而不是缓存？
EDIT: Works fine on the iPad - I'm having this problem in firefox.
编辑：在 iPad 上工作正常 - 我在 Firefox 中遇到了这个问题。
回答by Alex P
You can't directly control the caching from within your JavaScript. Retrieving files is the responsibility of the browser, which is why you're getting different results on different browsers.
您无法直接从 JavaScript 中控制缓存。检索文件是浏览器的责任，这就是为什么您在不同浏览器上获得不同结果的原因。
When a web server sends a file to the browser, it also sends some headers with extra details about that file. One of them is the Cache-Controlheader, which tells the browser if the file is cacheable. Sending a Cache-Control: no-cacheheader shouldstop browsers caching the file, and make subsequent requests retrieve the file from your server.
当 Web 服务器向浏览器发送文件时，它还会发送一些包含有关该文件的额外详细信息的标头。其中之一是在Cache-Control头部，告诉浏览器如果文件缓存。发送Cache-Control: no-cache标头应停止浏览器缓存文件，并使后续请求从您的服务器检索文件。
On Apache, you can use an .htaccessfile or a <Directory>rule in your server configurationto change the caching for files in the /testsounddirectory. Put the following in /testsound/.htaccess:
在 Apache 上，您可以使用服务器配置中的.htaccess文件或<Directory>规则来更改/testsound目录中文件的缓存。将以下内容放入/testsound/.htaccess：
<ifModule mod_headers.c>
Header set Cache-Control no-cache
</ifModule>
Another technique is to include a "cache-busting" parameter in your request. Your web server is serving a static file - but your web browser doesn't know that. For all it knows, a request for /testsound/hope.wav?cb=foocould return a completely different file to a request for /testsound/hope.wav?cb=bar. Thus, if you include an always-changing parameter in your web request, the browser won't find it in its cache and it will retrieve the new file. A timestamp is a good choice:
另一种技术是在您的请求中包含一个“缓存破坏”参数。您的 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();
}
回答by Rama Al-Maliki
function Speech()
{
var fileName = new Date().getTime();
$.ajax({
url: Host + "api/speech",
data: {
'text': $("input[id='searchBox']").val(),
'language': $("input[id='languageChoice']:checked").val(),
'fileName': fileName
},
dataType: "json",
type: "Get",
contentType: "application/json; charset=utf-8",
success: function () {
var audioUrl = Host + '/Assets/Audio/' + fileName + '.mp3';
var audio = new Audio(audioUrl);
audio.load();
audio.play();
}
});
}
