自定义音乐播放器组件为H5添加背景音乐：
1.创建music.vue组件
<template><div><div @click="changeOn" :class="isOff?'isOff':'isOn'"></div><audio id="audio" :src="require('../../../static/img/music.wav')"></audio></div></template><script>export default {data() {return {isOff:true}},components: {},created(){},mounted() {// 自动播放音乐效果，解决微信自动播放问题document.addEventListener('touchstart',this.audioAutoPlay,false);document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);let oAudio = document.querySelector("#audio");oAudio.onended = function () {//播放完毕，重新循环播放oAudio.load();oAudio.play();}},methods: { changeOn(){let oAudio = document.querySelector("#audio");if(this.isOff){oAudio.play();//开始播放}else{oAudio.pause();//暂停播放 }this.isOff = !this.isOff;},audioAutoPlay() {let audio = document.getElementById('audio');this.isOff = false;audio.play();document.removeEventListener('touchstart',this.audioAutoPlay);}}}</script><style scoped>.isOn{width: 1.3rem;height: 1.3rem;position: fixed;z-index: 2000;top: 10px;right: 10px;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;background: url("../../../static/img/music_on.png") no-repeat;background-size:100%; }@keyframes rotating {from { -webkit-transform: rotate(0) }to { -webkit-transform: rotate(360deg) }}@-webkit-keyframes rotating {from { -webkit-transform: rotate(0) }to { -webkit-transform: rotate(360deg) }}.isOff{width: 1.3rem;height: 1.3rem;position: fixed;z-index: 2000;top: 10px;right: 10px;background: url("../../../static/img/music_off.png") no-repeat;background-size:100%; }</style>
2.在组件中使用：
创建center.vue组件，为项目根组件，在设置路由时作为根目录：
<template><div><router-view/><Music></Music></div></template><script>import Music from '@/components/common/music'//引入Music组件export default {components: {Music},data() {return {}},methods: {},}</script>
3. router/index.js文件的路由设置：
import Center from '@/components/common/center'import Music from '@/components/common/music'import Index from '@/components/index'Vue.use(Router)const router = new Router({routes: [{path: '/',component: Center,redirect: "index",children: [{path: '/index',component: Index,meta: {title: "首页"}}]}]})router.afterEach((to, from) => {document.title = to.meta.title;})export default router
如果觉得《Vue 自定义音乐播放器组件为H5添加背景音乐》对你有帮助，请点赞、收藏，并留下你的观点哦！
