mathiasvr / Audio Oscilloscope
Licence: mit
π΅ Waveform audio visualizer for the HTML5 canvas.
Stars: β 54
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Audio Oscilloscope
Audiomotion.js
High-resolution real-time spectrum analyzer and music player using Web Audio and Canvas APIs.
Stars: β 177 (+227.78%)
Mutual labels: html5-canvas, audio-visualizer
Dswaveformimage
Generate waveform images from audio files in iOS
Stars: β 228 (+322.22%)
Mutual labels: audio-visualizer, waveform
waveplayer.js
An HTML5 based audio player with a waveform view
Stars: β 73 (+35.19%)
Mutual labels: waveform, html5-canvas
Waveform Playlist
Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity.
Stars: β 919 (+1601.85%)
Mutual labels: audio-visualizer, waveform
Amplituda
Amlituda - an android library that calculates amplitudes from audio and provides data in different formats. Based on this data, you can draw waveform. Android audio amplitude library.
Stars: β 75 (+38.89%)
Mutual labels: waveform, audio-visualizer
Glava
GLava - OpenGL audio spectrum visualizer
Stars: β 762 (+1311.11%)
Mutual labels: audio-visualizer
Generativenature
A VJ set which was played in Interim-Report 2nd edition
Stars: β 21 (-61.11%)
Mutual labels: audio-visualizer
Interactivegraph
InteractiveGraph provides a web-based interactive visualization and analysis framework for large graph data, which may come from a GSON file, or an online Neo4j graph database. InteractiveGraph also provides applications built on the framework: GraphNavigator, GraphExplorer and RelFinder.
Stars: β 730 (+1251.85%)
Mutual labels: html5-canvas
Fdwaveformview
Reads an audio file and displays the waveform
Stars: β 997 (+1746.3%)
Mutual labels: waveform
F2
π±πAn elegant, interactive and flexible charting library for mobile.
Stars: β 7,619 (+14009.26%)
Mutual labels: html5-canvas
Blipkit
C library for creating the beautiful sound of old sound chips
Stars: β 23 (-57.41%)
Mutual labels: waveform
Sincnet
SincNet is a neural architecture for efficiently processing raw audio samples.
Stars: β 764 (+1314.81%)
Mutual labels: waveform
Origami.js
Powerful and Lightweight Library to create using HTML5 Canvas
Stars: β 750 (+1288.89%)
Mutual labels: html5-canvas
Party Mode
An experimental music visualizer using d3.js and the web audio api.
Stars: β 690 (+1177.78%)
Mutual labels: audio-visualizer
Awesome Canvas
A curated list of awesome HTML5 Canvas with examples, related articles and posts.
Stars: β 963 (+1683.33%)
Mutual labels: html5-canvas
oscilloscope
Waveform audio visualizer for the HTML5 canvas.
install
Import the module and bundle it for the browser with your favorite module bundler,
$ npm install oscilloscope
or include it directly in your HTML:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
example
var Oscilloscope = require('oscilloscope')
var audioContext = new window.AudioContext()
// create source from html5 audio element
var source = audioContext.createMediaElementSource(audioElement)
// attach oscilloscope
var scope = new Oscilloscope(source)
// start default animation loop
scope.animate(canvas.getContext("2d"))
See the examples folder for more details on how to customize the animation.
usage
scope = new Oscilloscope(source [, { fftSize: 2048 }])
Supply an AudioNode as source
.
Optionally set the fftSize
property of the internal AnalyzerNode.
This can be used to adjust the smoothness or resolution of the animated oscilloscope.
For more control supply an AnalyzerNode as source
.
scope.draw(context [, x, y, width, height])
Draw oscilloscope to a canvas context
, and optionally set position and dimensions.
scope.animate(context [, x, y, width, height])
Start a basic animation loop that redraws the oscilloscope using the .draw()
method.
scope.stop()
Stop the animation loop started by the .animate()
method.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].