KMCの例会で話したスライドです。

1. わくわくシンセサイザー
入門
Pasta-K
📧pastak@kmc.gr.jp

2. CM①

3. suzuri.jp/pastak

4. KMCグッズ
発売中🎊

13. KMCグッズで
他の新入生に
差をつけよう!

15. suzuri.jp/pastak

16. CM②

18. Yet
Another
Perl
Conference
::Asia::Tokyo

19. 8/20-22

20. 東京
ビッグサイト

23. ㊗

24. KMCカンパ
でスポンサー
になった

25. hnagamin
tuda
pastak
takemaru
nonylene
nona7
※文字サイズはカンパ額に比例

26. 任意の
ノベルティ
が配れる！

27. カンパ
アイデア
受付中

28. 詳細は内部wiki
YAPC 2015
スポンサー大作戦

29. CM終わり

30. 本題

31. わくわくシンセサイザー
入門
Pasta-K
📧pastak@kmc.gr.jp

32. こんにちは😺

33. 🍣 KMCでの活動
KMC 37代目 広報
OSC Kyoto 2014 出展 etc
JavaScriptで世界平和2014

35. 🍣 インターネット活動
! twitter.com/pastak
id: Pasta-K
pastak.hatenablog.com
pastak-diary.hatenadiary.com
" github.com/pastak

36. 最近の悩み

38. ブログの
アクセス解析

39. はてなインターン 2013
アルバイトエンジニア ←イマココ

42. アニメファン

44. タイトル訂正

45. わくわくシンセサイザー
入門
Pasta-K
📧pastak@kmc.gr.jp

46. わくわくシンセサイザー
入門
Pasta-K
📧pastak@kmc.gr.jp
JavaScriptで

47. わくわくシンセサイザー
入門
Pasta-K
📧pastak@kmc.gr.jp
JavaScriptで
っぽい

48. わくわくシンセサイザー
入門
Pasta-K
📧pastak@kmc.gr.jp
JavaScriptで
音が鳴るやつを作る
っぽい

49. 話さないこと🙊

50. • シンセサイザーの仕組み
→ Google “シンセサイザー 仕組み”
• シンセサイザーの買い方
→ Amazon “シンセサイザー”
• シンセサイザーの選び方
• シンセサイザーの育て方
• シンセサイザーの面白さ
• シンセサイザーのここが凄い
そもそも僕がシンセサイザーあんまり知らないので用語とか
ミスってたら言って下さい

51. 話すこと📢

52. •Web Audio API について
ざっくり話すので詳しい使い方はサンプルコードを読ん
で察してください

53. 出来たやつ🎹
（サンプル）

54. http://pastak.github.io/audio-data-api-sample/

55. 作った機能🏁
実装が間に合った機能

56. • 周波数と波形を選択できる（オシレーター）
• 音に歪みを加える（ディストーションエフェ
クト）

57. ブラウザと
音楽再生の
歴史

58. HTML4.0
以前

59. HTML4.0以前
• ブラウザ自体に音楽再生機能は実装されていなかった
• プラグインを経由するしかなかった
• Windows Media Player
• Quick Time Player
• Flash Player

60. HTML5登場

61. HTML5 ~ <audio>登場
• HTML 5の仕様に音楽再生用の<audio>が登場
• <audio src=‘~’>で再生可能に
• 大体 2009 年くらいにブラウザに実装された
• IE9 (2010-06-23 Platform Preview 3)
• Chrome3.0 (2009-10-12)
• Firefox3.5 (2009-04-27 v3.5 Beta 4)

62. わーいわーい

63. 残念なお知らせ

64. ブラウザ毎に
再生出来る
形式が違った

66. ブラウザ毎の再生可能形式の違い
• 音楽形式の乱立
• mp3, wav, aac, AIFF, ogg, webm etc…
• <audio>タグ実装時の対応状況 ( 不正確かも
• Firefox: ogg, wav
• Google Chrome: aac, mp3 etc
• IE9: mp3, aac
• Safari: mp3, wav, aac

67. 最新の状況
• wav
• IEを除く主要ブラウザ全てで再生可能
• ogg
• IE以外で再生可能
• mp3, aac ( 特許などの都合
• Firefoxは条件付きで再生可能
• Windows: 22.0+, OSX: 35+
• Chromiumは再生不可 ( not Google Chrome

68. 解決策
• Chromiumを見捨てれば mp3 が用意できれば
十分
• wav + mp3 でほぼ全てをカバー可能

70. KMCの今年の
エイプリルフールは
mp3+wav+midi
で対応

71. 話題を戻して

72. Web Audio
API

73. Web Audio API
• ブラウザで音を鳴らす方法の1つ
• 一番簡単なのは <audio>
• Google Chrome / Firefox 共にサポート
• Firefox には Audio Data APIというのが実装
されていたが、こちらに統一する方針っぽい
• Nodeを接続することでフィルターしたり色々
出来る

74. オシレーター

75. 偏ったDTM用語辞典 - オシレーター:Oscillatorとは - DTM / MIDI 用語
の意味・解説 | g200kg Music & Software
http://www.g200kg.com/jp/docs/dic/oscillator.html
発振器の事。シンセサイザーでは音の元
となる波形を作り出す部分に相当する。
省略してOSCと書かれる事も多い。カナ
表記の場合は「オシレーター」、または
「オッシレーター」と書かれる。

76. 音の波を作るやつ

77. var audioctx = new AudioContext();
var osc = audioctx.createOscillator();
osc.frequency.value = 440;
osc.type = "square";
osc.connect(audioctx.destination);
osc.start(1);

78. var audioctx = new AudioContext();
var osc = audioctx.createOscillator();
osc.frequency.value = 440;
osc.type = "square";
osc.connect(audioctx.destination);
osc.start(1); 周波数

79. var audioctx = new AudioContext();
var osc = audioctx.createOscillator();
osc.frequency.value = 440;
osc.type = "square";
osc.connect(audioctx.destination);
osc.start(1);
波形の種類
・"sine" : サイン波
・"square" : 矩形波
・"sawtooth":鋸歯状波
・"triangle":三角波

80. var audioctx = new AudioContext();
var osc = audioctx.createOscillator();
osc.frequency.value = 440;
osc.type = "square";
osc.connect(audioctx.destination);
osc.start(1);
再生！！！！！！

81. ディストーションエフェクト

82. ディストーション (音響機器) - Wikipedia
http://ja.wikipedia.org/wiki/
%E3%83%87%E3%82%A3%E3%82%B9%E3%83%88%E3%83%BC
%E3%82%B7%E3%83%A7%E3%83%B3_%28%E9%9F%B3%E9%9F%BF
%E6%A9%9F%E5%99%A8%29
ディストーション (Distortion)は、意図的
に歪んだ（ひずんだ）音色を得るエフェ
クターである。

83. 音を歪ませるやつ

84. var shaper = audioctx.createWaveShaper();
osc.connect(shaper);
shaper.connect(audioctx.destination);
var curve = new Float32Array(4096);
// ディストーションカーブを表す配列を
なんとかして作る
shaper.curve = curve;

85. var shaper = audioctx.createWaveShaper();
osc.connect(shaper);
shaper.connect(audioctx.destination);
var curve = new Float32Array(4096);
// ディストーションカーブを表す配列を
なんとかして作る
shaper.curve = curve;
オシレーターと接続する

86. これらを
組み合わせて
色々すると

87. http://pastak.github.io/audio-data-api-sample/

88. Web Audio APIで他に出来る事
• 音量を調整する
• 音源を読み込む
• フィルターをかける
• 波形を取得する
• コンプレッサーをかける
• クロスフェードさせる
などなど

89. Web MIDI APIもある
• 最近、Chromeでもデフォルトで使えるように
なった
• 外部MIDI機器から信号を受け取る
• MIDI信号を送信

90. JavaScriptで
君だけの
楽器を作ろう

91. 関連技術をKMCで学びたい人
• DTM
• DTM勉強会2015 水曜日にやってるやつ
• JavaScript
• Slack: #javascript
• JavaScriptで魂を震えさせよう2015

92. もっとちゃんと知りたい
• Web Audio API - Web API インターフェイス | MDN
• https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API
• Web Audio API 解説 - 01.前説 | g200kg Music & Software
• http://www.g200kg.com/jp/docs/webaudio/
• WebAudioAPIで遊べるようになった - Qiita
• http://qiita.com/fnobi/items/2f08a67800dec1d61f21
• Getting Started with Web Audio API - HTML5 Rocks
• http://www.html5rocks.com/ja/tutorials/webaudio/intro/
• Web MIDI API 実験室
• http://haramikata.jougennotuki.com/
• JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法 - Qiita
• http://qiita.com/tadfmac/items/e26fdf1034ad6dad4504