Web Audio API 再生サウンドの音量を変更する - JavaScript
Web Audio API で再生しているサウンドの音量を変更するコードを紹介します。
概要
Web Audio APIで再生されているサウンドの音量を変更するには、再生開始時にGainNodeオブジェクトに接続して再生を開始します。再生中にGainNodeオブジェクトのGainの値を変更するとサウンドの音量を変更できます。
プログラム例
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />
<script type="text/javascript">
var request, source, stopflag=0, gainNode;
window.onload = function () {
request = new XMLHttpRequest();
request.open("GET", "sound2.mp3", true);
request.responseType = "arraybuffer";
request.onload = completeOnLoad;
request.send();
};
function completeOnLoad() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
// オーディオをデコード
context.decodeAudioData(request.response, function (buf) {
source.buffer = buf;
source.loop = false;
});
source = context.createBufferSource();
var elem = document.getElementById("Play");
elem.addEventListener("click", playStart, false);
var elem2 = document.getElementById("Pause");
elem2.addEventListener("click", playPause, false);
var elem3 = document.getElementById("vUP");
elem3.addEventListener("click", playVolumnUp, false);
var elem4 = document.getElementById("vDOWN");
elem4.addEventListener("click", playVolumnDown, false);
}
function playStart() {
gainNode = context.createGain();
source.connect(gainNode);
gainNode.connect(context.destination);
gainNode.gain.value = 0.1;
source.start(0);
}
function playPause() {
if (stopflag == 0) {
context.suspend();
stopflag = 1;
} else {
context.resume();
stopflag = 0;
}
}
function playVolumnUp() {
gainNode.gain.value = gainNode.gain.value + 0.1;
var elemv = document.getElementById("volvalue");
elemv.innerHTML = gainNode.gain.value.toFixed(2);
}
function playVolumnDown() {
gainNode.gain.value = gainNode.gain.value - 0.1;
var elemv = document.getElementById("volvalue");
elemv.innerHTML = gainNode.gain.value.toFixed(2);
}
</script>
</head>
<body>
<a id="Play" href="javascript:void(0);">再生</a><br />
<a id="Pause" href="javascript:void(0);">停止/再開</a><br />
音量 : <a id="vUP" href="javascript:void(0);">[+]</a> <a id="vDOWN" href="javascript:void(0);">[-]</a><br />
<div id="volvalue"></div>
</body>
</html>
解説
Web Audio APIを利用したサウンド再生については「
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用)」または「
iOSのMobile SafariでWeb Audio API を利用してサウンドを再生する」の記事を参照してください。
再生開始時に、AudioContextオブジェクトのcreateGain()メソッドを呼び出し、GainNodeオブジェクトを作成します。オーディオソースのconnectメソッドを呼び出し、作成したGainNodeオブジェクトをオーディオソースに接続します。接続後、GainNodeオブジェクトのconnectメソッドを呼び出し、AudioContextオブジェクトに接続します。GainNodeオブジェクトのgainプロパティの値を設定します。gainプロパティの値が音量になります。設定後、オーディオソースのstartメソッドを呼び再生を開始します。
function playStart() {
gainNode = context.createGain();
source.connect(gainNode);
gainNode.connect(context.destination);
gainNode.gain.value = 0.1;
source.start(0);
}
今回の例では、リンクのクリックにより、音量を上げ下げします。現在のGainNodeオブジェクトのgain値に0.1を加算、または減算して音量の上げ下げをします。また、現在の音量の値を画面に表示します。
function playVolumnUp() {
gainNode.gain.value = gainNode.gain.value + 0.1;
var elemv = document.getElementById("volvalue");
elemv.innerHTML = gainNode.gain.value.toFixed(2);
}
function playVolumnDown() {
gainNode.gain.value = gainNode.gain.value - 0.1;
var elemv = document.getElementById("volvalue");
elemv.innerHTML = gainNode.gain.value.toFixed(2);
}
実行結果
上記のHTMLページをWebブラウザで表示します。下図の画面が表示されます。[再生]リンクをクリックするとサウンドの再生が始まります。
サウンドの再生中に[音量]の[+]のリンクをクリックします。音量が徐々に大きくなることが確認できます。
[-]のリンクをクリックすると音量が小さくなります。値が"0"になると音量も0になりサウンドが聞こえなくなります。
参考
function playStart() {
source.connect(context.destination);
source.start(0);
}
上記のコードではオーディオソースからAudioContextへ直接接続している状態になります。
function playStart() {
gainNode = context.createGain();
source.connect(gainNode);
gainNode.connect(context.destination);
gainNode.gain.value = 0.1;
source.start(0);
}
上記のコードではオーディオソースからGainNodeオブジェクトに接続し、GainNodeオブジェクトからAudioContextへ接続している状態になります。
著者
iPentec.com の代表。ハードウェア、サーバー投資、管理などを担当。
Office 365やデータベースの記事なども担当。
