实现讲解全局播放器

src/components/audio/GlobalAudioPlayerHost.vue

@@ -0,0 +1,82 @@
+<template>
+  <AudioPlayer
+    v-if="isHostVisible"
+    controlled
+    :visible="visible"
+    :audio="currentAudio"
+    :playing="playing"
+    :loading="loading"
+    :playback-error="error"
+    :current-time="currentTime"
+    :duration-value="duration"
+    avoid-bottom-nav
+    @toggle="handleToggle"
+    @close="player.close"
+    @seek="player.seekToPercent"
+    @expand="handleExpand"
+    @update:visible="handleVisibleChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import AudioPlayer from '@/components/audio/AudioPlayer.vue'
+import { useGlobalAudioPlayer } from '@/composables/useGlobalAudioPlayer'
+
+const player = useGlobalAudioPlayer()
+const {
+  currentAudio,
+  currentSource,
+  visible,
+  playing,
+  loading,
+  error,
+  currentTime,
+  duration,
+  activeHostId,
+  hasAudio
+} = player
+const hostId = player.registerHost()
+const isHostVisible = computed(() => (
+  visible.value
+  && hasAudio.value
+  && activeHostId.value === hostId
+))
+
+const handleToggle = () => {
+  if (playing.value) {
+    player.pause()
+    return
+  }
+
+  void player.resume()
+}
+
+const handleVisibleChange = (visible: boolean) => {
+  if (!visible) {
+    player.close()
+  }
+}
+
+const handleExpand = () => {
+  const route = currentSource.value?.detailRoute
+  if (!route) return
+
+  uni.navigateTo({
+    url: route
+  })
+}
+
+onMounted(() => {
+  player.activateHost(hostId)
+})
+
+onShow(() => {
+  player.activateHost(hostId)
+})
+
+onUnmounted(() => {
+  player.unregisterHost(hostId)
+})
+</script>