iOSのHTML5 Audio/VideoのcurrentTimeがおかしい

1年前に買ったSIMフリー版のiPhone6をauで使っていましたが、iijmioの「おうちでナンバーポータビリティ」でMNPしました。特に問題などなく使えています。4インチのを出して欲しいのでiPhone6sは見送りました。

前回、AndroidのHTML5 Audioのバグについて書きましたが、iOSのHTML5 Audio/Videoでも次の２つのバグを見つけました。

• currentTime に連続して同じ値を代入するとシークできない。
• 再生終了後、currentTime へ代入した直後に play() を呼んでも再生が始まらない。

今回は、これらの発生条件の詳細と回避方法について書きます。
なお、Audioを使っての説明となりますが、Videoでも同じです。

currentTime に連続して同じ値を代入するとシークできない

iOS8,iOS9で発生します。iOS7では発生しません。

var audio = new Audio("sample.m4a");
audio.play();

var seekButton = document.getElementById("seekButton");
seekButton.addEventListener(function() {
    audio.currentTime = 10;
    audio.currentTime = 10;
}, false);

サンプルを実行する

普通、このように同じ値を連続して代入するコードを書くことはありませんが、複雑な処理を書いていると、少し離れた場所で同じ値を再度代入してしまうことが起きてしまうことはあると思います。

回避方法ですが、（１回目の）代入直後は seeking が true となっており、またそのとき currentTime の値を読み出すと代入した値がそのまま返ってくるようなので、（２回目の）代入直前に seeking と currentTime をチェックすればよさそうです。

seekButton.addEventListener(function() {
    audio.currentTime = 10;
    if (!audio.seeking || audio.currentTime !== 10) {
        audio.currentTime = 10;
    }
}, false);

なお、連続した代入でも値が異なれば大丈夫なようです。

seekButton.addEventListener(function() {
    audio.currentTime = 10;
    audio.currentTime = 10.000000000000002;  // 倍精度浮動小数で10の次に大きい値
}, false);

2回目の代入を setTimeout で行うのも問題ないようです。

seekButton.addEventListener(function() {
    audio.currentTime = 10;
    setTimeout(function() {
        audio.currentTime = 10;
    }, 0);
}, false);