h5实现 音乐播放器功能

<template>
  <div class="nb-header">
      <div class="nb-music" v-show="hasMusic != 0" :style="'backgroundImage: url('+((isXinghaiApp)? bg:'')+')'">
      <!-- audio标签 -->
      <audio ref="audioPlayer" style="opacity: 0;" loop preload id="eventAudio"></audio>
      <!-- 音乐播放/暂停 -->
      <img :src="status ? music : musicStop" alt="" class="music_img" @click="click"/>
      <!--  返回退出 -->
      <img src="@/common/imgs/back@2x.png" alt="" class="back_img" v-if="isXinghaiApp" @click="handleClickBack">
    </div>
  </div>
</template>

import music from '@/common/imgs/music_play@2x.png'; // 音乐播放图片
import musicStop from '@/common/imgs/music_pause@2x.png';  // 音乐暂停图片
import audio from '@/common/bgm.mp3'  // 音乐mp3文件

data() {
	return {
      music,
      musicStop,
      musicEle: undefined,// audio标签
      status: false, // 判断是暂停还是播放，默认是暂停不播放的状态
      isStop:false, // 是否停止		
	}
},
mounted() {
	this.musicEle = document.getElementById('eventAudio')
	// 给audio标签设置值
	this.musicEle.setAttribute('src',audio)  // setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
	// 监听body上的click 有问题
    // document.body.addEventListener('click',function() {
    //   if(_this.status) {
    //    _this.$nextTick(()=>{
    //       document.getElementById('eventAudio').play()
    //    })
    //   }
    // })
}
methods:{
	click() {
		// 根据status状态来判断是播放/暂停
	      if(this.status) {
	        this.pause()
	      }else {
	        this.play()
	      }		
	}，
	// 播放
    play() {
      this.status = true
      this.musicEle.play()
    },
    // 暂停
    pause() {
      this.status = false
      this.musicEle.pause()
    },
    // 因为停止stop()用不起，这里就直接简单粗暴的干掉src
   stop(val) {
       this.status = false
       this.musicEle.setAttribute('src',"")
    }
}

页面效果：