Reactでシンセサイザーを作った話 - Speee DEVELOPER BLOG

こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし

[asonas]

たまたまMIDIキー持ち歩いてておもむろに繋いだら普通に演奏できて最高だった。

[hemispherwhistle]

react シンセサイザー

[sionsou]

Speee転職先候補にあったけどこういうすごいエンジニアいるなら遊びにいってみたいなぁと思う

[georgew]

Web MIDI/Audio API すごい。ブラウザーがシンセに化けるとはなんという時代に生きてるのだろう。SoundtrapはすでにこのAPI使ってた記憶。

[NoMoTo]

写経してみようかな。

[nantan]

すんごい

[device_me]

すばらしい

[exadit]

面白いことする人がいたもんだなあ。

[june29]

強い…！

[nekosann_08]

訪ねてみたら思った以上に本格的で感動した。好きなんやなぁ。

[phonoscopia]

名前が最高

[non_117]

すごい / コード見たところ、Componentに書かれたロジックをちゃんとStateとかmodelに押し込んだらテストしやすくなりそうに思われました。

[todesking]

えっすごい、React使ってこんな低遅延で音出せるんだ

[programmablekinoko]

なぜreact勢はこうもガチなのか

[sho_yamane]

すげー！

[fujiriko59]

しゅごい

[shuitic]

すげぇ

[field_combat]

確かにシンセはモジュール単位でバラしやすくていい。自分で作りたくなるいいお題だ

[mongrelP]

vstでくれ(ぉぃ

[oooooo4150]

ふぁぁぁ

[politru]

なるほど。このまま発展していって、第二のsynth oneになるんですね。待ってます

[y-kawaz]

凄い！／凄くどうでも良いかもしれないバグ発見。他はそんなこと無いっぽいんだけどOscillatorだけ、キー（Aとか）押しっぱでクリックして選択変えてもラジオボタンのチェック表示だけ変わるものの音に反映されない。

[iR3]

凄っ！ 楽しそう

[karatte]

これは素晴らしい……！

[m4fg]

reactorではなかった

[miyachik]

Analyzerとかしっかりしててすごくすごい

[yt-tanabe]

音が出ます

[michiomochi]

すごい...

[hatappi1225]

Reactで作ったREACT

[ihara2525]

音を出したかったんやな