vue播放音频

首先 需要一个音频 如果没有 可以参考
利用qq音乐下载html可播放的音频
在vue项目的src下的assets下 创建文件夹 叫 music
将音频改个英文的名字 例如 我这里叫 HelloMap
然后放进music文件夹下
然后在需要音频的vue组件中 编写代码如下

<template>
  <div>
    <audio ref="audio" :src="musicUrl" autoplay controls="controls"></audio>
  </div>
</template>

<script>
export default {
      
      
  name: 'App',
  data() {
      
      
    return {
      
      
      musicUrl: require('@/assets/music/HelloMap.ogg'),
    };
  },
  mounted() {
      
      
    this.$refs.audio.play();
  },
};
</script>

<style>
</style>

运行项目之后 音频就可以正常播放了

这里需要注意 一定要用require
你如果直接在src上写路径是有问题的 它会找不到资源