2021-07-14

JavaScript: Audio（音声ファイル）のvolume（音量）を設定する

JavaScriptでAudio（音声ファイル）のvolume（音量）を設定する場合は、 「volume」プロパティを使用します。
volumeプロパティは最小値が0、最大値が1のダブル型の値を取ります。 中間値は0.5です。

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

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

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

<p>音量：
	<input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
	<span id="vol_range">0.5</span>
</p>

スライダーのminに「0」、maxに「1」を指定します。 stepには「0.1」を指定していますが、 もっと細かく指定できるようにする場合は「0.01」を指定しても構いません。

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

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

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


// ボリューム設定
let elem_volume = document.getElementById("volume");
let elem_range = document.getElementById("vol_range");

ad.volume = elem_volume.value;  // 初期値設定

// ボリューム変更時
elem_volume.addEventListener("change", function(){
	ad.volume = elem_volume.value;
	elem_range.textContent = elem_volume.value;
}, false);