WebAudioの勉強するなら「Web Audio School」が良さそう #webaudio (プレゼン)

はじめに

• WebAudio.Tokyo #3にて煽られたので即興でプレゼンを作っています。

• 楽しそうだったのでNodeSchoolのWeb Audio Schoolのカンタンな紹介です。

自己紹介

僕と音楽

• 小学校6年間 エレクトーン
• 高校でベースとギターをかじる
• けど特になにも身についてない
• WebAudioむずい

#iotlt

• IoTLT 主催してます。
• 1/30にソフトバンク本社でやります。
• https://iotlt.connpass.com/event/45884/

僕とWebAudio

• IoTLTvol4で発表してた MakeyMakeyで○○と○○をつなげてみた話 (第4回 #iotlt : 5分)
• セクハラインターフェイス https://vimeo.com/41101694
• MakeyMakeyでSIに挑戦

• 実際の様子

NodeSchool

• Node.jSの学習向けツール
• CLI実行
• npmでインストール

NodeSchoolの代表的なレッスン

• WebAudioを学べるNodeSchoolのレッスン
• https://github.com/mmckegg/web-audio-school

インストール

$ npm install -g web-audio-school

起動

$ web-audio-school
Starting server...

CLIかと思いきや...

NodeSchoolでは珍しいGUIツール

• http://localhost:9966/ でサーバー起動
• ブラウザ上でコーディング

• 問題文を元に回答を右上のエディタに記述

• 右下のverifyで答え合わせをする

• 成功すると...verified!という表示になります。

第１問を解いてみる

• 第１問の問題はざっくりいうと「sawtoothの音を流そう」という内容です。

oscillator.type = 'sawtooth'

という行を差し込めばOKです。

• 実行すると同じ波形と音を確認できます。

宣伝: NodeSchool Tokyoやるよ

• NodeSchoolのレッスンをみんなでもくもくする会
• メンターがいるので分からないことは聞けます。
• 次回 1/29 @レバレジーズ
• https://nodejs.connpass.com/event/45720/

まとめ

• WebAudioの勉強するなら「Web Audio School」が良さそう
  • 追記: Webサイトだけでもできるみたい -> https://mmckegg.github.io/web-audio-school/
• 1/29 NodeSchoolきてね
• 1/30 IoTLTきてね