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を使用するという決定をし
Webブラウザーから制御 MIDIでサーボを動かす
今回もマイコンボード「Arduino」を使う。前回はPC上のNodeからArduinoを制御したが、Webエンジニアとしては、Webブラウザーを使っていない点が心残りだった。そこで今回は、Webブラウザーから直接Arduinoを制御する方法に挑戦する。 その方法とは電子楽器の演奏データ交換の規格である「MIDI」を使うことだ。今回はW3Cで策定中のUSBで接続したMIDI機器を操作するためのAPI「Web MIDI API」を利用する。Web MIDI APIを使えば、USBケーブル経由で、MIDIプロトコルを使ってArduinoを制御できるはずだ。現在はWebブラウザーの「Chrome」と「Opera」でWeb MIDI APIが利用可能だ。 ただしWeb MIDI API経由でArduinoをWebブラウザーから制御するのは簡単ではない。ホストPCからArduinoを認識してもらうため
Web MIDI API による Web アプリと DAW の連携 - Qiita
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Web MIDI API Sample</title> </head> <body> <h1>Web MIDI API Sample</h1> <p> <label for="output_selector">MIDI Output Port: </label> <select name="output_selector" id="output_selector"></select> </p> <p> <button id="play_button">Play</button> </p> <script src="sample1.js"></script> </body> </html> 'use strict'; const outputSelect
進化するMIDI、国内楽器メーカーが共同で進めるWeb MIDIの標準化
最近、MIDIケーブルを利用する機会は少なくなったし、新しくDTMを始めたユーザーの中にはMIDIをまったく知らない人もいるかもしれません。でも、PCで音楽制作を行う上でMIDIは今でもベースとなっている規格であり、まさに縁の下の力持ち。「とはいえ、30年も前の規格でしょ」という方もいるかもしれませんが、実は今も着実に進化を続けているんですよ。 本来は競合であるヤマハ、ローランド、コルグといった楽器メーカーの技術者が定期的に集まって、MIDIの新しいあり方についての協議を行うとともに、海外との交渉なども行っているという事実をみなさんは知ってましたか!? 先日そのメーカーが集まっているAMEI(音楽電子事業協会)の「Web MIDIワーキンググループ」の会議にお邪魔して取材させてもらったので、最新の状況についてレポートしてみたいと思います。 ヤマハ、コルグ、ローランドの技術者が集まり、和気あ
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
橋本商会 » Arduino MicroをUSB MIDIデバイスにする
MIDIデバイスを自作し、ブラウザのWeb MIDI APIと通信した。 rkistner/arcoreを使ったら簡単にできた。 もともとLeonardo以降のATMega32U4を使っているArduinoはMPU内にUSB機能が内蔵されていて、その部分もプログラマブルなのでキーボードやマウスにしたりとかできる。 セットアップ % git clone git@github.com:rkistner/arcore.git % cd arcore/ % ./install.sh ~/Documents/Arduino/hardware/arcore にシンボリックリンクが貼られる。Arduino IDEを再起動するとターゲットボードが増えてるので選択する。 プログラムを書く analogReadでセンサーを読んでMIDI channel1にコントロールメッセージを送る。analogReadは1
橋本商会 » MIDIデバイスを演奏したらパスワードが入力されるChrome拡張を作った
最近のChromeはWeb MIDI APIといってMIDIキーボード等の楽器を接続し、その入力が取れる。 Chrome拡張でもそれは使える。 inputタグにフォーカスしている時に楽器からの入力をキャプチャして、パスワードを生成＆入力するChrome拡張を作ってみた。 https://github.com/shokai/webmidi-password-generator パスワードは覚えるのが難しいけど曲のフレーズとかなら覚えやすいだろ、多分・・という気持ちを形にした。 といっても見た目に派手な動きがあるわけじゃなくてUSBコネクタにMIDIデバイス刺して演奏したらいきなりinputタグにパスワードが入力されてる状態になるので、blogで説明は難しい。 こんな感じでMIDIメッセージを受信してパスワードっぽい文字列が生成される。2回演奏して、ちゃんと同じパスワードが出てる。 これの問題
社内イベントのシステムとWeb MIDI APIの話
お世話になっております。okuharaです。 先日、SJ-AWARD 2015という、一年に一度の社内イベントが開催されまして、 その中の余興の一つ、大喜利同好会による大喜利イベント「SJ OGR」のリアルタイム投票システムを実装しました。 ※SJ OGRの様子。オモシロ回答を考える回答者の皆さん。ブルーシートとスクリーンにDIY精神があふれています。 リアルタイム投票システム 各回答者の回答に対してオーディエンスが面白いと思ったらスマホ上のボタンを押しまくり、 回答者ごとに押された回数の集計がリアルタイムにスクリーンに表示されるものです。 HTMLとNode.js(socket.io)にて実装しました。 socket.ioの使い道としては、よくありがちな使い方だと思います。 特に特筆するポイントもなく実装完了したのですが、 司会者が回答者を切り替える時に物理的なボタンが使えると良いなーと
JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法 - Qiita
JavaScriptだけでMIDIで遊べる！最高に乱暴なWeb MIDI API利用方法 Web MIDI API / Web Audio APIを使ったハッカソンイベント「Web Music ハッカソン #3」が近づいていますので、ここでWeb MIDI APIの使い方を振り返ってみましょう。 はじめに断っておきますが、これは 乱暴者による乱暴者向けの記事です。 最低限の手間で、Web MIDI APIに対応してる気分を味わう までを目指します。 [2015/02/08 追記] さらに手間をかけたくないという超絶手抜きな人（ワシです）向けに、アホみたいなラッパー(poormidi.js)作りました。 使い方 良かったら使ってみてください。 ちゃんと勉強したい方は、下記リンクを見てください。 ちゃんと勉強したい方向けリンク集 Web MIDI API (W3C) Web MIDI APIの
ブラウザーだけでレコーディングできる時代がやってくる！
ブラウザーだけでレコーディングできる時代がやってくる！：ものになるモノ、ならないモノ（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 MIDI APIのラッパー - Qiita
2015.09.06 更新 Control Changeの送信やチャンネル指定が可能になりました。従来通り手抜きな使い方も相変わらずできますｗ また、Meteorのパッケージにも登録しました。tadfmac/poormidi という変更にあわせ、記事更新しました。 「ち〜ん」を公開して後に引けなくなったので、今までサボってたJavaScript側のコード見直しをはじめた。 とにかく、いろいろヒドくて先は長そうなのだが、手始めに簡単そうなMIDI周りを切り出してみた。 これを使えば、かなり簡単にWeb MIDI APIを触ってみることができると思う。 「ち〜ん」みたいな単純なことしか出来ないけどw リポジトリ poormidi Meteor Meteorパッケージ化しました。 下記コマンドでインストールできます。 $ meteor add tadfmac:poormidi 特長 Note O
Web MIDI API + WebSocket による遠隔演奏 - rinist.me
Web MIDI API と WebSocket を利用した遠隔 MIDI ライブ演奏のサンプルウェブアプリを作っています。イメージ図を次の通りです。WebSocket には Node.js の Socket.IO を利用しました。 クライアントがアプリと MIDI 楽器を繋ぎ演奏すると、同じアプリに繋がれた他のクライアントにも Node.js サーバーを通して、リアルタイムに MIDI メッセージが送られます。メッセージを受信した各クライアントは自身と接続された MIDI 楽器を鳴らします。複数クライアントが同時に演奏すれば、同時に情報が送られ、遠隔演奏セッションとなります。 サーバーコード app.js var fs = require('fs'); var http = require('http'); var midi = require('./sockets/midi'); va
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のテーマ曲を作成するデモンストレーション中心のセッションでした。本レポートと合わせて映像もぜひご覧ください！ このセッション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web & sound
Post by @sascacci-blog · 1 video
x-webmidi : Web MIDI API - Codelab
プラグインはブラウザで作る時代に!?ヤマハが開発したWeb Music PlatformとWeb Music DAW Connector
GitHub - yamaha-webmusic/webmusicplatform: Platform for creating Web Music
