vue项目动态绑定:src添加本地背景音乐

首先audio标签属性使用:src

<audio class="audio" ref="audio" autoplay :src="soonUrl"></audio>

data中的申明(暂时本地测试用的歌曲),此处的关键点在于要用require的方式去获取本地文件

soonUrl: require("./../../../assets/music/说好的幸福呢_周杰伦.wav"),
soonList: [
        { src: "你的背包_陈奕迅.mp3" },
        { src: "刘德华-忘情水.mp3" },
        { src: "嘀答(吉它版)_侃侃.mp3" },
        { src: "寂寞才说爱 _刘可.mp3" },
        { src: "当我唱起这首歌_小贱.mp3" },
        { src: "梁静茹-勇气.mp3" },
        { src: "等你下课.mp3" },
        { src: "说好的幸福呢_周杰伦.mp3" }
      ]

可以在事件中做随机切换

nextSoon() {
      let random = Math.floor(Math.random() * 6 + 1)
      this.soonUrl = require("./../../../assets/music/" +
        this.soonList[random].src);
    }

以此类推,获取本地的图片文件也是成立的