みかづきブログ その3

3ヶ月つづけてみました。

localhostとAudioタグとcurrentTime

ページをクリックするたびにAudioを再生しようと思い、

(function(win, doc) {

    "use strict";

    var audio = new Audio("./audio.mp3"); // localhost上のファイル

    document.addEventListener("click", function() {
        audio.currentTime = 0; // 再生位置を先頭に戻す
        audio.play();
    });

})(this, document);

というコードを書いたのですが、ChromeSafarilocalhost上のページをみると2回目以降のクリックでAudioが再生されずに悩んでいました。(FireFoxでは問題ありませんでした)
consoleにcurrentTimeを出力すると、

audio.currentTime = 0; // 再生位置を先頭に戻す

ここで、0に戻っていないようでした。

しかし、mp3をサーバにアップし、

(function(win, doc) {

    "use strict";

    var audio = new Audio("http://jsrun.it/assets/a/G/I/8/aGI83.mp3"); // サーバ上のファイル

    document.addEventListener("click", function() {
        audio.currentTime = 0; // 再生位置を先頭に戻す
        audio.play();
    });

})(this, document);

とすると、ChromeSafariでもcurrentTimeが動くようになり、無事に2度目以降のクリックでも動くようになりました。


DEMO