3

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

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

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

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

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

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秒地点から開始させたい
});

1 件の回答 1

2

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

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

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

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

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();
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" />

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。