需要背景

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）的状况下这两者都是能够自动播放的，由此能够想到，在要求自动播放的状况下，能够抉择静音播放，给用户一个图标标识能够关上声音，体验会更好。