如何强制HTML5 Audio标记重新加载（更改）文件 [英] How to force the HTML5 Audio tag to reload a (changing) file

问题描述

 <$ c在javascript中有一段代码生成一个wav文件，然后将其附加到一个按钮中，以便可以播放它$ c> function makeWav（）{
 $ .get（（../ testsound / getsound.pl？text =+ document.myform.outputtext.value））; 
 setTimeout（callback，500）; 
返回false; 
} 
函数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中遇到这个问题。

解决方案

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

当Web服务器向浏览器发送文件时，它还会发送一些包含该文件额外详细信息的标题。其中之一是 Cache-Control 标题，告诉浏览器文件是否可缓存。发送一个 Cache-Control：no-cache header 应该停止浏览器对文件进行缓存，并使随后的请求从服务器上检索文件。 p>

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

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

---

另一种技术是包含cache-busting 请求中的参数。您的Web服务器正在提供静态文件 - 但您的Web浏览器不知道。众所周知，对 /testsound/hope.wav?cb=foo 的请求可能会返回完全不同的文件到 / testsound / hope.wav？CB =栏。因此，如果您的网络请求中包含始终更改的参数，浏览器将无法在其缓存中找到它，并且它将检索新文件。时间戳是一个不错的选择：

  function callback（）{
 var url =http：// www。 joereddington.com/testsound/hope.wav?cb=+ new Date（）。getTime（）; 
 var audio = new Audio（url）; 
 audio.load（）; 
 audio.play（）; 
} 
  

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:

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?

EDIT: Works fine on the iPad - I'm having this problem in firefox.

解决方案

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.

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-Control header, which tells the browser if the file is cacheable. Sending a Cache-Control: no-cache header should stop browsers caching the file, and make subsequent requests retrieve the file from your server.

On Apache, you can use an .htaccess file or a <Directory> rule in your server configuration to change the caching for files in the /testsound directory. Put the following in /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=foo could 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:

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

这篇关于如何强制HTML5 Audio标记重新加载（更改）文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！