web audio api volume indicator - no more sound

Question

Я пытаюсь сделать своего рода измеритель объема (как эффект пульсации) с помощью аудио-аудио api из звукового файла, загруженного в тег <audio>, мой индикаторный эффект отлично работает с этим кодом , Я могу получить изменения громкости с воспроизводимого звука, и я использую значение для применения эффектов непрозрачности к <div> с jquery.

Но я не могу прислушиваться к звуку, когда загружаю свой скрипт, звук воспроизводится, громкость меняется, но звук отсутствует. Может, я где-то пропустил коннектор?

Любые идеи?

var audio = document.getElementById('sound'); 
    var context = new AudioContext(); 
    var analyser = context.createScriptProcessor(1024, 1, 1); 
    var source = context.createMediaElementSource(audio); 

    source.connect(analyser); 
    analyser.connect(context.destination); 

    opacify(); 

    function opacify(){ 
     analyser.onaudioprocess = function(e){ 
      var out = e.outputBuffer.getChannelData(0); 
      var int = e.inputBuffer.getChannelData(0); 
      var max = 0; 
      for(var i = 0; i < int.length; i++){ 
       out[i] = 0; 
       max = int[i] > max ? int[i] : max; 
      } 
      $('#artist').css({'opacity': max}); // updates opacity from value 
     } 
    } 

Любая помощь приветствуется. Спасибо ...

Answer 1

Вам нужно установить выходной буфер вашего сценарияNode на что-то, если вы хотите получить какой-либо вывод из него. По умолчанию выход пуст.

(вы можете установить его на out[i] = int[i] если вы хотите такой же мощность).

var audio = new Audio(); 
 
audio.crossOrigin = 'anonymous'; 
 
audio.src = 'https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3'; 
 
audio.play(); 
 
var context = new AudioContext(); 
 
var analyser = context.createScriptProcessor(1024, 1, 1); 
 
var source = context.createMediaElementSource(audio); 
 
source.connect(analyser); 
 
analyser.connect(context.destination); 
 

 
opacify(); 
 

 
function opacify() { 
 
    analyser.onaudioprocess = function(e) { 
 
    var out = e.outputBuffer.getChannelData(0); 
 
    var int = e.inputBuffer.getChannelData(0); 
 
    var max = 0; 
 
    for (var i = 0; i < int.length; i++) { 
 
     out[i] = int[i]; // set the output as the input 
 
     max = int[i] > max ? int[i] : max; 
 
    } 
 
    artist.style.opacity = max; 
 
    } 
 
}

#artist { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<div id="artist"></div>

Но это будет сделать только ненужную обработку, есть бесполезную память, так что вы можете даже просто подключить непосредственно SourceNode к DestinationNode, если вы хотите, чтобы ухо необработанного звука от источника.

var audio = new Audio(); 
 
audio.crossOrigin = 'anonymous'; 
 
audio.src = 'https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3'; 
 
audio.play(); 
 
var context = new AudioContext(); 
 
var analyser = context.createScriptProcessor(1024, 1, 1); 
 
var source = context.createMediaElementSource(audio); 
 
source.connect(analyser); 
 
source.connect(context.destination); // connect the source to the destination 
 

 
analyser.connect(context.destination); // chrome needs the analyser to be connected too... 
 

 
opacify(); 
 

 
function opacify() { 
 
    analyser.onaudioprocess = function(e) { 
 
    // no need to get the output buffer anymore 
 
    var int = e.inputBuffer.getChannelData(0); 
 
    var max = 0; 
 
    for (var i = 0; i < int.length; i++) { 
 
     max = int[i] > max ? int[i] : max; 
 
    } 
 
    artist.style.opacity = max; 
 
    } 
 
}

#artist { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<div id="artist"></div>

Во всяком случае, out[i] = 0 не будет делать ничего хорошего.