24610


WebAudioAPIを用いてAudio要素をJavaScriptで制御しています。

長時間のmp3ファイルのうち、1000秒〜1100秒までを再生させたいとします。1000秒から再生を開始するのはcurrentTimeを指定することで実現できました。

しかし、再生を開始するとmp3の先頭からロードが始まり、1000秒地点までロードが到達するまで待機時間が発生します。この待機時間をなくすために任意の範囲だけ（この場合だと1000秒〜1100秒の範囲）ロードさせるようにしたいと考えています。

rangeリクエストで取得するbytesの範囲を指定できれば実現可能ではないかと調べてみたのですが、WebAudioAPIでrangeリクエストをコントロールする方法を見るけることができませんでした。

何か良い方法を知っている方、よろしくお願いいたします。

[code]

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var myAudio = document.querySelector('audio');
    var source = audioCtx.createMediaElementSource(myAudio);
    
    source.connect(audioCtx.destination);
    
    source.mediaElement.addEventListener("play", function() {
      source.mediaElement.currentTime = 1000; // ロードも1000秒地点から開始させたい
    });
[/code]


CC BY-SA 3.0
2015-10-17T04:44:15.727
17744
2016-05-06T14:48:39.367
2015-10-17T04:51:39.740
3968
3968
question
javascript
WebAudioAPIでmp3の任意の範囲だけロードさせたい


すこし前の質問ですが回答させてもらいます。

先頭から読み出しが開始されるのは、`<audio>`のDOMプロパティ`preload`が既定で`auto`になっているためです。この結果、ブラウザは自動的にソースを読み込んで再生準備をはじめてしまいます。まずはこれを無効化するために、`preload="none";`を設定します。続いて`currentTime`を設定しておけば、再生ボタンを押したとき、この部分から再生できると思います。

この様子は`buffered`プロパティを参照して確認できます。現在どこからどこまでを読み込んだかを示すもので、私の環境では`currentTime`に設定した時刻付近から読み込みが開始されることが確認できました。  
ブラウザの挙動の差異やネットワークの状態で状況が変わるかもしれませんが、参考になれば幸いです。

以下、動作テストに使用したものを載せておきます。すこし大きめの音声ファイルを`src`に設定して、これの真ん中の時刻から再生を開始するものです。

[code]

    var inputUrl = document.querySelector('#inputUrl');
    var setUrl = document.querySelector('#setUrl');
    var player = document.querySelector('#player');
    var showBuffRange = document.querySelector('#showBuffRange');
    var log = document.querySelector('#log');
    
    var localLogging = function () {
      log.innerHTML += [].join.call(arguments, ' ') + '<br />';
    };
    
    // sample big audio file
    // thanks http://www.ee.columbia.edu/~dpwe/sounds/music/
    inputUrl.value = 'http://www.ee.columbia.edu/~dpwe/sounds/music/temple_of_love-sisters_of_mercy.wav';
    
    
    // disable preloading
    player.preload = 'none';
    
    player.addEventListener('loadedmetadata', function () {
      // set position to start
      player.currentTime = player.duration * 0.5;
      localLogging('set currentTime = ' + player.currentTime);
      
      // play, if you want
      player.play();
      localLogging('play');
    });
    
    // set src property
    setUrl.addEventListener('click', function () {
      player.src = inputUrl.value;
      localLogging('set src = ' + player.src);
    });
    
    // show buffered range
    var update = function () {
      try {
        showBuffRange.textContent = 'buffered: from ' + player.buffered.start(0) + 's to ' + player.buffered.end(0) + 's';
      } catch (e) {
        showBuffRange.textContent = 'buffered: none';
      }
      setTimeout(update, 500);
    };
    
    update();
[/code]

[code]

    url: <input id="inputUrl" type="text" />
    <input id="setUrl" type="button" value="set to player.src" />
    <audio id="player" controls></audio>
    
    <div id="showBuffRange">bufferd:</div>
    <div id="log" />
[/code]


CC BY-SA 3.0
2016-05-06T14:48:39.367
24610
2016-05-06T14:48:39.367
17744
answer