Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Getting Started Web Audio API
Search
hiro-tan
November 25, 2016
Technology
0
180
Getting Started Web Audio API
Web Audio APIを使って音を出して、簡単なピアノ作ってみるところまで。
Meguro.es #5にて発表した内容です。
hiro-tan
November 25, 2016
Tweet
Share
More Decks by hiro-tan
See All by hiro-tan
party-night-with-webaudio-api
hirotan
0
250
音色と波形の話
hirotan
0
180
chiptune by web audio api
hirotan
0
150
Web Audio API でお手軽10バンドイコライザー
hirotan
1
660
Other Decks in Technology
See All in Technology
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
720
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
1
360
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
130
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
510
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
280
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.4k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
570
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
170
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
200
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
A Tale of Four Properties
chriscoyier
161
23k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Automating Front-end Workflow
addyosmani
1371
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Six Lessons from altMBA
skipperchong
29
4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How STYLIGHT went responsive
nonsquared
100
5.8k
Agile that works and the tools we love
rasmusluckow
331
21k
Transcript
Getting Started Web Audio API 廣田 洋平 @Drecom
We are hiring!
自己紹介 廣田 洋平 (Yohei Hirota) ドリコム16 新卒入社 「 ちょこっとファー ム」
サー バー サイド
アジェンダ Web Audio API でピアノを作る Web Audio API で音を鳴らす テンポを変えて音を鳴らす
音の高さを変える UI コンポー ネントから音を鳴らす DEMO: https://hiro-tan.github.io/
Web Audio API で音を鳴らす DEMO: https://hiro-tan.github.io/osc.html // AudioContext のインスタンス生成 window.AudioContext
= window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContext(); // oscillator の設定 oscillator = audioContext.createOscillator(); oscillator.connect(audioContext.destination); oscillator.start(0);
テンポについて DEMO: https://hiro-tan.github.io/tempo.html ♩=120 1 分間に4 分音符が120 個 4 分音符1
個当たりの時間 = 0.5 秒 tempo = 120; crotchet = 60 / 120; // 4 分音符の長さ semibreve = crotchet * 4; // 全音符の長さ quaver = crotchet / 2; // 8 分音符の長さ // 8 分音符を鳴らす oscillator.start(0); oscillator.stop(audioContext.currentTime + quaver);
音の高さを変える DEMO: https://hiro-tan.github.io/freq.html 音の基準 = 440Hz = ピアノの" ラ" //
整数を周波数に置き換える公式 function CaluculateFrequency(value) { return 440 * Math.pow(2, value / 12); } value = 0 ピアノの" ラ" value = -9 真ん中の" ド" value = 3 1 オクター ブ上の" ド"
音の高さを変える DEMO: https://hiro-tan.github.io/freq.html oscillator = audioContext.createOscillator(); oscillator.frequency.value = 440; //
default oscillator.connect(audioContext.destination); oscillator.start(0); oscillator.frequency.value = 261.63; // 再生中にも変更できる
Web Audio API でピアノを作る UI コンポー ネント: https://github.com/WebMusicDevelopersJP/webaud io-controls <webaudio-keyboard
keys="25"></webaudio-keyboard>
Web Audio API でピアノを作る DEMO: https://hiro-tan.github.io/piano.html keyboard.addEventListener('change', function(e) { if(e.note[0])
{ // 鍵盤が押された時の処理 console.log(e.note); // [1, 60] } else { // 鍵盤から離れた時の処理 console.log(e.note); // [0, 60] } }); 注意点 oscillator は一度stop すると削除される使い捨て仕様 和音などを表現するには鍵盤の数だけ変数が必要
今日話さなかったこと ボリュー ムの変更 外部音声ファイルの読み込み フィルタ
Web Audio API のための勉強会 WebAudio.tokyo #1 @Drecom 9/6(Tue)