audioの時間を取る時のJSの罠

"hoge.wav", "bar.wav"がある時に、

audioタグを作るメソッド

var createAudio = function (wav_file) {
    var base = document.getElementById("Voice");
    /// audioタグにする
    var audio_obj = document.createElement("audio");

    var type;
    if (audio_obj.canPlayType("audio/mp3")) {
        type = "mp3";
    } else if (audio_obj.canPlayType("audio/wav")) {
        type = "wav";
    } else {
        type = "mp3";
    }

    audio_obj.src = wav_file;
    base.appendChild(audio_obj);

    var wav_time = 0.0;

    return audio_obj;
}

Audioの時間計測

var wavs = ["hoge.wav", "bar.wav"];
for (var i = 0; i < wavs.length; i++) {
    console.log(voice_urls[i]);
    var audio_obj = createAudio(voice_urls[i]);
    // 読み込み時にwavの総時間を求める
    audio_obj.addEventListener("loadedmetadata",function (e) {
        var wav_time = audio_obj.duration; // 秒
        console.log(wav_time);
    });
}

しかし、このときに出てきた時間は、何故か"hoge.wav", "bar.wav"とも同じ。

functionで閉じ込めてみた Audioの時間計測

var wavs = ["hoge.wav", "bar.wav"];
for (var i = 0; i < wavs.length; i++) {
    (function (local) { // とじこめる
        console.log(voice_urls[local]);
        var audio_obj = createAudio(voice_urls[local]);
        // 読み込み時にwavの総時間を求める
        audio_obj.addEventListener("loadedmetadata",function (e) {
            var wav_time = audio_obj.duration; // 秒
            console.log(wav_time);
        });
    }(i)); // とじこめる
}

こうすればうまく行った。 その代わり、

console.log(wav_time);

のログが出るのは時間が短いものから出てしまうので注意。