vue插入提示音

音频位置

代码

<template>
	<div>
	    <div v-show="false">
	      <audio id="myMusic" ref="music" preload="auto" loop="loop" src="@/assets/music/du_du.mp3"></audio>
	    </div>
  		<el-button type="primary" @click="clickMusic">播放音乐</el-button>
  		<el-button type="primary" @click="clickStopMusic">暂停音乐</el-button>
	</div>
</template>

<script>
export default {
  components: {}, // import引入的组件需要注入到对象中才能使用
  // 数据
  data() {
    return {
    	myMusic: document.getElementById("myMusic")
    };
  },
  // 计算属性-监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 点击音乐图标
    clickMusic() {
    	this.clickStopMusic() // 先关闭音乐
    	this.myMusic.play() // 播放音乐
    },
    clickStopMusic() {
    	this.myMusic.load()
    }
  },
  beforeCreate() { }, //生命周期 - 创建之前
  created() { },//生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() { }, //生命周期 - 挂载之前
  mounted() { }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>