LT slide for http://webaudiotokyo.connpass.com/event/37386/

1. ループ（中略）DJアプリの紹介
Takashi Toyoshima <toyoshim@gmail.org>
Twitter: @toyoshim

2. @toyoshim
❏ Chromium Project Committer: toyoshim@chromium.org
❏ WebSocket
❏ WebKit 実装／Pepper API デザイン・実装
❏ Web MIDI API
❏ 仕様策定・実装
❏ Chrome Translate
❏ いろいろ
❏ ARC: App Runtime for Chrome
❏ ARTのNaCl移植など
❏ WebFonts
❏ Blink統合まわりで少しだけお手伝い
❏ 読み込み最適化
❏ Fontのロード待ちtimeoutの最適化
❏ Reloadの再デザイン

3. @toyoshim before Google
❏ ASAHIネット
❏ インフラ・システム開発
❏ サインアップツールASACOTの設計・開発
❏ フリーランス
❏ でじこミュニケーション１・２ ミニゲーム担当（ブロッコリー /M2）
❏ サウンドエンジン提供
❏ SEGA AGES ~10タイトル（SEGA/M2）
❏ ツインビー・ポータブル（ Konami/M2）
❏ 沙羅曼蛇・ポータブル（ Konami/M2）
❏ Wii - Virtual Console（Nintendo/SEGA/M2）
❏ 富士通研究所／次世代TC開発本部
❏ スーパーコンピュータ「京」インターコネクト LSI開発チーム・コアリーダー

4. デモ
もねもねもねね もねもねね
（キーボード1234567890-^で操作）
https://github.com/toyoshim/monemone
https://mone.herokuapp.com/

5. やってる事
自前のAudioContext+で拡張したAudioNodeを接続して実現
AudioBufferPlaybackNode
AudioDestinationNode
phaseOffset
LoopMakerNode

6. phaseOffsetの操作で楽々DJプレイ

7. コード的にはこれだけ
const context = new AudioContext();
context.loadAudioData('data/Loop1.mp3').then(buffer => {
const playback = context.createBufferPlayback();
playback.buffer = buffer;
const maker = context.createLoopMaker(buffer.length);
maker.data = [
{ time: 5 / 16, offset: -1 / 16 },
{ time: 6 / 16, offset: -2 / 16 },
{ time: 7 / 16, offset: -3 / 16 },
{ time: 8 / 16, offset: 0 / 16 },
{ time: 14 / 16, offset: 0 / 16 },
{ time: 16 / 16, offset: -1 / 16, mode: 'line' }
];
maker.connect(playback.phaseOffset);
playback.connect(context.destination);
playback.start();
});

8. AudioContext+
https://github.com/toyoshim/AudioContextPlus
Web Audioに欲しい機能を実証する場
- AudioParam phase(Offset)
- MIDIOutputAudioNode
- CustomeNode
良さそうならWG/仕様にフィードバック