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>