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)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容