How do you get the decibel level of an audio in Javascript

问题

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?

Fix

After taking a day break, I found out that some API calls I was making were deprecated, 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 ));
  };

回答1:

The OP has answered this question in the question.

After taking a day break, I found out that some API calls I was making were deprecated, so this is what I changed it to:

来源：https://stackoverflow.com/questions/28123525/how-do-you-get-the-decibel-level-of-an-audio-in-javascript

标签

javascript

audio

html5-audio

decibel