vue の audio タグが refs を使用してデュレーションを取得し、NaN を返す場合

最近、音楽 Web サイトを開発しているときに、オーディオの長さを使用して曲の合計時間を取得したいという状況に遭遇しましたが、結果は常に NAN で、長時間検索しても結果が見つかりませんでした。

その後、クリックが速すぎる場合にのみ NAN が表示されることがわかりました。私の個人的な推測では、曲の取得時に進行状況バーが曲のロードを完了していない可能性があります。つまり、曲がロードされる前に合計時間を取得することになります。

しかし、私は技術に弱いので、最終的にタイマーを思いつき、時間を2秒に設定してデータを取得できました

 setTimeout(() => {
                console.log(this.$refs.audio.duration)
            }, 2000);

上記の方法でも入手可能ですが、今日友達に聞いてやっと正しい方法を見つけました。

NANを取得する理由は音楽がロードされていないためです。このとき、audioタグに追加する必要があります

@canplay="キャンプレイ"

このようにして、play(){ を実行できます。

// ここで音楽の合計時間を取得します

}

正面

<audio   :src="musicdetail.play_url" @canplay="canplaysong" autoplay="true"></audio>

内部のメソッド

canplaysong(){
            let total=parseInt(this.$refs.audio.duration)
                this.musictotaltimemode=total
                let minute=total % 60
                let seconds=(total-minute)/60
                this.musictotaltime=seconds+':'+minute
        },

そうすればNANはなくなります