修正讲解音频时长显示
Some checks failed
CI / verify (push) Has been cancelled

- 未加载媒体元数据时默认显示零时长
- 使用音频文件真实媒体时长更新播放器
- 避免使用不准确的接口时长覆盖播放器显示
- 补充音频时长回归测试

Made-with: Proma
This commit is contained in:
lyf
2026-08-31 17:15:27 +08:00
parent 5de005e011
commit 80ac62a5ff
4 changed files with 31 additions and 15 deletions

View File

@@ -74,9 +74,10 @@ const isAutoplayBlocked = (err: unknown) => {
const syncAudioDuration = () => { const syncAudioDuration = () => {
if (!audioElement) return if (!audioElement) return
duration.value = Number.isFinite(audioElement.duration) const mediaDuration = audioElement.duration
? audioElement.duration duration.value = Number.isFinite(mediaDuration) && mediaDuration > 0
: currentAudio.value?.duration || 0 ? mediaDuration
: 0
} }
const ensureAudioElement = () => { const ensureAudioElement = () => {
@@ -180,7 +181,7 @@ const stopPlayback = () => {
loading.value = false loading.value = false
pendingLanguage.value = '' pendingLanguage.value = ''
currentTime.value = 0 currentTime.value = 0
duration.value = currentAudio.value?.duration || 0 duration.value = 0
} }
const updateDetailRouteLanguage = (route: string | undefined, lang: AudioLanguage) => { const updateDetailRouteLanguage = (route: string | undefined, lang: AudioLanguage) => {
@@ -217,7 +218,7 @@ const prepare = (audio: AudioItem, options: GlobalAudioPlayOptions = {}) => {
loading.value = false loading.value = false
error.value = audio.audioUrl ? '' : '当前语言暂无语音讲解' error.value = audio.audioUrl ? '' : '当前语言暂无语音讲解'
currentTime.value = 0 currentTime.value = 0
duration.value = audio.duration || 0 duration.value = 0
if (audio.audioUrl) { if (audio.audioUrl) {
const element = ensureAudioElement() const element = ensureAudioElement()
@@ -271,7 +272,7 @@ const play = async (audio: AudioItem, options: GlobalAudioPlayOptions = {}) => {
if (isNewAudio) { if (isNewAudio) {
currentTime.value = 0 currentTime.value = 0
duration.value = audio.duration || 0 duration.value = 0
} }
if (element.getAttribute('src') !== audio.audioUrl) { if (element.getAttribute('src') !== audio.audioUrl) {

View File

@@ -374,14 +374,9 @@ const formatDetailAudioTime = (seconds?: number) => {
return `${minutes}:${remainSeconds.toString().padStart(2, '0')}` return `${minutes}:${remainSeconds.toString().padStart(2, '0')}`
} }
const detailAudioDurationSeconds = computed(() => { const detailAudioDurationSeconds = computed(() => (
if (!isCurrentDetailAudioTarget.value) return exhibit.value.audio.duration || 0 isCurrentDetailAudioTarget.value ? globalAudioPlayer.duration.value : 0
))
return globalAudioPlayer.duration.value
|| globalAudioPlayer.currentAudio.value?.duration
|| exhibit.value.audio.duration
|| 0
})
const detailAudioCurrentSeconds = computed(() => ( const detailAudioCurrentSeconds = computed(() => (
isCurrentDetailAudioTarget.value ? globalAudioPlayer.currentTime.value : 0 isCurrentDetailAudioTarget.value ? globalAudioPlayer.currentTime.value : 0
)) ))

View File

@@ -172,7 +172,7 @@ describe('讲解详情音频优先布局', () => {
expect(wrapper.get('.content-section').classes()).toContain('is-english') expect(wrapper.get('.content-section').classes()).toContain('is-english')
expect(wrapper.find('.section-title').exists()).toBe(false) expect(wrapper.find('.section-title').exists()).toBe(false)
expect(wrapper.get('.section-text').text()).toContain('detailed English narration') expect(wrapper.get('.section-text').text()).toContain('detailed English narration')
expect(wrapper.get('.detail-audio-time').text()).toBe('0:00 / 1:21') expect(wrapper.get('.detail-audio-time').text()).toBe('0:00 / 0:00')
expect(wrapper.get('.detail-audio-speed').attributes('aria-label')).toBe('播放速度 1.0倍') expect(wrapper.get('.detail-audio-speed').attributes('aria-label')).toBe('播放速度 1.0倍')
}) })

View File

@@ -20,6 +20,26 @@ describe('全局讲解播放器语言切换', () => {
vi.unstubAllGlobals() vi.unstubAllGlobals()
}) })
it('媒体元数据加载前忽略接口时长,加载后使用音频真实时长', () => {
const audio = document.createElement('audio')
vi.spyOn(window, 'Audio').mockImplementation(() => audio)
player.prepare({
id: 'duration-audio',
name: '时长测试',
audioUrl: '/museum-assets/audio/duration.mp3',
duration: 28,
language: 'zh-CN'
})
expect(player.duration.value).toBe(0)
Object.defineProperty(audio, 'duration', { configurable: true, value: 54.974938 })
audio.dispatchEvent(new Event('loadedmetadata'))
expect(player.duration.value).toBeCloseTo(54.974938)
})
it('切换到粤语时只从当前统一详情的音轨数组选择,不产生额外 HTTP 请求', async () => { it('切换到粤语时只从当前统一详情的音轨数组选择,不产生额外 HTTP 请求', async () => {
const request = vi.fn() const request = vi.fn()
vi.stubGlobal('uni', { request, showToast: vi.fn() }) vi.stubGlobal('uni', { request, showToast: vi.fn() })