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

vvhl
  • 639

项目使用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用的是同一个链接,但是链接里面的音乐是动态改变的,但是网页上用耳机听一直都是同一首,怎么解决这个问题?

回复
阅读 5.6k
5 个回答

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

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

laoboxie
  • 4
新手上路,请多包涵

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

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

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

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

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

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

宣传栏