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服务器将文件发送到浏览器时，它还会发送一些标题，其中包含有关该文件的额外详细信息。其中一个是the Cache-Control header，它告诉浏览器文件是否可缓存。发送Cache-Control: no-cache标题应该停止浏览器缓存文件，并使后续请求从服务器检索文件。

在Apache上，您可以使用an .htaccess file or a <Directory> rule in your server configuration更改/testsound目录中文件的缓存。将以下内容放入/testsound/.htaccess：

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

另一种技术是包含一个＆＃34;缓存破坏＆＃34;您的请求中的参数。您的网络服务器正在提供静态文件 - 但您的网络浏览器并不知道。据他所知，对/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

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();
         }
     });
}

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

2 个答案: