如何强制 HTML5 音频标签重新加载（更改）文件答案

【问题标题】：How to force the HTML5 Audio tag to reload a (changing) file如何强制 HTML5 音频标签重新加载（更改）文件
【发布时间】：2021-12-24 18:32:23
【问题描述】：

我在 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 文件会定期更改。但我的问题是，除非我每次都完全重新加载网站，否则只会播放要生成的 first .wav。如何使（可能）回调函数运行并获取 .wav 的新版本而不是缓存？

编辑：在 iPad 上运行良好 - 我在 Firefox 中遇到了这个问题。

【问题讨论】：

标签： javascript html

【解决方案1】：

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

当网络服务器向浏览器发送文件时，它还会发送一些包含该文件额外详细信息的标头。其中之一是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>

另一种技术是在您的请求中包含“缓存清除”参数。您的网络服务器提供静态文件 - 但您的网络浏览器不知道。据它所知，对/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();        
}

【讨论】：

我赞成，因为我已经从你的回答中学到了一些明智的东西。会尝试回来接受... :)
30 秒后。一切都是肉汁。做得好。（我使用了第二个建议，因为它避免了必须有另一个仔细配置的文件。）
chrome 数据保护程序以某种方式绕过了这一点

【解决方案2】：

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

动态修改源元素及其属性已经插入视频或音频元素将无效。至更改正在播放的内容，只需使用媒体上的 src 属性直接元素

假设你有：

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

修改src：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

在 Vue 3 中，它帮助我使用 preload="none" 并使用 ?[Date.now()] 后缀更改文件 URL，每次音频文件中有更新（更改显示为加载道具）。

?[date12233333] 后缀似乎会欺骗浏览器缓存，并使其再次加载音频文件。

// VUE 3 example
<template>
  <div v-if="!src || loading">
    ... loading
  </div>
  <audio v-else controls preload="none" :src="src" type="audio/mpeg" />
</template>
<script>
import {ref, watch} from "vue";

export default {
  name: "Audio",
  props: {
    loading: {
      type: Boolean,
      required: true,
    },
    src: {
      type: String,
      required: true,
    },
    setup(props) {
      const srcUpdated = ref(null)
      watch(() => props.loading, () => {
        srcUpdated.value = props.src + "?" + Date.now();
      })
      return {
        srcUpdated
      }
    }
  }
}
</script>

【讨论】：