audio 标签动态src 且src是http无法播放问题

小吴头大2023-11-01 8:36

javascript 复制代码

 <audio
          ref="audio" 
          :src="src"
          alt="加载失败"
          controls
        />

src是动态传参的

无法播放因为动态src需要在赋值后对audio进行重载

javascript 复制代码

this.$refs.audio.load()

注意如果，src跟本项目地址IP端口协议不同，会出现跨域问题。audio标签本身是允许跨域的资源的，但是如果src资源本身所在服务不允许跨域就会出现，直接访问文件地址能够播放，但是放到audio里面就无法播放的问题，这个有两个解决方法。

法一：

让资源服务器允许跨域。

法二：

不在audio里面去播放跨域的音频

直接用a标签连接打开新的浏览器页签

javascript 复制代码

  <a  
     :href="src"         
      target="blank"
       style="text-decoration: none;"
            >
              播放
            </a>