H5背景音樂自動播放(兼容微信IOS，進程后台切換自動停止播放，本文例子為Vue寫法)

<template>
    <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio>
    <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')">
        <img :src="playFlag ? playImg : pauseImg" :class="{rotate: playFlag}">
    </div>
</template>
 
export default {

    data() {
        return {
            playFlag: true,
            playImg: require('../../static/play.png'),
            pauseImg: require('../../static/pause.png'),
            clickMusicBtn: false
        }
    },

    mounted() {

        this.audioAutoPlay('bgMusic');

        document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q
            if (this.clickMusicBtn) { // 點擊了關閉音樂按鈕
                if (this.playFlag) {
                    this.audioAutoPlay('bgMusic');
                    this.playFlag = true;
                } else {
                    this.audioPause('bgMusic');
                    this.playFlag = false;
                }

                text.innerHTML = e.hidden;
                if (e.hidden) {  // 網頁被掛起
                    this.audioAutoPlay('bgMusic');
                    this.playFlag = true;
                } else { // 網頁被呼起
                    this.audioPause('bgMusic');
                    this.playFlag = false;
                }
            } else { // 未點擊關閉音樂按鈕
                if (this.playFlag) {
                    this.audioPause('bgMusic');
                    this.playFlag = false;
                } else {
                    this.audioAutoPlay('bgMusic');
                    this.playFlag = true;
                }

                text.innerHTML = e.hidden;
                if (e.hidden) {  // 網頁被掛起
                    this.audioPause('bgMusic');
                    this.playFlag = false;
                } else { // 網頁被呼起
                    this.audioAutoPlay('bgMusic');
                    this.playFlag = true;
                }
            }
        });

    },

methods: {

    bgMusicPlayOrPause(id) {
        this.clickMusicBtn = !this.clickMusicBtn;
        if (this.playFlag) {
            this.audioPause(id);
            this.playFlag = false;
        } else {
            this.audioAutoPlay(id);
            this.playFlag = true;
        }
    },
    audioPause(id) {
        var audio = document.getElementById(id);
        audio.pause();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.pause();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function () {
            audio.pause();
        }, false);
    },
    audioAutoPlay(id) {
        var audio = document.getElementById(id);
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function () {
            audio.play();
        }, false);
    }
 }
}