微信 audio 獲取 duration 為 NaN 的解決方法

先加load()

myaudio.load();

myaudio.oncanplay = function () {
    alert(myaudio.duration);
}

load() 方法用於在更改來源或其他設置后對音頻/視頻元素進行更新

 

duration 的值可以在 canplay 事件發生之前的 durationchange 階段中獲取。

 

myaudio.ondurationchange= function () {
    alert(myaudio.duration);
}

 

如果在Vue中：

<template>
　　<audio id="audioPlay" :src="isPlay" @canplay="playing()" @onended="ended()" v-el:audio></audio>
</template>

<script>

export default {
    computed: {
        isPlay() {
            return this.$store.state.audioSrc;
        }
    },
    methods: {
        playing() {
            console.log('audio paly');
       },
        ended() {
            console.log('audio end');
        }
    },
}
</script>

 

也可以試試下面這種方法

var load = (musicSrc) => new Promise(resolve => {
    let audio       = new Audio()
    audio.src       = musicSrc
    audio.addEventListener('canplay', resolve);
})

 

當音頻/視頻處於加載過程中時，會依次發生以下事件：

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

 

 

ios微信下vue項目組件切換並自動播放音頻的解決方案

 

npm包：audio-loader了解下（最后我在微信中遇到的IOS獲取不到duration，就是直接通過audio-loader包解決的。）

var load = require('audio-loader')
 
// load one file
load('http://example.net/audio/file.mp3').then(function (buffer) {
  console.log(buffer) // => <AudioBuffer>
})

import load from 'audio-loader'

load(this.music).then((function (buffer) {
   _self.$refs.totalTime.textContent = _self.formatTime(buffer.duration)
}))