JavaScriptで音を鳴らす

手順

以下の二つのファイル

  • 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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする