Vue使用audio动态切换音乐

html

<audio controls="controls"   ref='audio' >
  <source  :src="musicUrl"  type="audio/mpeg">
</audio>
<el-button type="primary" @click="play">播放音乐</el-button>

js

data(){
  return{
    //动态加载需要使用require,否则会将数据转换成字符串类型
    musicUrl: require("./resource/music/回忆的沙漏.mp3") 
  },
  methods:{
    play(){
    var audio=this.$refs.audio
    this.musicUrl=require("./resource/music/知否知否.mp3") 
    //更改src后需要重新加载音乐
    audio.load()
    audio.play()
    }
}

如果不想在html中创建标签,还可以这样写

methods:{
  play(src){
    var audio=new Audio
    this.musicUrl=require("./resource/music/知否知否.mp3") 
    //更改src后需要重新加载音乐
    audio.load()
    audio.play()
}
},

如果想往require里传递变量,可以使用地址拼接的方式
require("/root/"+data)