はじめに

JavaScriptで音源データの総時間を取得するときに、正常に値が取れずconsole.log() で出力したところInfinityと表示される問題が発生しました。

発生した環境はChrome バージョン110です。

下記が、問題が出たコードです。

var audio = new Audio("http://xxxxxx/xxx.php"); // 音楽データを返すphpファイル

audio.addEventListener("loadeddata", function () {
    console.log(audio.duration); // Infinity
});

解決方法

サーバー側の出力を修正する方法と、JavaScript側で無理やり対応する方法があります。

1. サーバー側で解決する場合
   レスポンスヘッダに正しいContent-Lengthを付与してください。
2. JavaScript側で解決する場合
   現在の再生時間に大きい値を入れて読み込みます。

下記が、解決したコードです。

var audio = new Audio("http://xxxxxx/xxx.php"); // 音楽データを返すphpファイル
audio.currentTime = 1000000; // 実際の最大値より大きい値を入れる

audio.addEventListener("loadeddata", function () {
    console.log(audio.duration); // 正しい数値が取れる
    audio.currentTime = 0; // 再生する前に初期値に戻す
});

サーバー側の出力を直すのが正攻法だと思いますが、JavaScript側だけで対応する必要がある場合はこちらの方法でどうぞ。