左は261Hz(ド)と330Hz(ミ)で右は392Hz(ソ)と522Hz(ド)を合成した正弦波のPCMデータを作って鳴らす
JavaScriptでPCMデータを再生したいけれど、AudioContextの使い方が分からない…そんな方に向けて、
この記事ではcreateBufferを使った音の生成・再生方法を詳しく解説します。
音量に注意して鳴らして下さい。
最初は小さい音に設定してから少しずつ大きくすることをお勧めします。
スピーカーによって高周波数の音が鳴らない場合があります。
音量：
5
音を鳴らす 音を止める
ソースコード
<div style="display:flex;"><div>音量：</div><div id="vol_label">5</div></div>
<input type="range" value="5" max="100" min="1" step="1" id="vol" style="max-width:100%;width:600px;"><br>
<a onclick="" style="cursor:pointer;" class="bt112 bt112r" id="play">音を鳴らす</a>
<a onclick="" style="cursor:pointer;" class="bt112 bt112b" id="stop">音を止める</a>
<br>
<script>
var audioCtx=null, source=null;
var vol=5;//ボリューム
var samplingRate=44100;//1秒間に44100個のPCMデータ
window.addEventListener('DOMContentLoaded',function(){
//音量変更
document.getElementById('vol').addEventListener('input',function(){
document.getElementById('vol_label').innerHTML=document.getElementById('vol').value;
vol=document.getElementById('vol').value;
});
//音を鳴らす
document.getElementById('play').addEventListener('click',function(){
if(audioCtx==null){
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
//audioCtx.sampleRate=samplingRate;
}
// 空の 1 秒のステレオバッファーを作成する
var myArrayBuffer = audioCtx.createBuffer(
2, //チャンネル数
samplingRate * 1, //1秒間
samplingRate, //サンプリングレート
);
//チャンネル0（左）のPCMデータの設定（261Hzと330Hzの合成）
let leftBuffer = myArrayBuffer.getChannelData(0);
for(let i=0; i<leftBuffer.length; i++){
leftBuffer[i]=Math.sin(Math.PI*2*i/samplingRate*261)*vol/100+
Math.sin(Math.PI*2*i/samplingRate*330)*vol/100;
}
//チャンネル1（右）のPCMデータの設定（392Hzと522Hzの合成）
let rightBuffer = myArrayBuffer.getChannelData(1);
for(let i=0; i<rightBuffer.length; i++){
rightBuffer[i]=Math.sin(Math.PI*2*i/samplingRate*392)*vol/100+
Math.sin(Math.PI*2*i/samplingRate*522)*vol/100;
}
//AudioBufferSourceNodeを取得
source = audioCtx.createBufferSource();
//AudioBufferSourceNode にバッファーを設定
source.buffer = myArrayBuffer;
//AudioBufferSourceNode を出力先に接続する
source.connect(audioCtx.destination);
//PCMの再生を始める
source.start();
});
//音を止める
document.getElementById('stop').addEventListener('click',function(){
source.stop();
});
});
</script>