Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@agajo

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

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();

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

これで音が鳴ります。

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

5
Help us understand the problem. What is going on with this article?
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
5
Help us understand the problem. What is going on with this article?