关于前端:ios上loadedmetadata-事件在用户播放时才触发导致audio-duration获取不到的问题

需要背景

H5 页面上一组音频，须要获取每个音频的时长，展现在页面上，尝试应用 Audio 对象，在 canplay 或者 loadedmetadata 事件中，获取 audio.duration

audioList.forEach((audioItem, index) => {let audio = new Audio(audioItem.voiceUrl)
    audio.onloadedmetadata = function () {console.log(audio.duration);
    }
    audio.oncanplay = function () {}
    audio.onerror = function () {console.log('音频加载失败') 
    }
})

问题

在浏览器上是没有什么问题的，能够失常获取，然而在 ios 手机上关上之后，发现只有手动触发了 audio 的 play 事件后，才会打印出 duration

解决办法

因为 ios 对 audio 和 video 的一系列限度，包含提前 load 和自动播放等，audio 的 canpplay，loadedmetadata 等事件只有在用户手动的 play 之后，才会触发，此时能力获取 duration，能够通过设置 audio 为静音，再在用户手动触发 play 之前，用代码触发 play 事件来解决，不过要留神暂停
如下

audioList.forEach((audioItem, index) => {let audio = new Audio(audioItem.voiceUrl)
    audio.muted = true
    audio.play().then(() => audio.pause();)
    audio.addEventListener('loadedmetadata', function () {console.log('音频加载胜利', Math.round(audio.duration))
    })
    audio.muted = false
    audio.oncanplay = function () {}
    audio.onerror = function () {console.log('音频加载失败') 
    }
})

tips

尽管 ios 对 audio 和 video 的播放都有限度，然而在静音（也就是通过设置 muted = true）的状况下这两者都是能够自动播放的，由此能够想到，在要求自动播放的状况下，能够抉择静音播放，给用户一个图标标识能够关上声音，体验会更好。