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
170
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
650
Other Decks in Technology
See All in Technology
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
260
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
520
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
140
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
Geminiとv0による高速プロトタイピング
shinya337
1
270
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
For a Future-Friendly Web
brad_frost
179
9.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Visualization
eitanlees
146
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Producing Creativity
orderedlist
PRO
346
40k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Bash Introduction
62gerente
613
210k
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)