https://github.com/srowhani/audiophile
HTML5 Audio API playground
https://github.com/srowhani/audiophile
Last synced: about 2 months ago
JSON representation
HTML5 Audio API playground
- Host: GitHub
- URL: https://github.com/srowhani/audiophile
- Owner: srowhani
- Created: 2014-06-23T02:39:46.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-08-01T14:23:46.000Z (almost 11 years ago)
- Last Synced: 2025-01-19T11:14:18.707Z (over 1 year ago)
- Language: JavaScript
- Size: 9.72 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
AudioPhile
==========
A quick application I made that makes use of the HTML5 audio element, and API
to load sound files and play them back, as well as visualizing them.
Third Party Libraries
-
RequireJS
For loading each of the modules
Side Notes
Using Canvas, I draw the frequency data which is represented as an UintArray by iterating through it
and drawing each of the array values as rectangles.
As for the beat matching, if:
[].slice.call(_player.getFrequency(), 0, 4).reduce(function(x,y){return x+y})
surpasses 720 (the limit for each frequency is 200) I set the fillstyle of my canvas context to be
a blue gradient as opposed to the default red one.
Also, I capped the limit of requestAnimationFrame by doing the following:
window.setTimeout(
function(){
requestAnimationFrame(update);
}, 1000/30)
This ensures that the frames per second won't surpass 30.
Usage
It's pretty simple, you drop music into the dashed div box, and it should load them.
Once it has, clicking the div will grab the src from the element's dataset, and begin playback
Demo
Can be found here.
Learning sources
- http://ianreah.com/2013/02/28/Real-time-analysis-of-streaming-audio-data-with-Web-Audio-API.html
- https://webaudio.github.io/web-audio-api/