Как вы получаете уровень звука в децибелах в Javascript

В настоящее время я делаю визуализатор децибел-метра, используя JavaScript, HTML и CSS.

Я изучил несколько руководств по API веб-аудио, но ничего из них не было близко к тому, что я хочу сделать.

Это то, что у меня есть до сих пор:

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 ) + '%';
  };
  
}

Может кто-нибудь объяснить, что мне нужно делать, или указать мне правильное направление, так как это, похоже, не работает?


javascript audio html5-audio decibel
person ipalibowhyte    schedule 24.01.2015    source источник
comment
Что не работает? Является ли ваше значение rms тем, что вы ожидаете (между -1 и 1), или вам просто нужна формула для преобразования в дБ?   -  person jaket    schedule 26.01.2015
comment
Привет, теперь код работает правильно? Если это так, пожалуйста, опубликуйте его как ответ, чтобы вопрос можно было пометить как решенный. Спасибо!   -  person Qantas 94 Heavy    schedule 27.01.2015
comment
@ipalibowhyte вы можете добавить свой ответ отдельно от вопроса, а также пометить его как принятый ответ.   -  person CTS_AE    schedule 14.05.2019
comment
@CTS_AE Кажется, ОП знает - они делали это раньше. Кроме того, ОП неактивен уже 1,5 года.   -  person ReinstateMonica3167040    schedule 15.05.2019

Ответы (1)


arrow_upward
1
arrow_downward

Исправлено

так вот что я изменил на:

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 ));
};
person Rakesh kumar Oad    schedule 15.07.2021