feat: 启用音频播放

packages/qjkankan-kankan-view/src/components/Tags/show-tag.vue

@@ -16,7 +16,7 @@
     </transition>
     <div class="show-tag move-layer" :style="`transform:translateY(${moveDistance}px);`" :id="`tagBox_${hotData.sid}`">
         <div class="show-content">
-            <div class="share-box" v-if="hotData?.bgm || (controls.showTagshare && !browser.detectApp())">
+            <div class="share-box" v-if="hotData?.bgm">
                 <ui-icon v-if="!showBgm && hotData?.bgm" class="loading-icon" type="_loading_"></ui-icon>
                 <ui-audio v-show="showBgm" @loaded="audioOnLoaded" :muted="!canPlay" v-if="hotData?.bgm" class="audio" ref="audio" :src="common.changeUrl(hotData?.bgm?.src)"></ui-audio>
                 <ui-icon v-if="controls.showTagshare && !browser.detectApp()" type="share" @mousemove="openShare(true)" @mouseleave="openShare(false)"></ui-icon>

packages/qjkankan-kankan-view/src/global_components/components/audio/index.vue

@@ -1,22 +1,68 @@
 <template>
     <div class="ui-audio" @click="clickHandler">
-        <audio loop @play="rotation" ref="audio">
+        <!-- <audio :muted="muted" loop @play="rotation" ref="audio">
             <source :src="src" />
-        </audio>
+        </audio> -->
         <span v-for="random in randoms" :style="{ '--percent': random }" />
     </div>
 </template>
 
 <script setup>
-import { defineProps, ref, watchEffect, defineExpose } from 'vue'
-defineProps({
+import { defineProps, ref, watchEffect, defineExpose, defineEmits, onMounted, reactive, onUnmounted, nextTick } from 'vue'
+const props = defineProps({
     src: String,
+    muted: {
+        type: Boolean,
+        default: false,
+    },
+})
+const emits = defineEmits(['loaded'])
+let timeout
+let isPause = false
+let isPlay = false
+let soundBgm = new Howl({
+    src: [props.src],
+    loop: true,
+    preload: true,
+    // html5: true,
+    html5: false,
+    format: ['mp3', 'wav'],
+    onplay: () => {
+        isPlay = true
+    },
+    onload: () => {
+        emits('loaded')
+        if (detectWeixin()) {
+            // console.log('detectWeixin')
+            if (window.WeixinJSBridge) {
+                window.WeixinJSBridge &&
+                    window.WeixinJSBridge.invoke(
+                        'getNetworkType',
+                        {},
+                        () => {
+                            if (playIng.value && !isPlay && !isPause) {
+                                soundBgm.play()
+                            }
+                        },
+                        false
+                    )
+            } else {
+                if (playIng.value && !isPlay && !isPause) {
+                    soundBgm.play()
+                }
+            }
+        } else {
+            if (playIng.value && !isPlay && !isPause) {
+                soundBgm.play()
+            }
+        }
+    },
 })
-const audio = ref()
+
+const audio = ref(null)
 const randoms = ref([1, 0.5, 1, 0.5])
 const playIng = ref(false)
 
-let timeout
 const rotation = () => {
     if (!playIng.value) return
     for (let i = 0; i < randoms.value.length; i++) {
@@ -26,13 +72,18 @@ const rotation = () => {
 }
 
 watchEffect(() => {
-    if (audio.value) {
+    // if (audio.value) {
+    if (soundBgm) {
         if (playIng.value) {
-            audio.value.play()
+            if (soundBgm._state == 'loaded') {
+                soundBgm.play()
+            }
         } else {
-            audio.value.pause()
+            // audio.value.pause()
+            soundBgm.pause()
         }
         clearTimeout(timeout)
+        timeout = null
         rotation()
     }
 })
@@ -47,8 +98,77 @@ defineExpose({
     },
     pause() {
         playIng.value = false
+        isPause = true
     },
 })
+// 播放音乐
+const audioAutoPlay = () => {
+    soundBgm.on('load', () => {
+        if (window.WeixinJSBridge) {
+            window.WeixinJSBridge &&
+                window.WeixinJSBridge.invoke(
+                    'getNetworkType',
+                    {},
+                    () => {
+                        if (playIng.value && !isPlay && !isPause) {
+                            soundBgm.play()
+                        }
+                    },
+                    false
+                )
+        } else {
+            soundBgm.play()
+        }
+    })
+
+    // if (window.WeixinJSBridge) {
+    //     WeixinJSBridge.invoke(
+    //         'getNetworkType',
+    //         {},
+    //         function (e) {
+    //             if (audio.value) {
+    //                 audio.value.play()
+    //             }
+    //         },
+    //         false
+    //     )
+    // } else {
+    //     document.addEventListener(
+    //         'touchstart',
+    //         function () {
+    //             WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
+    //                 if (audio.value) {
+    //                     audio.value.play()
+    //                 }
+    //             })
+    //         },
+    //         false
+    //     )
+    // }
+}
+const detectWeixin = () => {
+    //微信 包括PC的微信
+    return window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'
+}
+
+onMounted(() => {
+    // console.error('onMounted')
+    // if (detectWeixin()) {
+    //     console.log('detectWeixin')
+    //     audioAutoPlay()
+    // }
+})
+onUnmounted(() => {
+    // console.error('onUnmounted')
+    soundBgm.pause()
+    soundBgm.off()
+    soundBgm.unload()
+    soundBgm = null
+    if (timeout) {
+        clearTimeout(timeout)
+        timeout = null
+    }
+})
 </script>
 
 <script>