Chrome Music LabThanks for checking out Chrome Music Lab. Unfortunately, your browser doesn’t support the technology that makes these experiments work. For the best experience,view it on Chrome.
JavaScript Systems Music
Learning Web Audio by Recreating The Works of Steve Reich and Brian Eno Systems music is an idea that explores the following question: What if we could, instead of making music, design systems that generate music for us? This idea has animated artists and composers for a long time and emerges in new forms whenever new technologies are adopted in music-making. In the 1960s and 70s there was a parti
Cycle.js / RxJS 入門してサンプラー作ってみた - マルシテイア
youtu.be http://gmork.in/cyro/ サンプラー。 キーボードを押したら音が増える。 [A-Z] : 音を入力 Shift + [A-Z] : そのキーの音をすべて削除 / : 設定パネルの表示 / 非表示 一応ソース fand/cyro · GitHub Cycle.js / RxJS の感想 Cycle.jsとは cycle.js.org Cycle.js は Unidirectional dataflow / Model-View-Intent を実現するWebフレームワーク。 RxJS 及び virtual-dom を使って書かれており、開発者もこれらを利用することになる。 作者の André Staltz 氏は Rx オジサンで、Rx に関するサイトを幾つか作ってる。 Flux や Elm, Famous のアーキテクチャを解説した記事は少しバズったので、
SoundJSを使って音を見えるものへ―CreateJS勉強会 - ICS MEDIA
ウェブ技術でサウンドを扱える技術「Web Audio API」。表現系の技術として、JavaScriptを使うことで、音に連動したビジュアライゼーションを作成できます。本記事では、Web Audio APIを使ったサウンドビジュアライザーの作り方を解説します。 まずは以下の2つのデモをご覧ください。 2Dデモ 別タブで再生する ソースコードを確認する 1つ目は2D版のデモです。Web Audio APIでフーリエ変換を行い、divタグのスタイルでビジュアライゼーションを作成しています。CSSのFlexboxを利用して水平方向にdivを並べています。コードがシンプルなので、Web Audio APIの使い方を理解したい方は参考にしてみてください。 3Dデモ 別タブで再生する ソースコードを確認する もう1つは、3D版のデモです。サウンドの解析部分をWeb Audio APIで行い、ビジュアラ
BMSをブラウザで遊べるWEBサービス『bmsjs』のα版を公開いたしました - undefined
概要 bmsjs(α版)というWEBサービスをリリースしました。 bmsjsはブラウザ上で動作するBMSプレイヤーとSNSの機能を持つWEBサービスです。 bmsjs.net BMS? 元々は、KONAMIの音楽ゲーム『beatmania』を模したシミュレータにあたる『BM98』用の譜面データフォーマットとして開発されたため、現在では同様のシミュレータ（BMSプレイヤー）に用いる譜面データ（曲データ）、あるいはゲームシステム全体を指す場合が多い。2000年代中盤頃までは、「ネットユーザーのPCには何かしらのBMSプレイヤーが入っている」と言われるほどの一大ムーブメントを巻き起こしていた。[要出典]現在はブームが沈静化しているものの、未だに新作BMS楽曲が作られるなどの根強い人気を保っている。かつてのBMS作曲家の中には、プロに転向した者や著名なボーカロイドプロデューサーも多い。 wikip
wavesurfer.js - HTML5で音楽の波形を表示 MOONGIFT
Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave
コード進行を五度圏で可視化してみた - 西尾泰和のはてなダイアリー
Songleの外部埋め込みプレイヤーがJavaScriptでカスタマイズできるので、それを利用して五度圏の可視化をするデモを作ってみました。 スピッツの「ロビンソン」 中島みゆきの「地上の星」 きゃりーぱみゅぱみゅの「ファッションモンスター」 ロビンソンはコードの動きがわりとおとなしいですね。一方ファッションモンスターはGm Fmを交互にピコピコ動いてダンスを見ているような楽しさが。 Songleは音楽の理解を支援するサービスで、楽曲からコード進行などの情報を抽出し、可視化したり、コード進行を強調して再生したりしてくれます。詳しくはSongleのサイトの解説をごらんください。外部埋め込みプレイヤーを使うと、JavaScriptからそのコードの情報が取れるようになるので、以前から興味のあった五度圏での可視化を試してみました。100行未満のソースコードで実現できてとても手軽でした。このデモのソ
Web MIDI API Wrapper 公開したよ^^ (1)
2013年7月1日にChrome CanaryにMIDI InputがやってきたWeb MIDI API。そろそろOutputも来るはずですが、今のところ Jazz-Plugin をインストールして Web MIDI API Shim を使って動かします^^ でも「MIDIって難しいんでしょ？」という声が聞こえて聞こえてきそうなので、聞こえてくる前にWrapperなるものを作ってみました。 Web MIDI API Wrapper Wrapperの話に入る前に「MIDIってなんぞ？」ってところを少し書きます。一言で言うと「メーカの枠を超え、電子楽器と電子楽器を接続する為のプロトコル」なんです。歴史は30年前のNAMM Show(National Association of Music Merchants Show)という楽器の見本市でお披露目され(今年はちょうど30周年に加えテクニカルグ
Paudio’s Blog – Protecting Brits from Scams
Putting your money online is no longer optional. From digital banking to online shopping and to entertainment, trusting websites with your personal and financial information has become a part of everyday life. However, with cybercrime steadily increasing in Canada, choosing the right websites has never been more important! In the first half of 2024, Canadians reported over 15,000 fraud incidents a
HTML5ゲームやWebアプリケーションで使える音楽制御ライブラリ·YAAK.js MOONGIFT
YAAK.jsはHTML5ゲームなどで使える音楽制御ライブラリです。再生や停止、ミュートなどを行えます。 WebアプリケーションやHTML5ゲームでサウンドを奏でたいと思うならYAAK.jsを使ってみましょう。YAAK.jsはHTML5ゲームで使われている音楽ライブラリ部分を抜き出したソフトウェアになります。 デモです。 左上のウィンドウで音量の調整ができます。 ミュートも選べます。 主な機能はオーディオのロードとキャッシュ、ミュート、ループとプレイバック、サウンドチャンネルのサポート、ボリューム調整、音楽の再生および停止になります。オーディオファイルとしてはMP3/OGG/WAVがサポートされています。 YAAK.jsはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 音楽はゲームを楽しむ上で欠かせない要素です。単純にMP3フ
Webシンセ同士で同期演奏しようぜ！ - aike’s blog
僕と同じようにブラウザで動くシンセを開発しているg200kgさんがすごい技術を考案しました。 お客様の中にWebシンセプログラマはいらっしゃいませんか | g200kg Music & Software どういうことかというと、HTML5のpostMessageで簡易的なMIDIメッセージをクロスドメインで送ってWebシンセ同士で同期させるというものです。シンセ側は以下のようなわずか数十行のJavaScriptを追加するだけでスレーブとして制御してもらえちゃいます。 http://aikelab.net/websynth/websynth_message.js 動画をとったのでまずは見てみてください。g200kgさんのサイトから、僕のWebAudioSynthとg200kgさんのWebModularを制御して同期演奏しています。 すごい時代になった……。 Google API Expert
JavaScriptでリズムシーケンサーを書いた - 音の鳴るブログ
JavaScriptでつくっているサウンドプログラミング用のライブラリ（ timbre ）にいくつかオブジェクトを追加してリズムシーケンサーを書いた。リズムシーケンサーが書けるようになったというよりは、リズムシーケンサーを作るために必要なオブジェクト（タイマーとフィルター）を追加した。あと、インターフェイスを修正したりして最初のデモも読みやすくなったと思う。 001. oscillators http://mohayonao.github.com/timbre/examples/001_oscillators.html 002. rhythm sequencer http://mohayonao.github.com/timbre/examples/002_rhythmsequencer.html このライブラリの最初のアイデアはS式風に音楽を記述するっていうものだったのだけど、昨日の記事
サウンドプログラミング用のJavaScriptライブラリができた！！！！ - 音の鳴るブログ
とりあえず疲れた。リポジトリもめちゃくちゃだし。暴飲暴食もした。 timbre - JavaScript Library for Objective Sound Programming http://mohayonao.github.com/timbre/ 新しいデモもつくった http://mohayonao.github.com/timbre/examples/004_timbresynth.html ライブラリにはUIついていないけど、デモのときは分かりやすいのでわざわざ書いた。バッハとJavaScriptは相性が良いとおもう。JSだけに。 そういえば、前につくった これ もバッハだった。 関連エントリ サウンドプログラミング用のJavaScriptライブラリをつくっている
踊るJavaScriptがPerfume - 音の鳴るブログ
http://mohayonao.herokuapp.com/perfume1 http://mohayonao.herokuapp.com/perfume2 (Web Audio API / Audio Data API連携バージョン) http://www.perfume-global.com で、Perfumeのモーションデータが配られているので、とりあえずJavaScriptで踊らせてみた。 3Dの処理は Three.js でやっているし、GitHubのFLASHのやつをベースにJavaScriptにするだけなので、よく分かっていなくてもできる。 Three.js -> https://github.com/mrdoob/three.js/ perfume-dev -> https://github.com/perfume-dev ただ、Flashの Matrix3D.append
永久にバッハのインベンションを演奏するやつをつくった - つまみ食う
Endless Invention http://mohayonao.herokuapp.com/invention 何かを自動生成するようなプログラムを書くときマルコフ連鎖を使いたくなることは多いと思う。で、それ自体はそんなに難しくないんだけど、大体微妙な感じに仕上がってしまうので、なかったことにしてしまうことが多い。でも今回は諦めずに調整して比較的うまくいった。 工夫したところ 八分音符は十六分音符ふたつといった具合に音の長さをいったん揃えている ラが鳴っているときはミが鳴っていることが多いみたいな、二声がどう重なっているかも調べた。先の音長の正規化を行っているので簡単だった。 正規化を行っているため、頻繁に同じ音の繰り返しが発生する。同じ音が続いたら無視する？ベロシティ下げてMIDIディレイっぽくする？今回は後者 ファミコンっぽい音 半分現実で半分夢みたいな雰囲気を出すためにエフェク
Baroque.me [Javascript, Sound]
Baroque.me by Alexander Chen visualizes the first Prelude from Bach’s Cello Suites by drawing notes as strings. Instead of a stream of classical notation on a page, this interactive project highlights the music’s underlying structure and subtle shifts. I created eight strings, as the Prelude’s natural phrasing is in groups of eight notes. The orbiting nodes pluck the strings, like a rotating music
![Baroque.me [Javascript, Sound]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5e2966287dcfea1575cfd25bdf9af141fa930e73/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fwww.creativeapplications.net%2Fwp-content%2Fuploads%2F2011%2F10%2FBaroque.me01x.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ian Hansen - RxJS for Metrics and Music
VJing with Web MIDI and RxJS
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
1ビット音楽 - 音の鳴るブログ
