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
4
2.2k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
150
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
33
9.8k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.1k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.3k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.6k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
610
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
6.1k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
980
Other Decks in Programming
See All in Programming
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
220
API Platform for Laravel
dunglas
1
420
今インフラ技術をイチから学び直すなら
yuhta28
1
140
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
640
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
340
How to Break into Reading Open Source
kaspth
2
220
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
2024 컴포즈 정원사
jisungbin
0
150
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
680
Featured
See All Featured
Side Projects
sachag
451
42k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Testing 201, or: Great Expectations
jmmastey
36
7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
The Invisible Side of Design
smashingmag
296
50k
Bash Introduction
62gerente
608
210k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
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での クロック制御の プラクティス教えて!
ありがとうございました