Web3BandEq - A web-based three band equalizer using Web Audio API
This repository uses git-lfs to store .wav files. You can install git-lfs using these instructions.
Visit the demo on github pages.
Web3BandEq is a simple repository to demonstrate audio processing in a web browser. It extends the Pizzicato Javascript library to include a ThreeBandEqualizer effect, which is implemented with Web Audio API biquad filters. It also extracts the frequency reponse of the equalizer for display on an HTML5 canvas.
- Provide equalized playback of the selected audio file without distortion or clipping.
- The user may play and pause audio playback.
- The gain for each of the three frequency bands may be controlled by the user.
- Three slider controls to set the gain for each of the frequency bands: low, mid, and high
- A play button which when pressed starts playback of the audio file or resumes playback of the audio file if paused.
- A pause button which when pressed halts the playback of the audio file. The current position of playback is not reset allowing for resumed playback from the paused playback position.
- Equalized audio playback of the selected audio file.
- The current state of the controls are represented visually.
- Playback is clean without artifacts or distortion.
- Changes to the controls do not introduce audio artifacts or distortion.
After investigating the available web technologies, I selected the Web Audio API for this project. As a new project, I didn’t want to use deprecated technologies in order to extend its usefulness. The audio element in HTML5 does not have sufficient power to support more than simple playback functionality. After seeing the capabilites of the Web Audio API, I decided a full game engine like Unity3D was unnecessary. Modern browsers provide playback control and a convolution engine for audio algorithms. The browser can be scripted to perform all of the processing necessary for this project.
- Legacy Plugins (Quicktime or Flash) - Deprecated method of extending web pages to include audio. These technologies are no longer supported and should not be used for new development.
- HTML5 - A new audio element was added to HTML in version 5. The capabilities are limited to basic playback.
- Web Audio API - A javascript API specification that allows browers to provide powerful audio capabilities to web sites.
- Unity 3D - Modern plugins can provide the power of entire game engine with advanced audio.
- Howler.js
- Pizzicato
- Tone.js
- Soundjs
- HTML5 Canvas
- [X] Protype html page with eq sliders, playback button, and pause button.
- [X] Add audio playback and pause functionality using Pizzicato
- [X] Add a low pass filter and select cutoff frequency
- [X] Add a high pass filter and select cutoff frequency
- [X] Add a bandpass filter with the previously selected cutoff frequencies
- [X] Clean up the design and implementation of the web page, and upload to github pages.
- [X] Update the github pages implementation to use the minified version of pizzicato.
- [X] Add a visualization to represent the frequency band gains
- [ ] Move gain control from html input elements to the HTML5 canvas visualization
- theyyg/web3bandeq
- The github repo for this project containing source code and the demo
- theyyg/pizzicato
- A forked version of the javascript library Pizzicato, with a custom three band equalizer implementation. [ Documentation ]
- Web Audio API
- The Web Audio API is the fundamental technology that enabled this project.
The signal flow diagram below shows the processing architecture used.
top to bottom direction
skinparam line {
'type polyline
type ortho
}
@startuml
usecase "Play/Pause Control" as play
usecase "Stop Control" as stop
rectangle "AudioSource\nLoad from URL" as source
rectangle "Low-Band Filter" as low
usecase "Low Gain Slider" as low_slider
rectangle "Gain Stage" as low_gain
rectangle "Mid-Band Filter" as mid
usecase "Mid Gain Slider" as mid_slider
rectangle "Gain Stage" as mid_gain
rectangle "High-Band Filter" as high
usecase "High Gain Slider" as high_slider
rectangle "Gain Stage" as high_gain
rectangle "Destination" as mixer
rectangle "AudioListener" as listener
play -[#2244CC]r-> source
stop -[#2244CC]l-> source
source --> mid
source --> low
source --> high
low --> low_gain
low_slider -[#24B]r-> low_gain
low_gain -[hidden]r-> mid_slider
mid --> mid_gain
mid_slider -[#24B]r-> mid_gain
mid_gain -[hidden]r-> high_slider
high --> high_gain
high_slider -[#24B]r-> high_gain
low -[hidden]r-> mid
mid -[hidden]r-> high
low_gain --> mixer
mid_gain --> mixer
high_gain --> mixer
mixer --> listener
@enduml