2021-07-15

JavaScript: Audio（音声ファイル）の再生スピードを設定する

JavaScriptでAudio（音声ファイル）の再生速度を設定する場合は、 「playbackRate」プロパティを使用します。

playbackRateはダブル型の値で、通常の速度が「1.0」です。 「1.0」より小さければ遅くなり、大きければ早くなります。 「2.0」なら2倍速です。
ブラウザにもよりますが、非実用的な値（0.1倍速や5.0倍速など） を設定した場合はミュートされます。

再生スピードを変更する場合は、 HTMLの「input type="range"」を使ってスライダーを表示させると、 ユーザーが操作しやすくなります。

次のサンプルコードでは「再生」ボタンの下に、 スピードを調整できるスライダーを表示しています。
スライダーで値を変更すると音声ファイルの速度が変更されます。

<p><button id="go">再生</button></p>

<p>再生速度：
	<input type="range" id="speed" min="0" max="2" step="0.1" value="1.0">
	<span id="speed_range">1.0</span>
</p>

「input type="range"」でスライダーを表示し、 minに「0」、maxに「2」、stepに「0.1」を指定しています。

上のHTMLでは次のような画面が表示されます（画像）

// Audioオブジェクトの生成
let ad = new Audio("./sample.mp3");

// 再生ボタン
let elem_go = document.getElementById("go");
elem_go.addEventListener("click", function(){
	ad.play();
}, false);

// スピード設定
let elem_speed = document.getElementById("speed");
let elem_range = document.getElementById("speed_range");

ad.playbackRate = elem_speed.value;  // 初期値設定

// 変更時
elem_speed.addEventListener("change", function(){
	ad.playbackRate = elem_speed.value;
	elem_range.textContent = elem_speed.value;
}, false);