背景
最近在做h5的重构收尾工作,h5的语音一直有一个问题没能解决:在ios系统下没有触发loadedmetadata事件,导致获取不到语音的总时长duration参数。这次收尾下定决心已定要解决这个问题。
问题原因
在语音的加载过程中会依次发生相应的事件,在电脑的浏览器上调试都没有问题,在ios系统下触发不了loadedmetadata(音频的元数据已加载),就获取不到总时长duration参数。尝试了在语音的其它事件中,也都获取不到。
解决方案
但是发现在语音播放后,会触发loadedmetadata事件,所以做了以下操作:先播放一下语音,并把语音静音,在播放成功之后再马上关闭,就成功触发了loadedmetadata事件获取到了语音的总时长duration参数。代码如下:
// 获取语音的dom
this.audioCurrent= document.getElementById('audioid')
// 设置语音静音
this.audioCurrent.muted = true
// 线播放语音之后立刻关闭
this.audioCurrent.play().then(()=>{
this.audioCurrent.pausse()
})
// 注册loadedmetadata中获取总时长
this.audioCurrent.addEventListener('loadedmetadata',()=>{
const totalTime = this.audioCurrent.duration || 0
})
// 注意在语音播放前把静音关闭(this.audioCurrent.muted = false)