qjkankan_v1.1.1/packages/qjkankan-view/src/utils/sound.js

import { computed, watchEffect } from 'vue'
import { useStore } from 'vuex'
import { useApp } from '@/app'
import browser from './browser'
import QJKanKan from '@/sdk/QJKanKan'

let CLICKFIRST = false

// const sounds$ = document.createElement('div')
// sounds$.className = 'audios'
// sounds$.style.display = 'none'
// sounds$.style.position = 'absolute'
// sounds$.style.zIndex = -1
// document.body.appendChild(sounds$)

const retryPlay = player => {
    function onclick() {
        $player.removeEventListener('click', onclick)
        $player.removeEventListener('touchstart', onclick)

        //判断是否第一次进入或者是否已点击过
        if (player.pauseFromOther||CLICKFIRST) {
            return
        }
        CLICKFIRST = true
        player.sound.play()
    }
    const $player = document.querySelector('.ui-view-layout')
    $player.addEventListener('click', onclick)
    $player.addEventListener('touchstart', onclick)
}

class AudioPlayer extends QJKanKan.MITT.Emiter {
    constructor(name) {
        super()

        this.isPlay = false
        this.isPause = false
        this.pauseFromOther = false

        this._create = (src, options = {}) => {
            return new Promise((resolve, reject) => {
                this._remove()
                setTimeout(() => {
                    this.sound = new Howl({
                        preload: true,
                        src: [src],
                        loop: options.loop || false,
                        html5: options.html5 || false,
                        onloaderror(id, err) {
                            if (!options.html5) {
                                reject(err)
                            }
                        },
                        onplayerror: function (err) {
                            if (!options.html5) {
                                reject(err)
                            }
                        },
                        onload() {
                            if (!options.html5) {
                                resolve()
                            }
                        },
                        onplay: () => {
                            this.isPlay = true
                            this.isPause = false
                            this.emit('play')
                        },
                        onpause: () => {
                            this.isPause = true
                            this.isPlay = false
                            this.emit('pause')
                        },
                        onend: () => {
                            this.isPause = false
                            this.isPlay = false
                            this.emit('pause')
                        },
                    })
                    if (options.html5) {
                        resolve()
                    }
                }, 50)
            })
        }

        this._remove = () => {
            if (this.sound) {
                if (this.isPlay) {
                    this.sound.stop()
                }
                this.sound.unload()
                this.sound = null
            }
        }
    }
    play() {
        this.sound.play()
    }
    pause(fromOther) {
        if (!this.isPlay) {
            return
        }
        this.sound.pause()
        if (fromOther) {
            this.pauseFromOther = true
        }
    }
    stop() {
        this.sound.stop()
    }
    resume() {
        if (this.pauseFromOther) {
            this.pauseFromOther = false
            if (!this.isPlay) {
                this.play()
            }
        }
    }
    source(src, options = {}) {
        this._init(src, options)
    }
}

class MusicPlayer extends AudioPlayer {
    constructor() {
        super('music')
        const store = useStore()
        const ready = () => {
            if (typeof parent.WeixinJSBridge !== 'undefined') {
                parent.WeixinJSBridge.invoke(
                    'getNetworkType',
                    {},
                    e => {
                        try {
                            if (!player.pauseFromOther) {
                                this.play()
                            }
                        } catch (error) {}

                    },
                    false
                )
            }
        }

        this.isLock = true
        this.watchPlay = (autoplay = null) => {
            if (this.isLock) {
                return
            }

            this._remove()

            const source = computed(() => {
                let music = store.getters['fdkk/fdkkBGM'] || store.getters['scene/musicURL']
                console.log(music, 'musicmusicmusic');
                if (music) {
                    return {
                        src: music,
                        loop: true,
                    }
                }
                return null
            })

            if (source.value && source.value.src) {
                this._create(source.value.src, {
                    loop: source.value.loop,
                    html5: false,
                })
                    .then(() => {
                        // if (browser.detectWeixin()) {
                        //     if (typeof parent.WeixinJSBridge !== 'undefined') {
                        //         ready()
                        //     } else {
                        //         parent.document.addEventListener('WeixinJSBridgeReady', ready)
                        //     }
                        // } else {
                            if (autoplay) {
                                setTimeout(() => {
                                    this.play()
                                }, 50);
                            }
                            else {
                                retryPlay(this)
                            }
                            // ready()
                        // }

                    })
                    .catch(err => {
                        console.error('err', err)
                    })
            } else {
                setTimeout(() => {
                    this._remove()
                }, 50)
            }
        }

        watchEffect(() => this.watchPlay())
    }
}

class SoundPlayer extends AudioPlayer {
    constructor() {
        super('sound')
        const store = useStore()
        const source = computed(() => {
            return store.getters['functions/commentary']
        })

        const ready = () => {
            if (typeof parent.WeixinJSBridge !== 'undefined') {
                parent.WeixinJSBridge.invoke(
                    'getNetworkType',
                    {},
                    e => {
                        this.play()
                    },
                    false
                )
            }
        }

        this.isLock = true
        this.watchPlay = () => {
            if (this.isLock) {
                return
            }
            if (source.value && source.value.src) {
                this._create(source.value.src, {
                    loop: source.value.loop,
                    html5: false,
                })
                    .then(() => {
                        if (source.value.openByDefault) {
                            this.play()
                        }
                    })
                    .catch(err => {
                        console.error('err', err)
                    })
            } else {
                setTimeout(() => {
                    this._remove()
                }, 50)
            }
        }

        // watchEffect(() => this.watchPlay())

    }
}

export function useMusicPlayer() {
    if (useMusicPlayer.player === void 0) {
        useMusicPlayer.player = new MusicPlayer()
        useApp().then(app => {
            useMusicPlayer.player.isLock = false
            useMusicPlayer.player.watchPlay()
        })
    }
    return useMusicPlayer.player
}

export function useSoundPlayer() {
    if (useSoundPlayer.player === void 0) {
        useSoundPlayer.player = new SoundPlayer()
    }
    return useSoundPlayer.player
}

function wxConfig() {
    wx.config({
        // 配置信息, 即使不正确也能使用 wx.ready
        debug: false,
        appId: '',
        timestamp: 1,
        nonceStr: '',
        signature: '',
        jsApiList: [],
    })
}