wavebell - :bell: Catch realtime audio wave from microphone with JavaScript!

  •        3

In Chrome 47 or above, getUserMedia requires HTTPS to work. So it'd be better to setup SSL for your server. The MIT License.

https://github.com/skylerlee/wavebell

Tags
Implementation
License
Platform

   




Related Projects

waveform-playlist - Multitrack Web Audio editor and player with canvas waveform preview

  •    Javascript

Inspired by Audacity, this project is a multiple track playlist editor written in ES2015 using the Web Audio API. Load tracks and set cues (track cue in, cue out), fades (track fade in, fade out) and track start/end times within the playlist. I've written up some demos on github for the different audio fade types in the project.

videojs-record - video.js plugin for recording audio/video/image files.

  •    Javascript

Video.js plugin for recording audio/video/image files. Use npm (npm install videojs-record) to install the plugin or download the library and dependencies elsewhere. If you want to try the examples, check these instructions below.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

FDWaveformView - Reads an audio file and displays the waveform

  •    Swift

FDWaveformView is an easy way to display an audio waveform in your app. It is a nice visualization to show a playing audio file or to select a position in a file. To use it, add an FDWaveformView using Interface Builder or programmatically and then just load your audio as per this example. Note: if your audio file does not have file extension, see this SO question.

waveform-data

  •    Javascript

waveform-data.js is a JavaScript library for creating zoomable, browsable and segmentable representations of audio waveforms.We use these projects daily in applications such as BBC Radio Archive and browser editing and sharing tools for BBC content editors.


peaks.js - JavaScript UI component for interacting with audio waveforms

  •    Javascript

A browser based audio waveform visualisation frontend component from BBC R&D.Peaks.js is a modular client-side JavaScript component designed for the display of and interaction with audio waveforms in the browser.

wavesurfer.js - Navigable waveform built on Web Audio and Canvas

  •    Javascript

Interactive navigable audio visualization using Web Audio and Canvas. See a tutorial and examples on wavesurfer-js.org.

audiowaveform - C++ program to generate waveform data and render waveform images from audio files

  •    C++

audiowaveform is a C++ command-line application that generates waveform data from either MP3, WAV, or FLAC format audio files. Waveform data can be used to produce a visual rendering of the audio, similar in appearance to audio editing applications.Waveform data files are saved in either binary format (.dat) or JSON (.json). Given an input waveform data file, audiowaveform can also render the audio waveform as a PNG image at a given time offset and zoom level.

WPF Sound Visualization Library

  •    WPF

The WPF Sound Visualization Library is a collection of WPF Controls for graphically displaying data related to sound processing. Current controls include a Spectrum Analyzer, Waveform Timeline, and an Album Art Display Panel.

howler.js - Javascript audio library for the modern web

  •    Javascript

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

wavesurfer.js - Navigable waveform using WebAudio and Canvas

  •    Javascript

Navigable waveform using WebAudio and Canvas

omnitone - Spatial Audio Rendering on the web.

  •    Javascript

Omnitone is a robust implementation of ambisonic decoding and binaural rendering written in Web Audio API. Its rendering process is powered by the fast native features from Web Audio API (GainNode and Convolver), ensuring the optimum performance. The implementation of Omnitone is based on the Google spatial media specification and SADIE's binaural filters. It also powers Resonance Audio SDK for web.

microm - :musical_note: Beautiful library to convert browser microphone to mp3 in Javascript :musical_note:

  •    Javascript

Microm it's just a wrapper of few audio converting libraries which exposes a fully Promise and Event oriented api. Microm goal it's to make trivial to play and convert audio in the browser.

howler.js - Javascript audio library for the modern web.

  •    Javascript

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms. Additional information, live demos and a user showcase are available at howlerjs.com.

kbd-audio - Tools for capturing and analysing keyboard input paired with microphone capture

  •    C++

This is a collection of command-line and GUI tools for capturing and analyzing audio data. The most interesting tool is called keytap - it can guess pressed keyboard keys only by analyzing the audio captured from the computer's microphone.

SoundJS - A Javascript library for working with Audio

  •    Javascript

SoundJS is a library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers, including using a target plugin model to provide an easy way to provide additional audio plugins like a Flash fallback (included, but must be used separately from the combined/minified version).A mechanism has been provided for easily tying in audio preloading to PreloadJS.

SCWaveformView - A blazing fast customizable waveform view

  •    Objective-C

A blazing fast customizable waveform view. Extract the audio section of an asset (which can be both video or audio) and display a waveform. The SCWaveformView is optimized to do the less file read possible. When scrolling or displaying another part of the waveform, it will only read whatever it needs to render the new section. It will cache the file data to avoid having to read sections that have been already computed. Furthermore, if it does have to read the file, it will read it by bigger segment to minimize the number of read operations next time the timeRange changes.

io-808 - An attempt at a fully recreated web-based TR-808 drum machine.

  •    Javascript

An attempt at a fully recreated web-based TR-808 drum machine using React, Redux, and the Web Audio API. All of the sound generated by this drum machine are synthesized using the Web Audio API (look mom, no samples!). A side effect of this is while I got the sounds fairly close to the original hardware, there's still a lot of room for improvement (yes I'm looking at you Cymbal and Rimshot).

cordova-plugin-media-capture - Mirror of Apache Cordova Plugin media-capture

  •    Javascript

This plugin provides access to the device's audio, image, and video capture capabilities.WARNING: Collection and use of images, video, or audio from the device's camera or microphone raises important privacy issues. Your app's privacy policy should discuss how the app uses such sensors and whether the data recorded is shared with any other parties. In addition, if the app's use of the camera or microphone is not apparent in the user interface, you should provide a just-in-time notice before the app accesses the camera or microphone (if the device operating system doesn't do so already). That notice should provide the same information noted above, as well as obtaining the user's permission (e.g., by presenting choices for OK and No Thanks). Note that some app marketplaces may require your app to provide just-in-time notice and obtain permission from the user prior to accessing the camera or microphone. For more information, please see the Privacy Guide.