先贴代码
// 获取音频时长
getAudioTime = (url: string) => {
const audio = document.createElement('audio')
audio.oncanplay = (e) => {
const audioTime = audio.duration ? Math.ceil(audio.duration) : 0
this.setState({ audioTime, audioCurrentTime: audioTime })
}
audio.onerror = (e) => { console.log(e, '=====') }
audio.src = url
}
这段代码在安卓手机上是没问题的,但是在ios中则会报错
百度一番之后看到如下说明
机翻了一下,大概意思是ios不会主动加载视频
于是尝试手动load
// 获取音频时长
getAudioTime = (url: string) => {
const audio = document.createElement('audio')
audio.oncanplay = (e) => {
const audioTime = audio.duration ? Math.ceil(audio.duration) : 0
this.setState({ audioTime, audioCurrentTime: audioTime })
}
audio.onerror = (e) => { console.log(e, '=====') }
audio.src = url
audio.load();
}
成功!
问题已解决!
并没有,在微信客户端中,ios依然有问题,无法获取时长
需要修改代码
let audio: HTMLAudioElement;
// 获取音频时长
getAudioTime = () => {
audio = document.createElement('audio')
audio.oncanplay = (e) => {
const audioTime = audio.duration ? Math.ceil(audio.duration) : 0
this.setState({ audioTime, audioCurrentTime: audioTime })
}
audio.onerror = (e) => { console.log(e, '=====') }
audio.src = '如果你已经有url'
// 如果在微信客户端中,并且是ios机型,这两个方法需要自己写,我这里就不贴上来了
if (isInWxApp() && isIOS()) {
document.addEventListener("WeixinJSBridgeReady", function() {
audio.play()
}, false);
}
}
// 必须要有用户交互行为(触摸,点击,滑动),然后在事件回调中
() => {
audio.src = "url"
audio.load();
}
用户点击按钮后请求接口,我在接口中给audio赋值url,并进行load,这样便可以得到总时长了