优化讲解详情播放器体验

src/composables/useGlobalAudioPlayer.ts

@@ -41,6 +41,10 @@ const pendingLanguage = ref<AudioLanguage | ''>('')
 const activeHostId = ref('')
 const lastClosedSource = ref<GlobalAudioSource | null>(null)
 const closeVersion = ref(0)
+const playbackRate = ref(1)
+const muted = ref(false)
+
+const PLAYBACK_RATES = [1, 1.25, 1.5, 2] as const
 
 let audioElement: HTMLAudioElement | null = null
 let retryOnError: GlobalAudioRetryHandler | null = null
@@ -74,11 +78,17 @@ const syncAudioDuration = () => {
     : currentAudio.value?.duration || 0
 }
 
+const applyAudioPreferences = (audio: HTMLAudioElement) => {
+  audio.playbackRate = playbackRate.value
+  audio.muted = muted.value
+}
+
 const ensureAudioElement = () => {
   if (audioElement || typeof window === 'undefined' || !window.Audio) return audioElement
 
   const audio = new window.Audio()
   audio.preload = 'metadata'
+  applyAudioPreferences(audio)
   audio.addEventListener('loadedmetadata', syncAudioDuration)
   audio.addEventListener('play', () => {
     playing.value = true
@@ -124,6 +134,11 @@ const resetState = () => {
   duration.value = 0
   displayMode.value = 'mini'
   pendingLanguage.value = ''
+  playbackRate.value = 1
+  muted.value = false
+  if (audioElement) {
+    applyAudioPreferences(audioElement)
+  }
   retryOnError = null
   retrying = false
   retryUsed = false
@@ -227,6 +242,7 @@ const play = async (audio: AudioItem, options: GlobalAudioPlayOptions = {}) => {
     element.src = audio.audioUrl
     element.load()
   }
+  applyAudioPreferences(element)
 
   try {
     await element.play()
@@ -448,6 +464,22 @@ const seekToPercent = (percent: number) => {
   currentTime.value = targetTime
 }
 
+const cyclePlaybackRate = () => {
+  const currentIndex = PLAYBACK_RATES.indexOf(playbackRate.value as typeof PLAYBACK_RATES[number])
+  const nextIndex = currentIndex >= 0 ? (currentIndex + 1) % PLAYBACK_RATES.length : 0
+  playbackRate.value = PLAYBACK_RATES[nextIndex]
+  if (audioElement) {
+    audioElement.playbackRate = playbackRate.value
+  }
+}
+
+const toggleMuted = () => {
+  muted.value = !muted.value
+  if (audioElement) {
+    audioElement.muted = muted.value
+  }
+}
+
 const registerHost = () => {
   hostSequence += 1
   const hostId = `global-audio-host-${hostSequence}`
@@ -490,6 +522,8 @@ export const useGlobalAudioPlayer = () => ({
   activeHostId,
   lastClosedSource,
   closeVersion,
+  playbackRate,
+  muted,
   hasAudio: computed(() => Boolean(currentAudio.value)),
   play,
   pause,
@@ -502,6 +536,8 @@ export const useGlobalAudioPlayer = () => ({
   handleEnded,
   handleError,
   seekToPercent,
+  cyclePlaybackRate,
+  toggleMuted,
   registerHost,
   activateHost,
   unregisterHost,

src/pages/exhibit/detail.vue

@@ -104,6 +104,30 @@
             <text class="detail-audio-title">{{ audioDockTitle }}</text>
             <text class="detail-audio-subtitle">{{ audioDockSubtitle }}</text>
           </view>
+          <button
+            v-if="audioDockState === 'playable'"
+            class="detail-audio-rate"
+            :aria-label="`切换播放速率，当前${detailPlaybackRateLabel}倍`"
+            @tap.stop="handleCyclePlaybackRate"
+          >
+            <text>{{ detailPlaybackRateLabel }}</text>
+          </button>
+          <button
+            v-if="audioDockState === 'playable'"
+            class="detail-audio-mute"
+            :class="{ muted: globalAudioPlayer.muted.value }"
+            :aria-label="detailAudioMuteActionLabel"
+            @tap.stop="handleToggleMuted"
+          >
+            <svg v-if="globalAudioPlayer.muted.value" width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M4 10H8L13 6V18L8 14H4V10Z" fill="currentColor"/>
+              <path d="M16 9L21 15M21 9L16 15" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
+            </svg>
+            <svg v-else width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path d="M4 10H8L13 6V18L8 14H4V10Z" fill="currentColor"/>
+              <path d="M16 9C17.25 10.3 17.25 13.7 16 15M18.5 6.5C21.6 9.7 21.6 14.3 18.5 17.5" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
+            </svg>
+          </button>
           <button
             v-if="audioDockState === 'failed'"
             class="detail-audio-retry"
@@ -230,13 +254,13 @@ const languageOptionDefinitions: Array<{
     value: 'zh-CN',
     label: '中文'
   },
-  {
-    value: 'yue-HK',
-    label: '粤语'
-  },
   {
     value: 'en-US',
     label: 'English'
+  },
+  {
+    value: 'yue-HK',
+    label: '粤语'
   }
 ]
 
@@ -340,16 +364,27 @@ const detailAudioCurrentSeconds = computed(() => (
 const detailAudioTimeLabel = computed(() => (
   `${formatDetailAudioTime(detailAudioCurrentSeconds.value)} / ${formatDetailAudioTime(detailAudioDurationSeconds.value)}`
 ))
-const audioDockSubtitle = computed(() => [
-  audioLanguageLabel(selectedAudioLanguage.value),
-  audioDockState.value === 'failed'
-    ? globalAudioPlayer.error.value || '音频暂时无法播放'
-    : audioDockState.value === 'unavailable'
-      ? audioAvailabilityMessage.value
-      : audioDockState.value === 'loading'
-        ? '正在加载音频'
-        : detailAudioTimeLabel.value
-].filter(Boolean).join(' · ') || '讲解')
+const audioDockSubtitle = computed(() => {
+  if (audioDockState.value === 'failed') {
+    return globalAudioPlayer.error.value || '音频暂时无法播放'
+  }
+  if (audioDockState.value === 'unavailable') {
+    return audioAvailabilityMessage.value
+  }
+  if (audioDockState.value === 'loading') {
+    return '正在加载音频'
+  }
+
+  return detailAudioTimeLabel.value
+})
+const detailPlaybackRateLabel = computed(() => (
+  globalAudioPlayer.playbackRate.value === 1
+    ? '1.0'
+    : String(globalAudioPlayer.playbackRate.value)
+))
+const detailAudioMuteActionLabel = computed(() => (
+  globalAudioPlayer.muted.value ? '取消静音' : '静音'
+))
 const detailAudioPlaying = computed(() => (
   isCurrentDetailAudio.value
   && globalAudioPlayer.playing.value
@@ -795,6 +830,14 @@ const handleRetryAudio = async () => {
   await handlePlayAudio({ forceRefresh: true })
 }
 
+const handleCyclePlaybackRate = () => {
+  globalAudioPlayer.cyclePlaybackRate()
+}
+
+const handleToggleMuted = () => {
+  globalAudioPlayer.toggleMuted()
+}
+
 const handleSeekAudio = (event: { detail?: { x?: number }; currentTarget?: { offsetWidth?: number } }) => {
   if (audioDockState.value !== 'playable' || !detailAudioDurationSeconds.value) return
 
@@ -897,33 +940,33 @@ const handleBack = returnToExplainObjectList
 
 .content {
   position: absolute;
-  top: 392px;
+  top: 360px;
   right: 0;
   bottom: 0;
   left: 0;
   height: auto;
   padding: 0;
   box-sizing: border-box;
-  background: #f7f8f3;
+  background: #fafbf8;
 }
 
 .detail-language-bar {
   position: absolute;
-  top: 320px;
+  top: 290px;
   right: 0;
   left: 0;
   z-index: 2;
-  height: 72px;
-  padding: 25px 24px 7px;
+  height: 70px;
+  padding: 22px 24px 12px;
   box-sizing: border-box;
-  background: #f7f8f3;
+  background: #fafbf8;
 }
 
 .immersive-hero {
   position: relative;
   min-height: 0;
-  height: 320px;
-  padding: calc(env(safe-area-inset-top) + 0px) 24px 24px;
+  height: 290px;
+  padding: calc(env(safe-area-inset-top) + 0px) 24px 16px;
   box-sizing: border-box;
   overflow: hidden;
   background: #111a14;
@@ -1004,8 +1047,8 @@ const handleBack = returnToExplainObjectList
 .detail-meta {
   display: block;
   margin-top: 6px;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: 16px;
+  line-height: 22px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.86);
   overflow: hidden;
@@ -1016,10 +1059,10 @@ const handleBack = returnToExplainObjectList
 .detail-chip-row { display: none; }
 
 .detail-content {
-  min-height: calc(100vh - 392px - 72px - env(safe-area-inset-bottom));
-  padding: 24px 24px calc(32px + 72px + env(safe-area-inset-bottom));
+  min-height: calc(100vh - 360px - 66px - env(safe-area-inset-bottom));
+  padding: 12px 24px calc(32px + 66px + env(safe-area-inset-bottom));
   box-sizing: border-box;
-  background: #f7f8f3;
+  background: #fafbf8;
 }
 
 .detail-audio-play {
@@ -1053,21 +1096,21 @@ const handleBack = returnToExplainObjectList
 }
 
 .language-switch {
-  height: 40px;
+  height: 36px;
   margin-top: 0;
   padding: 0;
   display: flex;
   box-sizing: border-box;
   background: transparent;
-  border: 1px solid #d8ddd2;
-  border-radius: 6px;
+  border: 1px solid #d9ddd6;
+  border-radius: 7px;
 }
 
 .language-option {
   position: relative;
   min-width: 0;
   flex: 1;
-  height: 40px;
+  height: 36px;
   padding: 0 6px;
   display: flex;
   align-items: center;
@@ -1076,16 +1119,16 @@ const handleBack = returnToExplainObjectList
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: #5d6659;
+  color: #53615b;
 }
 
 .language-option + .language-option {
-  border-left: 1px solid #d8ddd2;
+  border-left: 1px solid #d9ddd6;
 }
 
 .language-option.active {
-  background: #e8e800;
-  color: #141412;
+  background: #e7ed42;
+  color: #315eb9;
 }
 
 .language-option.active::before {
@@ -1095,7 +1138,7 @@ const handleBack = returnToExplainObjectList
   left: 10px;
   height: 3px;
   content: '';
-  background: #141412;
+  background: #3a65b6;
 }
 
 .language-option.disabled {
@@ -1105,7 +1148,7 @@ const handleBack = returnToExplainObjectList
 .language-option-text {
   display: block;
   max-width: 100%;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 20px;
   font-weight: 700;
   overflow: hidden;
@@ -1121,14 +1164,18 @@ const handleBack = returnToExplainObjectList
 .section-text {
   display: block;
   margin-top: 0;
-  font-size: 16px;
-  line-height: 26px;
-  color: #31392e;
+  font-size: 17px;
+  line-height: 28px;
+  color: #242b26;
   text-indent: 2em;
   word-break: break-word;
   overflow-wrap: anywhere;
 }
 
+.section-text + .section-text {
+  margin-top: 8px;
+}
+
 .section-hint {
   margin-top: 14px;
   font-size: 14px;
@@ -1145,24 +1192,25 @@ const handleBack = returnToExplainObjectList
   bottom: 0;
   left: 0;
   z-index: 10;
-  height: calc(72px + env(safe-area-inset-bottom));
-  padding: 0 24px env(safe-area-inset-bottom);
+  height: calc(66px + env(safe-area-inset-bottom));
+  padding: 0 16px env(safe-area-inset-bottom);
   box-sizing: border-box;
   background: #ffffff;
   border-top: 1px solid #e8e5de;
 }
 
 .detail-audio-dock-main {
-  height: 50px;
-  padding-left: 58px;
+  height: 66px;
+  padding-left: 52px;
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 0;
 }
 
 .detail-audio-main {
   min-width: 0;
-  flex: 1;
+  flex: 0 0 96px;
+  z-index: 1;
 }
 
 .detail-audio-title,
@@ -1174,17 +1222,15 @@ const handleBack = returnToExplainObjectList
 }
 
 .detail-audio-title {
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 500;
-  color: #141412;
+  display: none;
 }
 
 .detail-audio-subtitle {
-  margin-top: 1px;
-  font-size: 12px;
-  line-height: 16px;
-  color: #666661;
+  margin-top: 0;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+  color: #192d83;
 }
 
 .detail-audio-play.disabled {
@@ -1194,12 +1240,20 @@ const handleBack = returnToExplainObjectList
 
 .detail-audio-play {
   position: absolute;
-  top: 14px;
-  left: 19px;
+  top: 13px;
+  left: 16px;
   z-index: 1;
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  flex-basis: 40px;
 }
 
 .detail-audio-retry {
+  position: absolute;
+  top: 17px;
+  right: 16px;
+  z-index: 2;
   height: 32px;
   padding: 0 10px;
   flex-shrink: 0;
@@ -1216,9 +1270,61 @@ const handleBack = returnToExplainObjectList
   border: 0;
 }
 
+.detail-audio-rate,
+.detail-audio-mute {
+  position: absolute;
+  top: 13px;
+  z-index: 2;
+  height: 40px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: #192d83;
+}
+
+.detail-audio-rate {
+  right: 50px;
+  width: 40px;
+}
+
+.detail-audio-rate text {
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 700;
+}
+
+.detail-audio-mute {
+  right: 12px;
+  width: 32px;
+}
+
+.detail-audio-mute.muted {
+  color: #7a807a;
+}
+
+.detail-audio-rate::after,
+.detail-audio-mute::after {
+  border: 0;
+}
+
 .detail-audio-progress-hit {
-  height: 22px;
-  margin: 0 0 0 58px;
+  position: absolute;
+  top: 13px;
+  right: 16px;
+  left: 126px;
+  height: 40px;
+  margin: 0;
   display: flex;
   align-items: center;
 }
@@ -1230,43 +1336,51 @@ const handleBack = returnToExplainObjectList
 .detail-audio-progress {
   position: relative;
   width: 100%;
-  height: 4px;
+  height: 3px;
   overflow: visible;
-  background: #94948f;
-  border-radius: 2px;
+  background: #a4a6a3;
+  border-radius: 999px;
 }
 
 .detail-audio-progress-fill {
   width: 0;
   height: 100%;
-  background: #e0e100;
+  background: #3a65b6;
   border-radius: inherit;
 }
 
 .detail-audio-progress-thumb {
   position: absolute;
   top: 50%;
-  width: 10px;
-  height: 10px;
+  width: 9px;
+  height: 9px;
   border-radius: 50%;
-  background: #141412;
+  background: #3a65b6;
   transform: translate(-50%, -50%);
 }
 
 .detail-audio-progress.is-indeterminate {
-  width: calc(100% - 58px);
-  height: 4px;
-  margin: 8px 0 0 58px;
+  position: absolute;
+  top: 31px;
+  right: 16px;
+  left: 126px;
+  width: auto;
+  height: 3px;
+  margin: 0;
   overflow: hidden;
   background: #deded6;
 }
 
+.detail-audio-dock.is-playable .detail-audio-progress-hit {
+  right: 88px;
+}
+
 .detail-audio-progress.is-indeterminate::after {
   display: block;
   width: 38%;
   height: 100%;
   content: '';
-  background: #e0e100;
+  background: #3a65b6;
   animation: audio-indeterminate 1.1s ease-in-out infinite;
 }
 

tests/unit/ExhibitDetailAudioFirst.spec.ts

@@ -16,7 +16,9 @@ const mocks = vi.hoisted(() => ({
   pause: vi.fn(),
   resume: vi.fn(),
   close: vi.fn(),
-  seekToPercent: vi.fn()
+  seekToPercent: vi.fn(),
+  cyclePlaybackRate: vi.fn(),
+  toggleMuted: vi.fn()
 }))
 
 const audioState = vi.hoisted(() => ({
@@ -26,7 +28,9 @@ const audioState = vi.hoisted(() => ({
   loading: { value: false },
   error: { value: '' },
   currentTime: { value: 0 },
-  duration: { value: 0 }
+  duration: { value: 0 },
+  playbackRate: { value: 1 },
+  muted: { value: false }
 }))
 
 vi.mock('@dcloudio/uni-app', () => ({
@@ -65,7 +69,9 @@ vi.mock('@/composables/useGlobalAudioPlayer', () => ({
     resume: mocks.resume,
     switchLanguage: vi.fn(),
     close: mocks.close,
-    seekToPercent: mocks.seekToPercent
+    seekToPercent: mocks.seekToPercent,
+    cyclePlaybackRate: mocks.cyclePlaybackRate,
+    toggleMuted: mocks.toggleMuted
   })
 }))
 
@@ -111,6 +117,8 @@ describe('讲解详情音频优先布局', () => {
     audioState.error.value = ''
     audioState.currentTime.value = 0
     audioState.duration.value = 0
+    audioState.playbackRate.value = 1
+    audioState.muted.value = false
     mocks.enterExplainDetail.mockResolvedValue(exhibit)
     mocks.selectExplainDetailLanguage.mockImplementation((source, lang) => ({
       ...source,
@@ -157,6 +165,9 @@ describe('讲解详情音频优先布局', () => {
     expect(wrapper.get('.detail-chip').text()).toBe('标准解说')
     expect(wrapper.find('.detail-audio-dock').exists()).toBe(true)
     expect(wrapper.get('.detail-audio-dock').classes()).toContain('is-playable')
+    expect(wrapper.get('.detail-audio-subtitle').text()).toBe('0:00 / 1:21')
+    expect(wrapper.get('.detail-audio-rate').text()).toBe('1.0')
+    expect(wrapper.find('.detail-audio-mute').exists()).toBe(true)
     expect(wrapper.find('.language-switch').text()).toContain('English')
     expect(wrapper.find('.detail-language-bar').exists()).toBe(true)
     expect(wrapper.find('.content .language-switch').exists()).toBe(false)
@@ -165,6 +176,20 @@ describe('讲解详情音频优先布局', () => {
     expect(wrapper.get('.section-text').text()).toContain('detailed English narration')
   })
 
+  it('正常音频底栏可切换播放速率和静音', async () => {
+    const wrapper = mount(ExhibitDetail, {
+      global: { stubs: { GuidePageFrame: GuidePageFrameStub } }
+    })
+
+    await mocks.onLoadHandler?.({ id: exhibit.id, lang: 'en-US', targetType: 'STOP', targetId: 'stop-1' })
+    await flushPromises()
+    await wrapper.get('.detail-audio-rate').trigger('tap')
+    await wrapper.get('.detail-audio-mute').trigger('tap')
+
+    expect(mocks.cyclePlaybackRate).toHaveBeenCalledTimes(1)
+    expect(mocks.toggleMuted).toHaveBeenCalledTimes(1)
+  })
+
   it('仅展示 stop-info 声明支持的语言按钮', async () => {
     mocks.enterExplainDetail.mockResolvedValue({
       ...exhibit,
@@ -276,7 +301,7 @@ describe('讲解详情音频优先布局', () => {
     expect(mocks.loadExplainDetailText).not.toHaveBeenCalled()
     expect(mocks.selectExplainDetailLanguage).toHaveBeenCalledWith(expect.any(Object), 'yue-HK')
     expect(wrapper.get('.section-text').text()).toContain('粤语通道使用普通话文案')
-    expect(wrapper.get('.detail-audio-subtitle').text()).toContain('粤语')
+    expect(wrapper.get('.detail-audio-subtitle').text()).toBe('0:00 / 1:23')
   })
 
   it('无音频时禁用播放按钮并显示原因', async () => {