audio的src链接不变、链接的内容改变时怎么能实时更新内容

Question

项目使用vue-cli全家桶搭建的，我在某个页面写了一个音乐播放的标签：

<audio id="audio" autoplay class="hide" :src="audioUrl"></audio>

然后js部分：

playRecord() { //播放录音
    const audio = document.getElementById('audio');
    //this.recorder.play(audio);
    audio.src = this.GLOBAL.pro1_r_ip + '/sr/tmp/cache_readingcut.wav';
    audio.load();
},
uploadAudio() { //上传录音
    this.stopRecord();
    const record = this.recorder.getBlob();
    const t = this;
    let data;
    let reader = new window.FileReader();
    reader.readAsDataURL(record);
    reader.onloadend = function () {
        data = reader.result;
        t.$axios.post(t.GLOBAL.pro1_ip + '/readingcutupload', {
            file: data
        }).then(res => {
            if (res.data.result === 1) {
                t.success('上传成功！');
            } else {
                t.error(res.data.msg);
            }
        })
    };
}

然后问题来了：

我做的是一个网页录音的功能，用户录音后，前端这里把音频文件传给后端，然后后端存进服务器，然后返给我一个所存放地址的链接，我直接播放那个链接里面的音频文件。

现在后端给了一个固定的存放地址，但是里面的内容是会实时刷新的，我传了一个新的音频里面就会刷新成新上传的音频文件，但是我用audio每次重新录音后 读取那个链接的音频，在线用耳机听的话都是同一个音频，并没有实时更新，但是下载下来测试了一下真实的音频文件确实是实时更新的。试了两个办法：

一个是.load()方法重载audio，但是没效果
第二个是每次重新录音时，删掉audio标签，然后录音完成再重新插入一个新的audio标签，但是也没有效果

想请教各位有没有好的解决办法？

----------------------分割线-------------------------
我怕我讲的太繁琐了有点难理解，如果简单粗暴的讲就是，audio的src用的是同一个链接，但是链接里面的音乐是动态改变的，但是网页上用耳机听一直都是同一首，怎么解决这个问题？

Answer 1

感觉是缓存问题。
既然是用audio的src自动发送get请求，无法设置no-cache请求头，那就用动态参数来防止缓存。
比如你链接是https://www.aaa.com/bbb/ccc

那就每次需要获取时候加个不同的参数就行了，https://www.aaa.com/bbb/ccc?r...
可以随机数，可以递增，只要不同就行了。

Answer 2

楼上说的对，每次在src后面加个随机数就可以了，例如时间戳/sr/tmp/cache_readingcut.wav?t=${new Date().getTime()}

Answer 3

楼上说的都对，也可以考虑直接把这个节点remove掉，再append进去。

Answer 4

其实就是缓存啦，audio的内容被浏览器缓存了。url不改变的情况下，不重新下载，以节省带宽。可以加hasc值来解决，你可以给加一个计算属性来自动添加时间戳，比如：

html:
<audio id="audio" autoplay class="hide" :src="url"></audio>

js:
computed: {
  url() {
    return this.audioUrl + '?' + new Date().getTime();
  }
}

Answer 5

链接不变的情况下，缓存了，地址后加时间戳即可