I am currently making a decibel meter visualizer using JavaScript, HTML and CSS.
I have gone through several Web Audio API tutorials, but nothing on there is close to being specific to what I want to do.
This is what I have so far:
window.onload = init;
function init() {
var ctx = new webkitAudioContext()
, url = 'https://dl.dropboxusercontent.com/u/86176287/pbjt.mp3'
, audio = new Audio(url)
// 2048 sample buffer, 1 channel in, 1 channel out
, processor = ctx.createJavaScriptNode(2048, 1, 1)
, meter = document.getElementById('meter')
, source;
audio.addEventListener('canplaythrough', function(){
source = ctx.createMediaElementSource(audio);
source.connect(processor);
source.connect(ctx.destination);
processor.connect(ctx.destination);
audio.play();
}, false);
// loop through PCM data and calculate average
// volume for a given 2048 sample buffer
processor.onaudioprocess = function(evt){
var input = evt.inputBuffer.getChannelData(0)
, len = input.length
, total = i = 0
, rms;
while ( i < len ) total += Math.abs( input[i++] );
rms = Math.sqrt( total / len );
meter.style.width = ( rms * 100 ) + '%';
};
}
Can someone please explain what I need to do, or point me in the right direction, since this doesn't seem to be working?
To measure decibels, download a mobile decibel-reading app, like Sound Level Meter or Decibel Meter. You can also measure decibels using computer programs like Audacity or Decibel reader. Another option is to use a profession decibel meter, which can give you a very accurate decibel reading.
A decibel (dB) is a unit of measurement for sound. A-weighted decibels, abbreviated dBA, are an expression of the relative loudness of sounds in air as perceived by our ears.
Sounds at or below 70 dBA are generally considered safe. Any sound at or above 85 dBA is more likely to damage your hearing over time. Researchers have found that people who are exposed over long periods of time to noise levels at 85 dBA or higher are at a much greater risk for hearing loss.
Fixed
so this is what I changed it to:
var audioCtx = new AudioContext();
var url = 'https://dl.dropboxusercontent.com/u/86176287/pbjt.mp3';
var audio = new Audio(url);
var processor = audioCtx.createScriptProcessor(2048, 1, 1);
var meter = document.getElementById('meter');
var source;
audio.addEventListener('canplaythrough', function(){
source = audioCtx.createMediaElementSource(audio);
source.connect(processor);
source.connect(audioCtx.destination);
processor.connect(audioCtx.destination);
//audio.play();
}, false);
// loop through PCM data and calculate average
// volume for a given 2048 sample buffer
processor.onaudioprocess = function(evt){
var input = evt.inputBuffer.getChannelData(0)
, len = input.length
, total = i = 0
, rms;
while ( i < len ) total += Math.abs( input[i++] );
rms = Math.sqrt( total / len );
//console.log(( rms * 100 ));
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With