記一次vue中獲取audio媒體總時長duration遇到的問題

audio獲取當前播放時間

在dom掛載完畢後訪問currentTime屬性得到，經過timeupdate鉤子可實時監控

audio 獲取媒體總時長

在canplay（瀏覽器能夠開始播放該音視頻）鉤子函數回調中訪問duration屬性可得到（注：在dom掛載完直接獲取duration會返回NaN）

<audio @canplay="getDuration" @timeupdate="updateTime" ref="audio" :src="musicUrl"></audio>
複製代碼

methods: {
    getDuration() {
       console.log(this.$refs.audio.duration); //此時能夠獲取到duration
       this.duration = this.$refs.audio.duration;
    },
    updateTime(e) {
       this.currentTime = e.target.currentTime;  //獲取audio當前播放時間
    },
}
複製代碼

watch： {
    currentSong() {  //監聽正在播放的歌曲改變
        this.$nextTick(() => {
            this.$refs.audio.play();
            console.log(this.$refs.audio.duration); //此時duration爲NaN
        })
    },
}
複製代碼

audio的方法

addTextTrack()    爲音視頻加入一個新的文本軌跡    
canPlayType()    檢查指定的音視頻格式是否獲得支持    
load()    從新加載音視頻標籤    
play()    播放音視頻    
pause()    暫停播放當前的音視頻
複製代碼

audio的屬性

audioTracks    返回可用的音軌列表（MultipleTrackList對象）    
autoplay    媒體加載後自動播放    
buffered    返回緩衝部件的時間範圍(TimeRanges對象)    
controller    返回當前的媒體控制器（MediaController對象）    
controls    顯示播控控件    
crossOrigin    CORS設置    
currentSrc    返回當前媒體的URL    
currentTime    當前播放的時間，單位秒    
defaultMuted    缺省是否靜音    
defaultPlaybackRate    播控的缺省倍速    
duration    返回媒體的播放總時長，單位秒    
ended    返回當前播放是否結束標誌    
error    返回當前播放的錯誤狀態    
initialTime    返回初始播放的位置    
loop    是否循環播放    
mediaGroup    當前音視頻所屬媒體組 (用來連接多個音視頻標籤)    
muted    是否靜音    
networkState    返回當前網絡狀態    
paused    是否暫停    
playbackRate    播放的倍速    
played    當前播放部件已經播放的時間範圍(TimeRanges對象)    
preload    頁面加載時是否同時加載音視頻    
readyState    返回當前的準備狀態 {
    0: HAVE_NOTHING 沒有準備就緒的狀態
    1: HAVE_METADATA 關於音頻就緒的元數據
    2: HAVE_CURRENT_DATA 當前可用，但下一幀不肯定
    3: HAVE_FUTURE_DATA 當前和下一幀可用
    4: HAVE_ENOUGH_DATA 有足夠的數據支持播放
}   
seekable    返回當前可跳轉部件的時間範圍(TimeRanges對象)    
seeking    返回用戶是否作了跳轉操做    
src    當前音視頻源的URL    
startOffsetTime    返回當前的時間偏移(Date對象)    
textTracks    返回可用的文本軌跡(TextTrackList對象)    
videoTracks    返回可用的視頻軌跡(VideoTrackList對象)    
volume    音量值 
複製代碼

audio的鉤子

abort    當音視頻加載被異常終止時產生該事件    
canplay    當瀏覽器能夠開始播放該音視頻時產生該事件    
canplaythrough    當瀏覽器能夠開始播放該音視頻到結束而無需因緩衝而中止時產生該事件    
durationchange    當媒體的總時長改變時產生該事件    
emptied    當前播放列表爲空時產生該事件    
ended    當前播放列表結束時產生該事件    
error    當加載媒體發生錯誤時產生該事件    
loadeddata    當加載媒體數據時產生該事件    
loadedmetadata    當收到總時長，分辨率和字軌等metadata時產生該事件    
loadstart    當開始查找媒體數據時產生該事件    
pause    當媒體暫停時產生該事件    
play    當媒體播放時產生該事件    
playing    當媒體從因緩衝而引發的暫停和中止恢復到播放時產生該事件    
progress    當獲取到媒體數據時產生該事件    
ratechange    當播放倍數改變時產生該事件    
seeked    當用戶完成跳轉時產生該事件    
seeking    當用戶正執行跳轉時操做的時候產生該事件    
stalled    當試圖獲取媒體數據，但數據還不可用時產生該事件    
suspend    當獲取不到數據時產生該事件    
timeupdate    當前播放位置發生改變時產生該事件    
volumechange    當前音量發生改變時產生該事件    
waiting    當視頻因緩衝下一幀而中止時產生該事件
複製代碼