h5页面添加背景音乐

【需求】h5页面添加背景音乐，支持微信、QQ、各种APP。

【实现思路】1、通过audio标签，设置自动播放，是一种方法，但是此方法只适合微信、QQ，并不兼容我司的APP，需要主动触发下播放事件。

　　　　　　2、针对可以自动播放的渠道，通过this.audio.addEventListene监听playing事件，控制小喇叭的状态。

【知识点】audio标签、addEventListener、classList

【代码】封装了一个公共组件：

 <template>
     <div class="music">
         <audio src={{musicsrc}} id="Jaudio" class="media-audio"  preload loop="loop" hidden="false"></audio>
         <div class="icon"></div>
     </div>
 </template>
 <script>
 /* eslint-disable */
     export default{
         data() {
             return {}
         },
         props: {
             musicsrc: {}
         },
         methods: {
              // 音乐背景
             play() {
                 this.audio.play()
                 this.icon.classList.add('play');
                 this.icon.classList.remove('stop');
             },
             stop() {
                 this.audio.pause()
                 this.icon.classList.add('stop');
                 this.icon.classList.remove('play');
             },
             audioAutoPlay() {
                 this.audio.play();
                 var that=this;
                 //控制小喇叭的播放状态
                 this.audio.addEventListener("playing", function(){
                     that.icon.classList.add('play');
                     that.icon.classList.remove('stop');
                 });
                 this.audio.addEventListener("pause", function(){
                     that.icon.classList.add('stop');
                     that.icon.classList.remove('play');
                 });
                 document.addEventListener("WeixinJSBridgeReady", function () {
                     that.audio.play();
                     this.icon.classList.add('play');
                     this.icon.classList.remove('stop');
                 }, false);
                 this.icon.addEventListener("click", () => {
                     if (this.audio.paused) {
                         this.play()
                     } else {
                         this.stop()
                     }
                 }, false);
                 // 触发播放音乐效果，解决浏览器或者APP自动播放问题
                 document.addEventListener("touchstart", () => {
                     if(!this.isPlay) {
                         this.play();
                         this.isPlay = true;
                     }
                 }, false)
             },

         },
         ready() {
             this.audio = window.document.querySelector('.media-audio');
             this.icon = window.document.querySelector('.icon');
             this.audioAutoPlay();
         }
     }
 </script>
 <style  rel="stylesheet/scss" lang="scss">
     .music {
     position:fixed;
     z-index:1000;
     top:50px;
     right:20px;

     .icon{
         width:60px;
         height:50px;
         background:url('https://pic.51zhangdan.com/u51/storage/dd/df9e5296-1fa9-f3c4-6151-afeab9c2f34d.png') no-repeat;
         background-size: 100%;
         &.play{
             animation: 4s linear 0s normal none infinite rotate;
             // animation-fill-mode:forwards;
             // animation-play-state: running;
         }
         &.stop{
             // animation: 4s linear 0s normal none infinite rotate;
             // animation-fill-mode:forwards;
             // animation-play-state: paused;
         }
     }
 }

 @keyframes rotate{
     from{transform:rotate(0deg)}
     to{transform:rotate(360deg)}
 }
 </style>

组件调用：

 <template>
     <bgmusic :musicsrc='musicbg'></bgmusic>
 </template>
 <script>
  import bgmusic from '../../components/music/bgmusic.vue'

  export default {
         data() {
             return {
                 musicbg: "../../assets/music/musicbg.mp3",
             }
         }
 }    

 </script>