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
ブラウザでステップシーケンサ 〜 クロックつらくない?
Search
OKUNOKENTARO
September 06, 2016
Programming
2
470
ブラウザでステップシーケンサ 〜 クロックつらくない?
2016/9/6に、WebAudio.tokyoで発表した資料です。
OKUNOKENTARO
September 06, 2016
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
9k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
150
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
9.9k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.2k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.4k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
620
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.2k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1k
Other Decks in Programming
See All in Programming
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.5k
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
130
Macとオーディオ再生 2024/11/02
yusukeito
0
160
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
430
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
CSC509 Lecture 09
javiergs
PRO
0
110
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Building Your Own Lightsaber
phodgson
102
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Unsuck your backbone
ammeep
668
57k
Being A Developer After 40
akosma
86
590k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
341
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Visualization
eitanlees
144
15k
Thoughts on Productivity
jonyablonski
67
4.3k
Bash Introduction
62gerente
608
210k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Transcript
ブラウザでステップシーケンサ クロックつらくない? Sep 6, 2016 / WebAudio.tokyo @armorik83
はちさん @armorik83 フロントエンド・エンジニア 元・音楽専門学校DTM科講師 MIDI検定1級所持
ステップシーケンサを 作った話
Demo
Web Music Hackathon #4 ドット絵シーケンサ
Web Music Hackathon #4 • Web MIDI API • 音の出力は外部のソフトシンセに頼っていた
• 誰もが鳴らせるアプリじゃない • 反省点多数 • 詳細は https://speakerdeck.com/armorik83/dotutohui-sikensa-ji-shu-de-urabanasi
1年後
Web Music Hackathon #5 ステップシーケンサ
Web Music Hackathon #5 • 割りきった! • Web Audio APIによる発声
• Web MIDI APIは使っていない • 誰が起動しても音を鳴らせる • 詳細は https://github.com/armorik83/wmh5-team-chaco
アーキテクチャ的な話 • フレームワーク Angular 2 • ng-kyotoをよろしく • 言語 ES2015
+ Babel • TypeScriptはハッカソン向きではない
アーキテクチャ的な話 • シーケンスデータの永続化はFirebase • いつ誰が開いても同じ音符を共有 • カーソル位置に音符があれば AudioContext.createOscillatorが発声
開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間
開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間
日頃から 作っててよかった
フレーム制御 • Angular 2でゲームを制作していた • 永遠に完成しない • フレーム制御と時間軸が必要 • ゲームマスターとなるクロックジェネレータを開発
クロックジェネレータ export class FrameService { constructor() { this.startTime =
window.performance.now(); this.subject = new Subject(); } run(bpm) { let fps = 1 / (60 / bpm / 4); let loop = () => { requestAnimationFrame(loop); const lastTime = window.performance.now(); const frame = ~~((lastTime - this.startTime) / (1000.0 / fps)); this.subject.next(frame); }; loop(); } get observable() { return this.subject; } }
いや…動くけど…
rAFでのクロック制御 • 16分音符レベルで間引いたとはいえ 計算量がかなり多そう • Web Audioのクロック制御のためのAPIじゃない
つらい • テンポチェンジを実装しようとしたら
つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか
つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで
つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで • ジッター発生して超つらい
質問タイム
質問タイム こっちから
Web Audioでの クロック制御の プラクティス教えて!
ありがとうございました