Safariでmp3ファイルの一時停止再生がうまくできない
html5のaudioを使って、ブラウザ上で音声ファイルを再生するプログラムを作成しております。
複数ファイルを連続して再生する必要があるため、ファイルを結合し、ブラウザで読み込ませていますが、safariで一時停止からの再生が正常に動作しない事象が発生しました。
mp3ファイルの結合は、単純結合(下記linuxコマンド)にて作成しております。
$ cat a.mp3 b.mp3 > c.mp3
ソースコードは以下となります。
test.js ※一部抜粋
var lastSoundFile; // 最後に再生した音声(停止、再生に利用)
//音声再生処理
function playSound(){
var playSoundFile = new Audio();
if(playSoundFile.canPlayType("audio/mpeg")) {
playSoundFile.src = 'c.mp3';
}
//再生
playSoundFile.addEventListener('canplay', function(){
playSoundFile.play();
}, true);
//デバッグ
$("body").append($("<div />").attr('id','test'));
playSoundFile.addEventListener('timeupdate', function(){
playSoundFile.duration = 125.15265306122448;
$("#test").html('<br>position : '+playSoundFile.currentTime
+'<br>duration : '+playSoundFile.duration
+'<br>volume : '+playSoundFile.volume
+'<br>paused : '+playSoundFile.paused);
}, true);
playSoundFile.load();
lastSoundFile = playSoundFile;
}
//コントロール
function operation(action){
if(action == "pause"){
lastSoundFile.pause();
}else if(action == "play"){
lastSoundFile.play();
}
}
test.html ※一部抜粋
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div id="start">
<a href="javascript:void(0)" onclick="playSound();">start</a>
</div>
<div id="control">
<a href="javascript:void(0)" onclick="operation('play');">再生</a> |
<a href="javascript:void(0)" onclick="operation('pause');">一時停止</a>
</div>
</body>
</html>
上記にアクセスしstartを押すと音声が再生され、一時停止と再生が行えます。
Safariでアクセスして、一時停止、再生を行うと、
結合前のa.mp3のパートが再生されているときは正常に動作するのですが、
b.mp3のパートが再生されているときに一時停止、再生をすると初めから再生されてしまいます。
デバッグで表示しているdurationの値が、Safariの場合のみなぜかa.mp3の再生時間が表示されていることが原因だと思うのですが、こちらの解決方法がわかりません。
環境は以下となります。
MacOSX 10.10.3
Safari 8.0.6
よろしくお願いいたします。