x

【音频可视化】真棒的音频可视化

apaas.dev
31 May 2022
SEO Title
awesome-audio-visualization

音乐可视化是电子音乐可视化器和媒体播放器软件中的一项功能，可根据一段音乐生成动画图像。 图像通常是实时生成和渲染的，并且在播放时与音乐同步。

Table of Contents

Books

Downloads

Experiments

  • Audible Visuals - Collection of visualizers derived from the Archimedean spiral by Sonia Boller.
  • React Player - A complete Audio Visualisation player with ReactJS.
  • Moire - A Web Audio / WebGL visualisation.
  • Finding Love - fully interactive, Virtual Reality story that transforms emotions into art.
  • Mubert - World's first online music composer
  • Tangled - Audio-visual release by Berlin based netlabel Yarn Audio, visuals made in cables. Drag to rotate, scroll to zoom.
  • Luis Henrique Bizarro Portfolio - Portfolio with experiments using Three.JS and GSLS.
  • Triangles - An experiment using triangles in Canvas.
  • Adventure Machine - Campaign for Madeon's "Adventure" album.
  • BBNG - WebGL Visualizer for "Confessions" (feat. Leland Whitty) by BADBADNOTGOOD.
  • Born in the Echoes - Campaign for The Chemical Brothers' "Born in the Echoes" album.
  • Chrome Music Lab - Play with simple experiments and explore how music works.
  • DENNIS - An interactive and audio responsive music video for "Dennis" by popcorn_10's.
  • Fluctus - Experimental 3D Audio Visualizer by Jordan Machado.
  • George & Jonathan III - Campaign for George & Jonathan's "III" album.
  • Goy Goy - A multiplayer Chrome Experiment made with HTML5 Canvas, socket.io and audiolet.js.
  • Lantern - WebGL Visualizer for "Lantern" by SBTRKT.
  • Lines - Visualising Joy Division album cover as a music spectrum by Silvio Paganini.
  • Nero - WebGL Visualizer for "In The Way" by Nero.
  • OMM - An interactive audio visual experience exploring creativity.
  • Pareidolia - WebGL Visualizer for "Szerencsétlen" by Venetian Snares.
  • Soundviz - 5 different sound visualization effects with Leap Motion interactivity.
  • Splice - A realtime interactive music visualizer using time-code data from Splice's upcoming visualizer API.
  • Typatone - Make music while you write.
  • Yume - Campaign for Helios' "Yume" album.
  • Spins - Audio Visualizer rendering Waveforms in Polar Coordinates by Matt DesLauriers.
  • Silk - 3D Audio Visualizer by Matt DesLauriers.
  • Wave - 3D Audio Visualizer by Matt DesLauriers.
  • Binaural - Experiment using Binaural and Reverb audio effects by Matt DesLauriers.
  • Beatgrid - Experiment using Audio Beat Detection by Matt DesLauriers.
  • Party - 2D Audio Visualizer by Matt DesLauriers.
  • Word Problems - WebGL Visualizer for "Word Problems" by Harmonic 313.
  • Here Comes The Sun - A visual representation of The Beatles' song "Here Comes The Sun" dynamically generated by an algorithm developed with Processing and Processing.js. By Marcio Ribeiro.
  • Audio Cloud - A reactive particle system based on audio analysis of Fast Fourier Transform spectrum.
  • Glitch - An algorithmic synthesizer to make music from math.
  • 105 Birthday Clara Rockmore - A Doodle for the Birthday of Clara Rockmore.
  • Fireworks with WebGL - Sound driven fireworks by Ondřej Žára.
  • Tonalhub - Create music from your github repository by Alejandro Mantecon Guillen.
  • Glowsynth - just amazing! - Play with your mouse, Qwerty keyboad, or MIDI keyboard and watch as the lights dance to your music.
  • Mmorph - An adventure into new ways of delivering interactive music in the browser and beyond.
  • Play a cornet to Donald Trump - A funny site to play a cornet to Donald Trump by Animal Agency.
  • Loop Waveform Visualizer - WebGL Visualizer for Screw Base by Beytah.
  • Bohemian Rhapsichord - A web app that turns the song Bohemian Rhapsody into a musical instrument by Paul Lamere.
  • Scrollsound - Scrolling as a method of interaction with audio on the web by Ehsan Ziya.
  • Floraldrift - Procedurally generated music and visuals.
  • Experiment #8 - Music Experiment by Bruno Imbrizi.
  • Music Cube - A Chrome Experiment that combines the Roland TR-808 Drum Machine with the Rubik's Cube.
  • Music Game - ECHO - A challenging musical puzzle game.
  • Patatap - A portable animation and sound kit.
  • Plink - Awesome Multiplayer Game - A multiplayer music experience.
  • Simon Says - Game - A free memory game in your browser.
  • Soundcloud Visualizer - A Canvas and Web Audio Experiment.
  • CSS Visualizer - Music Visualizers that are made entirely using DOM elements and CSS3.
  • Kandinski Experiment - Music Visualizations inspired in Kandinsky.
  • Visual Music Trailer - Live audio visual performance ideas.
  • Draw and Music - Campaign for Rugs new album by Sam Greens.
  • Moogfest Substrate - Experimental site to Moogfest.
  • Flame Gradient - Audio visualizer built with HTML5 web audio API by rickycodes.
  • 3D Grid - Audio visualizer built with HTML5 web audio API by rickycodes.
  • obsidian - 3D Audio Visualization made by the creator of Three.js.
  • TRIF - GIF-based online radio visualization using webaudio API and raw CSS
  • Garbage Collector - Audio visualization experiment made with Three.js and some post-processing.
  • Audiograph - Amazing audio visualization made by Matt DesLauriers.
  • Happy Monday - Musical experiment using THREE.MeshLine by David Ronai.
  • D159 - Audio visualization for "gloom" shown at NVScene 2015 by Simo Santavirta.
  • Restless Earth - Audio visualization for "Restless Earth".
  • Scribble Audio - Draw loops of sound with this web synthesizer.
  • Touchpianist - play a piano and look all animations along the screen.
  • PartyMode - An experimental music visualizer using d3.js and the web audio api.
  • Arkade London - Arkade London is a pure personal and experimental webVJ fan art.
  • DJi - Clean music visualizer from SoundCloud or self uploaded.
  • Braille Face: Kōya - Navigate a unique interactive environment in your browser while listening to Kōya, the debut album from Melbourne musician Braille Face.
  • VR Ondes Martenot - A playable rendition of the Ondes Martenot in Virtual Reality.
  • Popcorn - Little audio-reactive sketch by Hugh Kennedy.
  • Beat - Beat is a HTML5 audio/canvas experiment inspired by Propellerheads Figure iOS App.
  • Dancing Torus - Dancing Torus is a WebGL Audio Reactive experience. Choose your favourite song on Soundcloud and start dancing!
  • Musical Interactions - Some experimental ideas for playful musical interactions.
  • Polyrhythm - An interactive exploration of polyrythmic rhythms.
  • ClubberToy Several shadertoys, rewired with clubber, bundled as a vj app.
  • Andantino Listen some notes and try to find same notes on the keyboard.
  • Vissonance A collection of audio visualizers built in THREE.js.
  • M A I L M A N Interactive music video by Bruno Imbrizi for a song called Mailman by Soundgarden.
  • HTML5 Audio Visualizer Video Maker Pick your music, background image, customize the visualizer the way you want it, and have the visualizer be recorded all right in your web browser.
  • 3d Particles Music Visualiser Music visualiser done in Three.js by Richard Tan
  • ShowCQTBar - Audio spectrum visualization with musical scale.
  • Weekly Music Visualizations Weekly music visualization experiments built with Three.js and p5.js by Suraya Shivji.
  • Audio Visualizer - An interesting web audio visualizer built with Pixi.js.
  • CPPN-based Visualizer - Applying compositional pattern-producing networks to generate interesting visuals from audio data.
  • YouTube Musical Spectrum - A browser extension that offers audio visualization on your YouTube page with nice musical notes.
  • Just Dance - A 3D Audio Visualization made with BabylonJS & 2D Perlin Noise.
  • audioMotion - High-resolution real-time audio spectrum analyzer and full-featured music player written in JavaScript. Includes binaries for Windows, Linux and macOS.
  • p5.js Audio Visualizer - A powerful, beat- and amplitude-responsive audio visualizer created with p5.sound, on an HTML5 Canvas by Amanda Yeh.

Experiments on Codepen

Libraries Audio

  • web-audio-analyser - A thin wrapper around the Web Audio API that takes an element and gives you its waveform/frequency data in return.
  • web-audio-player - A cross-browser Web Audio player.
  • web-media-playback - Retrieve playback and buffering information about audio or video playing in the browser.
  • Pizzicato.js - Simplify the way you create and manipulate sounds via the Web Audio API.
  • ThreeAudio.js - Helps you create music visualizations in Three.js or tQuery.
  • Beeplay.js - Write a song In JavaScript.
  • MIDI.js - Making life easy to create a MIDI-app on the web.
  • Beep.js - A JavaScript toolkit for building browser-based synthesizers.
  • p5.sound - Brings the Processing approach to Web Audio and p5.js.
  • Audiolet - A JavaScript library for real-time audio synthesis and composition.
  • coffee-collider - A language for real time audio synthesis and algorithmic composition in HTML5.
  • audio-render - A pass-through audio stream, providing structure for rendering stream audio data.
  • Octavian - Utilities for reasoning about musical notes, frequencies, and intervals
  • waveform-data - Audio Waveform Data Manipulation API – resample, offset and segment waveform data in JavaScript.
  • audiowaveform - C++ program to generate waveform data and render waveform images from audio files.
  • Aubio - C library for realtime audio labeling with bindings for Python and PD, support for ofx and Vamp.
  • audio - Generic Go package designed to define a common interface to analyze and/or process audio data
  • wav - Battle tested Wav decoder/encoder
  • standardized-audio-context - A cross-browser implementation of the AudioContext which aims to closely follow the standard.
  • web-audio-beat-detector - A beat detection utility which is using the Web Audio API.
  • meyda - Audio feature extraction for JavaScript.

Libraries Visualization

  • p5.js - A JavaScript library for creating graphic and interactive experiences, based on the core principles of Processing.
  • Pixi.js - A fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL.
  • sketch.js - Let's you get straight to the fun parts of creative coding, without ever having to worry about shims or boilerplate code.
  • three.js - Three.js is a library that makes WebGL easy to use.
  • Two.js - A two-dimensional drawing API geared towards modern web browsers. It is renderer agnostic enabling the same API to draw in multiple contexts: SVG, Canvas, and WebGL.
  • BabylonJS - A complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio.
  • Web Audio Extension - A Chrome extension to play with Web Audio.
  • Cinder - A community-developed, free and open source library for professional-quality creative coding in C++.
  • Processing - An open source programming language and integrated development environment built for the electronic arts, new media art, and visual design communities.
  • HYPE_processing - Collection of Processing classes that performs heavy lifting tasks while using a minimal amount of code writing.
  • The Force - Live coded shader editing with audio input.
  • Hylogen - Purely functional language embedded in Haskell for expressive live coding of fragment shaders (with audio input).
  • Peaks.js - Modular client-side JavaScript component designed for the display of and interaction with audio waveform material in the browser.
  • Clubber.js - Application of music theory in audio reactive visualizations.
  • Vuo — A realtime visual programming language for interactive media.
  • wavesurfer.js - A customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas
  • wavebell - A javascript voice recorder with realtime waveform, using web microphone
  • Circular Audio Wave - A JS library for audio visualization in circular wave using Web Audio API and ECharts
  • Slang - An audio programming language built in JS
  • audioMotion-analyzer - High-resolution real-time audio spectrum analyzer JS module with no dependencies.
  • Cava - A cross-platform terminal visualizer.
  • Muser - Using machine learning to enhance music visualization in the browser.

People to Follow

  • Aaron Koblin - Artist, designer, programmer, and entrepreneur specializing in data and digital technologies.
  • Joshua Davis - An American designer, technologist, author and artist in new media.
  • Robert Hodgin - A creative coder living in Brooklyn. Co-creator of the Cinder C++.
  • Seb Lee-Delisle - An award-winning digital artist and speaker.
  • Raven Kwok - A visual artist, animator and creative programmer.
  • Chris Wilson - Open Web Guy, formerly of Microsoft and now working as a Developer Advocate at Google.
  • Jason Sigal - Creative Coder in residence at NYU's and creator of web audio library for p5.js.
  • Shawn Lawson - An experiential media artist creating the computational sublime.
  • Matt DesLauriers - Creative coder at Jam 3.
  • Patrick Heng - Creative front-end developer. Studied at Hetic and Gobelins and works at Grouek.
  • Mat Preziotte - Absurd music visualizations and generative art.
  • Yannis Gravezas - A creative coder with several projects featured in chrome experiments, fwa and elsewhere.

Tutorials

Videos

原文：https://github.com/willianjusten/awesome-audio-visualization

标签

↑