手順
以下の二つのファイル
- test.html
- test.js
を作成する
※以下のサンプルは実行すると音が鳴るため音量には注意
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript Sample</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){main();});</script>
</head>
<body>
</body>
</html>
test.js
var main = function() {
var ctx = new AudioContext();
var oscillator = ctx.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.value = 440;
oscillator.connect(ctx.destination);
oscillator.start();
}
説明
Web Audio API を使用して音を鳴らす
AudioContext
オーディオ関連の機能が詰まっているオブジェクト
AudioContext から必要な機能のオブジェクト生成する
OscillatorNode
シンプルな波形を発生させるオブジェクト
start で波形を発生させる
- type 波形指定(矩形波や三角波も選択できる)
- frequency.value 周波数指定
connect
設定をおこなったモジュールをつなぎ合わせる
最終的に AudioContext の destination に繋ぐことでスピーカーに出力できる
参考
MDN Web Docs : Web Audio API
MDN Web Docs : OscillatorNode
MDN Web Docs : OscillatorNode.type