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
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Lazy application authentication with Tailscale
bluehatbrit
0
210
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
7.1k
OPENLOGI Company Profile
hr01
0
67k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
YesSQL, Process and Tooling at Scale
rocio
173
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Speed Design
sergeychernyshev
32
1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Faster Mobile Websites
deanohume
307
31k
Side Projects
sachag
455
42k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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)