

html5のaudioを使って、ブラウザ上で音声ファイルを再生するプログラムを作成しております。

複数ファイルを連続して再生する必要があるため、ファイルを結合し、ブラウザで読み込ませていますが、safariで一時停止からの再生が正常に動作しない事象が発生しました。

mp3ファイルの結合は、単純結合（下記linuxコマンド）にて作成しております。  
`$ cat a.mp3 b.mp3 > c.mp3`

ソースコードは以下となります。

test.js ※一部抜粋

[code]

    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();
        }
    }
    
[/code]

test.html ※一部抜粋

[code]

    <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>
    
[/code]

上記にアクセスしstartを押すと音声が再生され、一時停止と再生が行えます。

Safariでアクセスして、一時停止、再生を行うと、  
結合前のa.mp3のパートが再生されているときは正常に動作するのですが、  
b.mp3のパートが再生されているときに一時停止、再生をすると初めから再生されてしまいます。

デバッグで表示しているdurationの値が、Safariの場合のみなぜかa.mp3の再生時間が表示されていることが原因だと思うのですが、こちらの解決方法がわかりません。

環境は以下となります。  
MacOSX 10.10.3  
Safari 8.0.6

よろしくお願いいたします。


CC BY-SA 3.0
2015-08-27T15:02:10.530
14917
2015-08-28T04:41:18.937
2015-08-27T18:15:40.493
11094
11094
question
javascript html5 safari
Safariでmp3ファイルの一時停止再生がうまくできない


Safariでの再生を試す前に、まずは通常のオーディオプレイヤーでその`c.mp3`の`b.mp3`の部分を正常に再生できるか試してみてください。  
~~おそらくSafariに限らずどんなプレイヤーでも正常に再生できないはずです。~~

~~MP3形式のオーディオファイルは`cat`のような単純な結合では結合できません  
(というか、`cat`で正しく結合できるのはプレーンテキストファイルくらいで、  
ほとんどのフォーマットのファイルは`cat`では正しく結合できません)。  
`b.mp3`の部分が再生できないのは、単純にファイルが壊れているからです。~~  
正しくオーディオファイルを結合するには、Audacityのようなオーディオ編集ソフトを使う方法があります。

(追記) <https://en.wikipedia.org/wiki/MP3>
によれば、MP3ファイルは全体がMP3フレームの繰り返しだけで構成されているため、単純なバイナリでの結合でもちゃんと再生できるファイルになるようです。質問者さんから指摘があったとおり、`cat`で結合しても再生は出来ないというのは間違いです。

ただし、理由は不明ですが`cat`で結合したオーディオファイルをちゃんと再生できないプレイヤーもあるようで、自分の試した範囲ではWindows上のChromeで正しく再生出来ていません。特定のブラウザの実装の問題のように思えますし、差し当たっての回避策としてはオーディオ編集ソフトで結合するのがいいと思います。


CC BY-SA 3.0
2015-08-27T15:35:34.513
14918
2015-08-28T04:41:18.937
2015-08-28T04:41:18.937
10330
10330
14917
answer


SoundJS or Web Audio  
windowsSafariはノーサポートみたいです

<https://github.com/CreateJS/SoundJS/issues/60>


CC BY-SA 3.0
2015-08-27T18:01:03.537
14920
2015-08-27T18:09:24.270
2015-08-27T18:09:24.270
11098
11098
14917
answer