Help us understand the problem. What is going on with this article?

Web Audio APIで音が鳴る最小構成は何

More than 1 year has passed since last update.

Web Audio APIについて初めて調べていて、「とりあえず音を鳴らすにはどうしたらいいんだろう?」と思って調べても

「最小」みたいなことを謳いながら、音色を選ぶボタンがあったり周波数を選ぶスライダーがあったりして、「いや、音を鳴らすためだけにやらなきゃいけない最低限のことはどの部分なんだよ!」と思ったりしたので

探ってみました。

多分、最小はこれです。

コード

test.html
<!DOCTYPE html>
<html>
  <body>
    <script src="test.js"></script>
  </body>
<html>
test.js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = audioCtx.createOscillator();
oscillator.connect(audioCtx.destination);
oscillator.start();

この2つのファイルを同じフォルダにおいて、test.htmlをブラウザで開くと、いきなり音がなります。

止めることは出来ません(なんですって

ブラウザかタブを閉じて下さい。止まります。

解説

申し訳程度に解説をつけます。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

まず、Web Audio APIでは、あらゆることをAudioContextというオブジェクトの中で行います。なのでまずこれを作ります。

単にnew AudioContext()としていないのは、ブラウザによって対応してたりしてなかったりするからです。

Safariで鳴らさなくてもいいなら、この行はもっと短く

var audioCtx = new AudioContext();

としても大丈夫です。

window.AudioContextwindow.webkitAudioContextのうち、動く方をとってくるために、こんな感じのコードになっています。

次いきます。

var oscillator = audioCtx.createOscillator();

oscillatorは、「音源ノード」の一種で、今回のように引数を省略した場合は440Hzのサイン波を出力します。

「ノード」というのは、イメージで言うと、点と、それをつなぐ線からなるネットワークのうちの、「点」の方のことです。

線の方は「エッジ」といったりします。

Web Audio APIでは、ノードを接続してネットワークを作るわけですね。

数学的には「有向グラフ」ということになります。まあ、点同士を矢印でつないだものと思ってくれれば大丈夫です。

oscillator.connect(audioCtx.destination);

この行で、さっき作った音源ノードoscillatorを、destinationとかいうノードに接続しています。

向きはoscillatordestinationです。

destinationというノードは、最終的な出力を表します。

音源を出力につないでるわけです。普通ですねえ。

音源を出力意外のものにつなぐことがあるんでしょうか?

結論から言うと、あります。例えば、エフェクターに繋いで音を加工することができます。このエフェクターから、さらに別のエフェクターだったり、destinationだったりに接続していくわけですね。

oscillator.start();

最後、この行で、音源のスイッチをオンにしてます。

これで音が鳴ります。

とりあえずこれで音が鳴るので、あとはこれを元にいろいろ触っていけば良いと思います。

agajo
あんなに勉強して、親に高い予備校代も出してもらって東大に入り、卒業したのに、今では家と食事を親に頼りながら、年金と住民税を払うためにトイレ掃除をしている者です。
https://portal.oka-ryunoske.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした