音を鳴らす
JavaScriptで音を鳴らすことができます。ご自分の耳が何Hzまで聞こえるか試してみてください（23000Hzまで聞こえたというかたがおられたので24000Hzまでに増やしてみました）。 1000 Hz Stop 4000 Hz 8000 Hz 10000 Hz 11000 Hz 12000 Hz 13000 Hz 14000 Hz 15000 Hz 16000 Hz 17000 Hz 18000 Hz 19000 Hz 20000 Hz 21000 Hz 22000 Hz 23000 Hz 24000 Hz 仕組みはソースを見てください。ほぼChatGPT 4oに書いてもらいました。最初はボタンの数が少なかったこともあってChatGPTはボタン一つ一つに id を付けていたのですが、ボタンの数が増えると厄介なので、this を使ってくださいと指示したら、こうなりました。
音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
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
neume.js - library for web audio programming - 音の鳴るブログ
またか。と言われてしまいそうだけど、またウェブ楽器プログラミング用のライブラリを作った。 以前に timbre.js というライブラリを作ったのだけど、それの刷新版という感じです。 デモ ドキュメント 名前の由来 特徴1: 機能性よりパフォーマンスを重視 以前は多くの動作環境をサポートするためにすべての信号処理を JavaScript で書いていたのですが、それゆえにパフォーマンスに問題があって(Issueでよく指摘された)、neume.js では IE や node.js での動作を諦めて Web Audio API の機能を大活用することでパフォーマンス問題を解決しました。デモでは three.js や gretro と一緒に動作する様子が確認できます。 特徴2: Web Audio API の面倒な部分を抽象化 Web Audio API は多機能なんだけど、部品が細かすぎて使いこな
WebベースのDAWソフトウェアWAVEPOT、ささやかにデビュー
90年代に登場し、音楽制作の方法を劇的に変えたDAW（デジタル・オーディオ・ワークステーション）ソフトウェア。Logic、Cubase、ProTools、Ableton Live、 StudioOne、 Bitwig、、今となっては数多くのDAWソフトウェアが存在しますが、将来、これらのようなDAW ソフトウェアはWeb化され、ユーザーはインターネットでサイトにアクセスするだけで音楽制作を行なうことができるようになるなんていう予想図を描いている人たちがいるようなのです。 ささやかにデビューしたばかりのWAVEPOTもそのうちの一つで、JavaScript を使ったシンプルなソフトウェアです。 まず、このサイトにアクセスしてみると何やら難しそうなコードの羅列が目につき、これまでのDAWソフトウェアとは様子が違う様子が目に入ります。ここで逃げたくなってしまう気持ちも多々あるわけですが、まずは右
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の
ブラウザ音響プログラミング言語 CoffeeCollider v0.1.0 リリース - 音の鳴るブログ
「CoffeeScript を SuperCollider みたいに処理をしよう ♪♪」をコンセプトに開発していたブラウザ音響プログラミング言語 CoffeeCollider をリリースしました。音響プログラミング言語ということで、とにかく試して聞いてもらうのが手っ取り早い。以下のリンク先で "BOOT" と "RUN" すれば深夜っぽい音が鳴ります。 CoffeeCollider で、なんなの？ SuperColliderってなんだ？という人には 言語 & ライブラリ & 実行環境 という意味で processing.js の音楽版と言った方が分かり良いかもしれない。とにかく音がでる。音しかでない。とにかく音を出してほしいという気持ちで作った。最初はいい加減な気持ちでやっていたのだけど途中から結構がんばりだして、最終的にはカレーを食べにいく趣味ができました。 CoffeeScript拡張
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周年に加えテクニカルグ
あたらしい timbre.js - サウンドプログラミング用のJavaScriptライブラリ - 音の鳴るブログ
新しく書き直した。 以前のバージョンと全然互換性がなくて申し訳ないのだけど、可読性とかかなり使い勝手が良くなっていると思います。ライブラリ自体のコードも分かりやすくなっているはず。 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
三つ子の魂百まで？ Webシンセを作りたい！
三つ子の魂百まで？ HTML5 + JavaScript でWebシンセを作りたい！ 今年（2012 年）の初夏ごろから、WebAudioSynth や、WebModular など、HTML5 + JavaScript で作られたソフトシンセが次々と登場してびっくりさせられました。Web ブラウザ上でさくさく動く手軽さと、それでもしっかりした音が出る実用性に二度びっくり。その後すぐに発表された、WebMidiLink で Web シンセ達が連携して動く！と、三度もびっくりさせられました。 そんな勢いに触発されて、私も Web Audio API を使ったシンセを作り始めました。最初はスライダーと、鍵盤代わりの四角い画像が一つだけという、シンプルな UI の 4 オペレータ FM シンセサイザーでした。 初期のプロトタイプ。4オペレータ分の ADSR + Ratioと、鍵盤代わりの四角い画像
VSTプラグイン作家のためのWeb Audio API入門 〜 adelayの作成 - aike’s blog
全国100人くらいのVSTプラグイン作家の方こんばんは。今日は皆さんおなじみのadelayのウェブブラウザバージョンを作ってみたいと思います。最近のウェブブラウザはAudio APIが急速に充実してきて簡単に音声信号処理ができるようになってきました。 adelayといえばVST 2.X SDKのサンプルコードとして大変なじみ深く、こんなシンプルなコードであのディレイが作れてしまうのかというインパクトもあり、プラグイン作家であればアルゴリズムをそらで暗唱できるくらい体に染み付いているかと思います。（←大げさ） 一方、Web Audio APIで用意されているDelayNodeは単に入力信号を遅延させて再生するものでDry/Wetのバランス設定やFeedbackもありません。ディレイプログラムはGainNodeなどと組み合わせて作ることが想定されているものと思いますが入門者が学習するにはちょっ
サウンドプログラミング用の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ライブラリをつくっている
永久にバッハのインベンションを演奏するやつをつくった - つまみ食う
Endless Invention http://mohayonao.herokuapp.com/invention 何かを自動生成するようなプログラムを書くときマルコフ連鎖を使いたくなることは多いと思う。で、それ自体はそんなに難しくないんだけど、大体微妙な感じに仕上がってしまうので、なかったことにしてしまうことが多い。でも今回は諦めずに調整して比較的うまくいった。 工夫したところ 八分音符は十六分音符ふたつといった具合に音の長さをいったん揃えている ラが鳴っているときはミが鳴っていることが多いみたいな、二声がどう重なっているかも調べた。先の音長の正規化を行っているので簡単だった。 正規化を行っているため、頻繁に同じ音の繰り返しが発生する。同じ音が続いたら無視する？ベロシティ下げてMIDIディレイっぽくする？今回は後者 ファミコンっぽい音 半分現実で半分夢みたいな雰囲気を出すためにエフェク
FL StudioとJavaScriptでサウンドプログラミング - aike’s blog
FL Studioにはオーディオ編集ツールとして評判の高いEdisonが付属しています。VST版も販売されているので単品で購入すれば他社のDAWでも使用できるようです。 あまり知られていないことですがEdisonはプラグインを読み込んでオーディオ編集機能を拡張することができます。さらに知られていないことですが、このプラグインはスクリプト言語を使って簡単に書くことができます。スクリプト言語としてはPascal、Basicの他にみんな大好きJavaScriptも使えます。 そんなわけで今回はJavaScriptを使って簡単なサウンド加工プラグインを作ってみます。 ■編集ツールプラグインのメリット DTMのプラグインというとVST Effectのようなものがよく使われますが、VSTはリアルタイムで音を加工するためにプログラミング上非常に厳しい時間的制約があり、あまり重い処理はできません。また、1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Music Lab
Web Audio APIでMIDIファイル再生
Garmoshka
http://codebase.es/riffwave/
Tibersynth Makes Crazy Sounds in Your Browser, Free - CDM Create Digital Music