Thanks 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.
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
またか。と言われてしまいそうだけど、またウェブ楽器プログラミング用のライブラリを作った。 以前に timbre.js というライブラリを作ったのだけど、それの刷新版という感じです。 デモ ドキュメント 名前の由来 特徴1: 機能性よりパフォーマンスを重視 以前は多くの動作環境をサポートするためにすべての信号処理を JavaScript で書いていたのですが、それゆえにパフォーマンスに問題があって(Issueでよく指摘された)、neume.js では IE や node.js での動作を諦めて Web Audio API の機能を大活用することでパフォーマンス問題を解決しました。デモでは three.js や gretro と一緒に動作する様子が確認できます。 特徴2: Web Audio API の面倒な部分を抽象化 Web Audio API は多機能なんだけど、部品が細かすぎて使いこな
90年代に登場し、音楽制作の方法を劇的に変えたDAW(デジタル・オーディオ・ワークステーション)ソフトウェア。Logic、Cubase、ProTools、Ableton Live、 StudioOne、 Bitwig、、今となっては数多くのDAWソフトウェアが存在しますが、将来、これらのようなDAW ソフトウェアはWeb化され、ユーザーはインターネットでサイトにアクセスするだけで音楽制作を行なうことができるようになるなんていう予想図を描いている人たちがいるようなのです。 ささやかにデビューしたばかりのWAVEPOTもそのうちの一つで、JavaScript を使ったシンプルなソフトウェアです。 まず、このサイトにアクセスしてみると何やら難しそうなコードの羅列が目につき、これまでのDAWソフトウェアとは様子が違う様子が目に入ります。ここで逃げたくなってしまう気持ちも多々あるわけですが、まずは右
「CoffeeScript を SuperCollider みたいに処理をしよう ♪♪」をコンセプトに開発していたブラウザ音響プログラミング言語 CoffeeCollider をリリースしました。音響プログラミング言語ということで、とにかく試して聞いてもらうのが手っ取り早い。以下のリンク先で "BOOT" と "RUN" すれば深夜っぽい音が鳴ります。 CoffeeCollider で、なんなの? SuperColliderってなんだ?という人には 言語 & ライブラリ & 実行環境 という意味で processing.js の音楽版と言った方が分かり良いかもしれない。とにかく音がでる。音しかでない。とにかく音を出してほしいという気持ちで作った。最初はいい加減な気持ちでやっていたのだけど途中から結構がんばりだして、最終的にはカレーを食べにいく趣味ができました。 CoffeeScript拡張
新しく書き直した。 以前のバージョンと全然互換性がなくて申し訳ないのだけど、可読性とかかなり使い勝手が良くなっていると思います。ライブラリ自体のコードも分かりやすくなっているはず。 http://mohayonao.github.com/timbre.js/ Chrome, Safari, Firefox あと node.js で使えます。 あとついでに SuperCollider みたいな関数を集めたものも用意しました。 http://mohayonao.github.com/subcollider.js/ timbre.js と合わせてアルゴリズム的なものを作るのに使えます。 デモ どういうことができるのかは簡単なデモで確認できます。 http://mohayonao.github.com/timbre.js/beatbox.html http://mohayonao.github.c
全国100人くらいのVSTプラグイン作家の方こんばんは。今日は皆さんおなじみのadelayのウェブブラウザバージョンを作ってみたいと思います。最近のウェブブラウザはAudio APIが急速に充実してきて簡単に音声信号処理ができるようになってきました。 adelayといえばVST 2.X SDKのサンプルコードとして大変なじみ深く、こんなシンプルなコードであのディレイが作れてしまうのかというインパクトもあり、プラグイン作家であればアルゴリズムをそらで暗唱できるくらい体に染み付いているかと思います。(←大げさ) 一方、Web Audio APIで用意されているDelayNodeは単に入力信号を遅延させて再生するものでDry/Wetのバランス設定やFeedbackもありません。ディレイプログラムはGainNodeなどと組み合わせて作ることが想定されているものと思いますが入門者が学習するにはちょっ
とりあえず疲れた。リポジトリもめちゃくちゃだし。暴飲暴食もした。 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ライブラリをつくっている
Endless Invention http://mohayonao.herokuapp.com/invention 何かを自動生成するようなプログラムを書くときマルコフ連鎖を使いたくなることは多いと思う。で、それ自体はそんなに難しくないんだけど、大体微妙な感じに仕上がってしまうので、なかったことにしてしまうことが多い。でも今回は諦めずに調整して比較的うまくいった。 工夫したところ 八分音符は十六分音符ふたつといった具合に音の長さをいったん揃えている ラが鳴っているときはミが鳴っていることが多いみたいな、二声がどう重なっているかも調べた。先の音長の正規化を行っているので簡単だった。 正規化を行っているため、頻繁に同じ音の繰り返しが発生する。同じ音が続いたら無視する?ベロシティ下げてMIDIディレイっぽくする?今回は後者 ファミコンっぽい音 半分現実で半分夢みたいな雰囲気を出すためにエフェク
FL Studioにはオーディオ編集ツールとして評判の高いEdisonが付属しています。VST版も販売されているので単品で購入すれば他社のDAWでも使用できるようです。 あまり知られていないことですがEdisonはプラグインを読み込んでオーディオ編集機能を拡張することができます。さらに知られていないことですが、このプラグインはスクリプト言語を使って簡単に書くことができます。スクリプト言語としてはPascal、Basicの他にみんな大好きJavaScriptも使えます。 そんなわけで今回はJavaScriptを使って簡単なサウンド加工プラグインを作ってみます。 ■編集ツールプラグインのメリット DTMのプラグインというとVST Effectのようなものがよく使われますが、VSTはリアルタイムで音を加工するためにプログラミング上非常に厳しい時間的制約があり、あまり重い処理はできません。また、1
JavaScriptでチップチューン風サウンドエフェクトを生成するライブラリ : jsfx » 音楽コンテンツ(作曲/演奏) [編集] JavaScript でチップチューン風のシンセサウンド波形を生成して再生できる効果音ジェネレータライブラリ jsfx を紹介。 ソースファイルは GitHub で公開されています。 MIT ライセンスなので再利用・改変の際は著作権表示が必要。 HTML5 の Audio オブジェクトで WAV 形式の再生をサポートしているブラウザ(Firefox 3.6、Chrome 9、Safari 5 など)で実行可能です。 IE9 beta は HTML5 の Audio タグには対応していますが、JavaScript から Audio オブジェクトが生成できないため利用できません。(IE6~8 は HTML5 非対応なので利用不可) デモページ» デモはこちら
前のエントリでこんなことを書きました。 JavaScriptで波形データを読み書きすることができる。しかし再生するのは難しい。 HTML5のaudioタグとData URIを組み合わせればできないこともないが、コストが大きすぎる。 コストが大きいのは音声ファイルが大きいからです。50MBある波形をいちいち変換してられません。 でも小さい波形ならできるかもしれない! ということでやってみました。 基本的なアイディア 波形データをつくる(数値の配列) 波形をバイナリ列に変換する バイナリ列にWAVヘッダを付加する Base64エンコード audioタグのsrc属性に指定 audioを再生 つくったもの http://yanagiatool.appspot.com/jsaudio/mmltest.html シンプルなMMLプレイヤーです。JavaScript + HTML5。 ベロシティとかルー
JavaScriptで波形生成して音を出している人がいて,かっこよかったので,音が出るのを作ってみた. http://hitode909.appspot.com/wav/ リアルタイムに,audioタグで音を出して,canvasで波形が表示してる.死ぬほど重い. 加速度センサーを使えるときはノートパソコンを傾けるか,マウスを動かしたりすると,音程と音色が変わる. Firefox3.6でMacBookだと,ノートパソコンを傾けて遊べて,音もちゃんと出る.Safariだと音が変な感じになる.Google Chromeだと音が出なかった.デスクトップのときはマウスで音程とか変えられるようになってる. 参考 JavaScriptで波をつくろう。リアルタイム波形生成&再生 - Yanagi Entertainment この記事がすごく参考になった,というか,ソースコードはけっこうコピーしてきたりした
僕は JavaScript が好きだ。できるだけ多くのことを JavaScript で済ませてしまいたいと考えている。 以前は JavaScript では絵や音を扱うことができないという点がボトルネックになって,応用の幅を狭めていた。これが最近になると, Canvas 要素のおかげで絵を扱うことができるようになったり, Flash を代行役にすることによって音を出せるようになったりと,いろいろ状況が変わってきている。 そこで今回は,以前から機会があれば触ってみたいと思っていた Processing.js と SoundManager 2 を使って, JavaScript によるオーディオ&ビジュアルプログラミングに挑戦してみた。 Processing.js とは Processing.js は,ビジュアルデザイン向けプログラミング言語 Processing を模して作られた JavaScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く