Libx Awesomeリスト

    このページの内容

    Awesome Audio Visualization

    Audio Visualizationを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    書籍

    ダウンロード

    実験

    • Master Pro Audio Analyzer Suite - 100％プライベート、クライアントサイドのWeb Audioアナライザー。8192点FFTスペクトログラム、RTA、フェーズスコープを備えたもの

    • Audible Visuals - Sonia Bollerによる、アルキメデスの螺旋から派生したビジュアライザー集。

    • React Player - ReactJSを使用した完全なオーディオ可視化プレイヤー

    • Moire - Web Audio / WebGLによる可視化

    • Finding Love - 感情を芸術に変換する、完全にインタラクティブな仮想現実ストーリー

    • Tangled - ベルリンのネットレーベルYarn Audioによるオーディオビジュアル作品。映像は cables で制作され、ドラッグで回転、スクロールでズームできます。

    • Luis Henrique Bizarro Portfolio - Three.jsとGLSLを用いた実験のポートフォリオ。

    • Adventure Machine - マードンの『Adventure』アルバムのキャンペーン

    • BBNG - BADBADNOTGOODの『Confessions』（Leland Whitty feat.）のWebGL可視化

    • Chrome Music Lab - シンプルな実験を楽しんで、音楽の仕組みを探索

    • DENNIS - popcorn_10’sの『Dennis』のインタラクティブかつオーディオ反応型ミュージックビデオ

    • Fluctus - ジョーダン・マチャドの実験的な3Dオーディオ可視化ツール

    • George & Jonathan III - ジョージ＆ジョナサンの『III』アルバムのキャンペーン

    • Lantern - SBTRKTの『Lantern』のWebGL可視化

    • Lines - シルビオ・パガンニーニによるジョイディビジョンのアルバムカバーを音のスペクトルに変換した可視化

    • Nero - Neroの『In The Way』のWebGL可視化

    • Pareidolia - Venetian Snaresの『Szerencsétlen』のWebGL可視化

    • Splice - Spliceの次期可視化APIから取得したタイムコードデータを用いたリアルタイムインタラクティブ音楽可視化ツール

    • Typatone - 書くとき、音楽を作りながら

    • Yume - ヘルiosの『Yume』アルバムに対するキャンペーン

    • Silk - マット・デスライアーズによる3Dオーディオビジュアライザー

    • Wave - マット・デスライアーズによる3Dオーディオビジュアライザー

    • Binaural - マット・デスライアーズによるバイナーラルとリバース効果を使った実験

    • Word Problems - ハーモニック313による『Word Problems』のWebGLビジュアライザー

    • Glitch - 数学から音楽を生成するアルゴリズム合成器

    • 105 Birthday Clara Rockmore - クララ・ロックマーアの誕生日を祝うドローアート

    • Fireworks with WebGL - オンドレj・ザラによる音を駆動した花火

    • Glowsynth - just amazing! - マウスやQwertyキーボード、またはMIDIキーボードを使って操作し、光があなたの音楽に合わせて踊る

    • Mmorph - ブラウザ内でのインタラクティブ音楽の新しい配信方法への冒険

      • Multitrack Audio Visualizer - リアルタイムオーディオ／音楽ビジュアライザー。複数トラックの波形を表示し、カスタマイズ可能な色で表示可能で、高品質のMP4/H.265動画をエクスポート可能

    • Loop Waveform Visualizer - ベイタハによるScrew BaseのWebGLビジュアライザー

    • Scrollsound - Ehsan Ziyaによるウェブ上の音に対するスクロールによるインタラクション法

    • Experiment #8 - ブルノ・イムブリジによる音楽実験

    • Music Cube - ロールドTR-808ドラムマシンとキューブの組み合わせをしたChrome実験

    • Music Game - ECHO - 難易度の高い音楽パズルゲーム

    • Patatap - 持ち運び可能なアニメーションと音声キット

    • Plink - Awesome Multiplayer Game - マルチプレイヤー音楽体験

    • Soundcloud Visualizer - キャンバスとウェブオーディオによる実験

    • CSS Visualizer - DOM要素とCSS3のみで構成された音楽ビジュアライザー

    • Kandinski Experiment - カンディンスキーにインスパイアされた音楽ビジュアライゼーション

    • Visual Music Trailer - ライブ音声ビジュアリズムのアイデア

    • Draw and Music - サム・グリーンズによる新アルバム『Rugs』のキャンペーン

    • Moogfest Substrate - モーグフェスト用の実験的サイト

    • 3D Grid - rickycodesがHTML5ウェブオーディオAPIを使って作成したオーディオビジュアライザー

    • obsidian - Three.jsの開発者が作った3Dオーディオビジュアライゼーション

    • TRIF - Web Audio APIと素のCSSを使った、GIFベースのオンラインラジオビジュアライゼーション。

    • Audiograph - マット・デスラウリエが作った驚異的なオーディオビジュアライゼーション

    • Scribble Audio - このウェブシンセサイザーで音のループを描く

    • Touchpianist - ピアノを演奏し、画面全体のアニメーションを眺める

    • PartyMode - d3.jsとウェブオーディオAPIを使って作られた実験的音楽ビジュアライザー

    • DJi - SoundCloudからまたは自分でアップロードした音楽のクリーンなビジュアライザー

    • VR Ondes Martenot - 仮想現実で演奏可能なオンドス・マルテノのリプリケーション

    • Popcorn - ヒュー・ケニーニの小さなオーディオ反応スケッチ

    • Musical Interactions - 遊び心のある音楽インタラクションのいくつかの実験アイデア

    • ClubberToy いくつかのシェーダー・トゥイズ、クラブバーアプリケーションでリワイヤーされ、ビジュアルアプリとしてバンドル

    • Andantino いくつかの音を聞いて、キーボード上で同じ音を発見してみる

    • Vissonance THREE.jsで作られたオーディオビジュアライザーのコレクション

    • ShowCQTBar - 音楽スケールを使ったオーディオスペクトルビジュアライゼーション

    • Weekly Music Visualizations スゥレイヤ・シヴィジがThree.jsとp5.jsを使って行っている週間音楽ビジュアライゼーション実験

    • Audio Visualizer - Pixi.jsで構築された興味深いウェブオーディオビジュアライザー

    • YouTube Musical Spectrum - YouTubeページに美しい音符を表示するブラウザ拡張機能

    • Just Dance - BabylonJSと2次元Perlinノイズで作成された3Dオーディオビジュアライザー

    • audioMotion - 高解像度リアルタイムオーディオスペクトル分析器および機能豊かな音楽プレイヤー。JavaScriptで記述されており、Windows、Linux、macOS向けのバイナリも含まれています。

    • p5.js Audio Visualizer - Amanda Yehが作成したHTML5キャンバス上で、ビートと振幅に反応する強力なオーディオビジュアライザー。 p5.sound

    • Tap tempo and metronome with sound effects - カスタマイズ可能なサウンドエフェクトを備えたメトロノーム。1クリックでBPMを計算可能であり、MIDIデバイスとの同期もサポートしています。

    • osci-render - オシロスコープ上でオブジェクト、画像、Blenderシーンを可視化して音楽を作成するソフトウェア。

    • Nutilz Audio Waveform Generator - MP3、WAV、OGG、M4A、FLACファイルをアップロードし、Web Audio APIを使って即座にカスタマイズ可能な波形ビジュアライゼーション（バー、鏡対称バー、ライン）を生成。PNGとしてダウンロード可能。ブラウザ内での実行のみ。アップロード不要。

    • DjMirror Pulse - ライブDJセット向けのリアルタイムオーディオ反応ビジュアルとDMX照明制御を提供するスタンドアローンデスクトップアプリ。

    CodePen上の実験

    • SVG Animated Drum Kit - @iamjoshellisがSVGとリアルなサウンドで作成した素晴らしいドラムを再生。
    • SVG Animated Guitar - @iamjoshell及がSVGとリアルなサウンドで作成した素晴らしいギターアイテムを再生。
    • Audio Visualizer - Francesco TrilliniがThree.jsで開発した抽象的なオーディオビジュアライザー
    • Awesome Audio Player - Alex Permyakovが作成した、周波数と振幅の線で構成されたラジアルオーディオプレイヤー
    • Wireframes - Patrick HengがThree.jsで作成したワイヤーフレームWebGLアニメーション
    • Soundcloud Vinyl Search - Chris GannonがDrawSVGとGSAPを使って作成した、リアルなヴィンテージプレイヤーを再現した素晴らしい実験。
    • Gooey Effect Audio - Jeremy Karlssonが開発した、MP3をアップロードしてその曲をこのユニークな効果で可視化する機能。
    • CSS Audio Visualizer - Neil McCallionが、隠された動画から取得したオーディオ周波数データを使ってCSSスケーリングを適用。
    • Storytelling with Html5 + CSS3 - Rachel Naborsが音楽を使ってストーリーテリングを作成する素晴らしい例。
    • Step sequencer - Joe Harryが開発したシーケンサで音楽を作成。
    • WebGL Soundcloud Visualizer using Three.js - Luigi MannoniがHTML5 AudioContext APIを用いて開発したThreeJS/WebGL Soundcloudプレイヤー／ビジュアライザー。
    • Oscilator - HTML5 audio APIのオシレーターノードをAnej Gorkičがテストした
    • Cubes Audio Visualizer - 2015年のcodevember第10回の寄稿：Patrick Hengによる
    • P5 Audio Tests 33 - p5.jsの3D要素とSoundcloud APIを用いた音声可視化
    • P5 Audio Tests 27 - p5.jsの3D要素とSoundcloud APIを用いた音声可視化
    • CircleLineNERDDISCO - Tim Pietruskyによる驚異的なanalyserを用いた音声可視化
    • Clubberize yin yang example - clubberizeヘルパーを使って、JavaScriptアプリにclubber.jsを簡単に統合する例

    オーディオライブラリ

    • web-audio-analyser - Web Audio APIをラップした非常に軽量なライブラリで、
    • web-audio-player - クロスブラウザ対応のWeb Audioプレイヤー
    • web-media-playback - ブラウザ内で再生・バッファリング中の音声や動画に関する情報を取得
    • Pizzicato.js - Web Audio APIを使って音を生成・操作する方法を簡便に
    • ThreeAudio.js - Three.jsまたはtQueryで音楽可視化を作成するための支援
    • Beeplay.js - JavaScriptで楽曲を書く
    • MIDI.js - ウェブ上でMIDIアプリを作成しやすくする
    • Beep.js - ブラウザベースのシンセサイザーを構築するためのJavaScriptツールキット
    • p5.sound - ProcessingのアプローチをWeb Audioとp5.jsに適用
    • Audiolet - リアルタイム音声合成と構成を実現するJavaScriptライブラリ
    • coffee-collider - HTML5上でリアルタイム音声合成とアルゴリズム的構成を行うための言語
    • audio-render - 音声ストリームを通過させるストリーム、ストリーム音声データのレンダリング構造を提供
    • Octavian - 音符、周波数、間隔に関する論理的思考を支援するユーティリティ
    • waveform-data - 音波データ操作API – JavaScriptで音波データをリサンプリング、オフセット、セグメント化
    • audiowaveform - C++で波形データを生成し、オーディオファイルから波形画像をレンダリングするプログラム
    • Aubio - リアルタイムオーディオラベル付け用のCライブラリ。PythonおよびPDとのバインディング、ofxおよびVampとの対応をサポート
    • audio - オーディオデータの分析および/または処理に共通のインターフェースを定義するための汎用Goパッケージ
    • wav - 実証済みのWAVデコーダ/エンコーダ
    • standardized-audio-context - ウェブブラウザ間で共通化されたAudioContextの実装であり、標準に忠実に実装を試みている
    • web-audio-beat-detector - Web Audio APIを用いたビート検出ユーティリティ
    • meyda - JavaScriptでオーディオ特徴量を抽出

    可視化ライブラリ

    • p5.js - Processingの基本原則に基づくグラフィックおよびインタラクティブな体験を構築するJavaScriptライブラリ
    • Pixi.js - すべてのデバイスで動作する高速かつ軽量な2Dライブラリ。Pixiレンダラーにより、WebGLの知識なしでハードウェアアクセラレーションの力を体験できるようになる
    • sketch.js - シームレスなクリエイティブコーディングの楽しさに直結するように設計された、シェルムやボイラープレートコードを一切気にしなくてもよい環境
    • three.js - Three.jsはWebGLを使うことを簡単にするライブラリ
    • Two.js - 現代のウェブブラウド向けに設計された2次元描画API。レンダラーに依存せず、SVG、Canvas、WebGLのいずれのコンテキストでも同じAPIで描画が可能
    • BabylonJS - HTML5、WebGL、Web Audioを用いた3Dゲーム開発用の完全なJavaScriptフレームワーク
    • Web Audio Extension - Chrome拡張機能でWeb Audioを操作できるツール
    • Cinder - プロフェッショナルな品質のクリエイティブコーディングをC++で実現する、コミュニティ開発による無料かつオープンソースのライブラリ
    • Processing - 電子芸術、新メディアアート、視覚デザインコミュニティ向けに構築されたオープンソースプログラミング言語および統合開発環境
    • HYPE_processing - Processingクラスのコレクションで、極めて少ないコード量で重いタスクを実行
    • The Force - リアルタイムでオーディオ入力を受け取りながらシェーダーを編集
    • Hylogen - Haskellに埋め込まれた純粋関数型言語で、オーディオ入力に対応したフラグメントシェーダーの表現的なライブコーディングを実現
    • Peaks.js - ブラウザ内でオーディオ波形素材の表示およびインタラクションを実現するためのモジュラリティを持つクライアントサイドJavaScriptコンポーネント
    • Clubber.js - 音楽理論の応用による音響反応型視覚化
    • Vuo — インタラクティブメディア用のリアルタイム視覚プログラミング言語
    • wavesurfer.js - Web Audio APIおよびHTML5 Canvasに基づくカスタマイズ可能なオーディオ波形視覚化
    • wavebell - ウェブマイクロフォンを使用したリアルタイム波形を持つJavaScript音声録音機能
    • Circular Audio Wave - Web Audio APIおよびEChartsを用いた円形波形を用いた音響視覚化用JavaScriptライブラリ
    • Slang - JavaScriptで構築された音響プログラミング言語
    • audioMotion-analyzer - 依存関係のない高解像度リアルタイムオーディオスペクトル分析JavaScriptモジュール
    • Cava - クロスプラットフォームのターミナル視覚化
    • Muser - 機械学習を用いてブラウザ内の音楽視覚化を強化

    フォローすべき人

    • Varun Maurya - クラウド＆メディアシステムエンジニア、ソリューションアーキテクト、ハイブリッドAV/ITインフラ、ライブイベントおよびスタジオポストプロダクションオーディオエンジニア
    • Aaron Koblin - データおよびデジタルテクノロジーに特化したアーティスト、デザイナー、プログラマー、起業家
    • Joshua Davis - アメリカの新メディア分野のデザイナー、技術者、著者、アーティスト
    • Robert Hodgin - ブロoklynに住むクリエイティブコーダー。Cinder C++の共同開発者
    • Seb Lee-Delisle - 賞を受賞したデジタルアーティストおよびスピーカー
    • Raven Kwok - 視覚アーティスト、アニメーター、クリエイティブプログラマー
    • Chris Wilson - オープンウェブのプロ。元Microsoftで勤務し、現在はGoogleでの開発アドボケートとして勤務
    • Jason Sigal - NYUにおけるクリエイティブコーダー在住。p5.js用ウェブオーディオライブラリの開発者
    • Shawn Lawson - 体験型メディアアーティスト。計算的崇高を創出
    • Matt DesLauriers - Jam 3におけるクリエイティブコーダー
    • Patrick Heng - クリエイティブフロントエンド開発者。HeticおよびGobelinsで学び、Grouekで勤務
    • Mat Preziotte - 論理のない音楽のビジュアルと生成芸術。
    • Yannis Gravezas - Chrome ExperimentsやFWAなどに複数のプロジェクトを掲載したクリエイティブなコードライター。

    チュートリアル

    動画

    貢献

    貢献はいつでも歓迎します。ガイドラインはこちらです。

    作者

    Willian JustenLuis HenriqueMárcio Ribeiro
    Willian JustenLuis HenriqueMárcio Ribeiro

    ライセンス

    CC0

    法律で認められる範囲で、Willian Justen は本作品に関するすべての著作権および関連する権利を放棄しています。