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を使用するという決定をし
WebMusicハッカソンで使えそうな俺俺ライブラリ 5選 - 音の鳴るブログ
7月25日に WebMusicハッカソン #4 @kyoto というのがあるのですが、ちょうど良い機会なので僕が作ったウェブ音楽用簡単超絶便利ライブラリを紹介したいと思います。 WEB AUDIO SCHEDULER 2 つの時計のお話 - Web Audio の正確なスケジューリングについて - HTML5 Rocks Web Audio で必須な割に難しいのがスケジュール管理で、いちおう上の記事のやり方が推奨なのですが、そのままやるとかなり面倒くさい。のだけど、このライブラリを使うと面倒な部分は気にせず、いつ何をしたいのかを書くだけで良くなる。以下は簡単なメトロノームの例。 var gcguard = []; var audioContext = new AudioContext(); var scheduler = new WebAudioScheduler({ context: a
ブラウザーだけでレコーディングできる時代がやってくる！
ブラウザーだけでレコーディングできる時代がやってくる！：ものになるモノ、ならないモノ（65）（1/2 ページ） 1983年に生まれ、30余年の時を経た今なお、楽器分野はもちろん着メロや通信カラオケなど、音楽に関係するビジネスの第一線で活躍している「MIDI」規格。この古い規格をGoogle Chromeがサポートしたという。いったいどうしてなのか、これで何ができるのかを探ってみた。 連載目次 アップルが伝説のCM「1984」とともに初代のMacintoshをデビューさせる一年前の1983年1月、世界最大の楽器ショー「NAMM Show」でMIDI（Musical Instrument Digital Interface）規格の初お披露目が行われた。メーカーが異なる二台のシンセサイザーをケーブル接続し、演奏信号をデジタルデータで送受信する様子は、電子楽器における歴史の一里塚として記憶されてい
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！
【Web Audio API + Web MIDI API】ブラウザで電子楽器を作ってみよう！ 河合良哉 ブラウザ上で音を扱うというと、直接音を加工できるWeb Audio API、ブラウザから直接MIDIデバイスと接続できるWeb MIDI APIの2つがここ数年の間に利用可能になり、実際のWebサイトでも使われるようになりました。 今回は「ハンズオンだともっとよかった」というお声をいただきましたHTML5 Conference 2015での講演内容を元に、2つのAPIの説明と、実際にブラウザ上に電子楽器の1つであるシンセサイザーを作ってしまうという記事です。 記事中のサンプルはGitHubに公開していますので、そちらも合わせてご参照ください。 利用するAPIの説明
プラグインはブラウザで作る時代に!?ヤマハが開発したWeb Music PlatformとWeb Music DAW Connector｜DTMステーション
エフェクトやソフトシンセなのどのプラグイン。普通はDAWの中に入っていたり、パッケージソフトを購入したり、オンライン上のフリーウェアやシェアウェアなどをダウンロードして使いますよね。でも、そのプラグインをユーザー自身が好きなものを簡単に作って使う時代がやってきそうです。 といっても、プログラムの知識なんて基本的に不要です。しかも、そのオリジナルのプラグインはWebブラウザを使って作れる……というのです。「ブラウザでプラグインって、あまりにも無関係で意味不明！」と思ってしまう人も多いと思いますが、実はそんな不思議な世界が、もう目の前にやってきているんですよ。 CubaseのプラグインにChromeで作ったシステムを利用する!? そんな不思議なツールが公開されたのは、9月13日に東京・六本木にあるGoogle東京オフィスで行われた第3回目となるWeb Musicハッカソンです。第2回目について
Web Audio Demos
The Web Audio Playground helps developers visualize how the graph nodes in the Web Audio API work. Shown at I/O 2012.
Web上で一緒に音楽を作ろう！オンラインスタジオ「Soundtrap」で音楽制作
Web上で一緒に音楽を作ろう！オンラインスタジオ「Soundtrap」で音楽制作 河合良哉 概要 Google I/O 2014のセッションの1つ「Making music mobile with the Web」のレポート記事です。Officialに公開されているYouTubeはこちらです。 OpenWeb 技術であるWebRTC、Web Audio APIは一度は耳にしたことのあると思います。この2つの技術、そして標準化が始まったばかりのWeb MIDI API（電子楽器とブラウザを直接接続するAPI）を利用した音楽制作アプリケーション「Soundtrap」。これらを使って、実際にセッションのオーディエンス、遠隔地の人とコラボレーションをして、Google I/Oのテーマ曲を作成するデモンストレーション中心のセッションでした。本レポートと合わせて映像もぜひご覧ください！ このセッション
Google I/O 2014 - Making music mobile with the Web
Speaker(s): Justin Uberti Description: Join us as we record, live and onstage, a custom "Theme for I/O" song using the mobile web. With WebRTC, Web Audio, Dart, and Chrome for Android, Soundtrap built a collaborative music authoring system. We'll show you how to add real-time communication and audio to your mobile web app. Watch all Google I/O 2014 videos at: g.co/io14videos
ハロウィーンということでHTML5で動くパーティー用のVJツールを作ってみました
Tweet2013 - 10 - 27 Happy Halloween VJもうすぐハロウィーンですね。 みなさんは、ハロウィーンパーティーなどに繰り出して、パーティーを盛り上げていることだと思いますが、ハッカーのはしくれは技術でハロウィーンを盛り上げます。 というわけで、ハロウィーンのパーティーとかで使えるVJツールを作ってみました。 Happy Halloween VJ » http://halloween.ryooopan.com スクリーンショットはこんな感じ。 ブラウザは今のところChromeをサポートしています。（他のブラウザだとうまく動かないかも） マイクをONにすると、周りの音を拾ってきていい感じにエフェクトがかかる感じになっています。 特にパーティー会場でプロジェクターとかで写すといい感じです。 HTML5 + Canvas実装はすべてHTML5で書いてます。 ちなみに画
: : : サスカッチ : : :
* HTML5 Lab ：：Web Audio API, Web MIDI API, WebRTC, canvas ：：：Only Available in Google Chrome HTML5 を使った実験のページです。 主に WebAudioAPI, WebMIDIAPI, WebRTC, canvas を使っています。 Chrome（Mac/PC 版）でしか動作確認していません。 [ Home ] <<< SasVJ >>> SasVJ はブラウザ上で簡単に VJ が出来るウェブ・アプリです。 ：：：How to：：： １、Google Chrome をお持ちでない方はインストール。www.google.com/chrome ２、Chrome で"ここ"にアクセス。 ３、キーボードを押して、映像に変化をつけてみましょう。 ※ Chrome は [shift]+[command]+[
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web & sound
Takashi Mori x Masakazu Watanabe
GitHub - yamaha-webmusic/webmusicplatform: Platform for creating Web Music
React App
Guitar Stompbox in Your Browser? Web Audio Adds Line In, iPhone Support, More - CDM Create Digital Music