音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
Webにおける表現はどんどん進化しています。Webサイトには当然のように動画が埋め込まれるようになり、CSSやSVG、canvasでのさまざまな表現が頻繁に見られるようになりました。さらにAR、VRといった表現も台頭し筆者も毎日ワクワクしながらインターネットの海を泳いでいます。 その中であまりメジャーではないと感じるのは「音」による表現です。もちろん音を用いた素晴らしいWebサイトはたくさんありますが、環境の制約が視覚表現以上に大きいため多くは見られないのでしょう。 とはいえ、音と視覚表現を組み合わせることによって表現できる世界観、インタラクション、その他諸々は計り知れないと筆者は思っています。今後オーディオなどの技術の進歩によって上記で述べた制約も乗り越えられるようになるかもしれません。時代を先どりしたい読者に向けて、今回の記事ではWebで音を扱う技術Web Audio APIについてお
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で行い、ビジュアラ
音を扱うJavaScriptライブラリや記事 - Qiita
Web Audio API を中心に音を扱うライブラリや記事をざっとまとめました。 サウンドファイルの再生に特化したやつ ゲーム用途とかならこのあたりで十分っぽい howler.js SoundJS 簡単に演奏できるやつ beeplay / 記事 メソッドチェーンで音をつなげていく abeck ABC記譜法 で書ける テンプレート的なやつ TemplateSynth / 記事 ポリシンセ用のテンプレート mml-emitter MMLをイベントとして発火する 信号処理するやつ Tone.js 必要な機能がひととおり揃っている tuna Web Audio API 用のエフェクター flocking 音の構造をJSONで書く。node.jsでも動く。 neume.js jQueryっぽく書けるインターフェースが特徴だけど色々雑い。 pico.js Web Audio API, flash f
AudioParam Viewer - 音の鳴るブログ
Web Audio API の AudioParam の値を可視化できるやつを作った。 AudioParam Viewer コードを書いて実行(eval)すると30秒分の値の遷移を記録してグラフ表示します。param というのが操作する AudioParam のインスタンスで、Ctrl+O か Ctrl+Space で操作関数を補完できます。 仕組み Web Audio API はリアルタイムでオーディオ処理をするためのAPIだと思われがちだけど、OfflineAudioContext というのを使えば静的なオーディオ処理もできます。以下は簡単な使い方。レンダリング用のインターフェースがあるだけで基本的には AudioContext と同じように使えます。これを使うと30秒の処理を一瞬で行うことができるので、それを使って常に 1 を出力する AudioBufferSource とパラメータ
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 は多機能なんだけど、部品が細かすぎて使いこな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
