ウェブオーディオAPIボリュームインジケータ - これ以上の音

Question

<audio>タグにロードされたサウンドファイルからWebオーディオAPIを使用してボリュームメーター（脈動エフェクトとして）を作成しようとすると、このインジケータエフェクトはこのコードで正常に機能します私は再生中のオーディオから音量の変化を取り出すことができ、値を使ってjqueryを使って<div>に不透明効果を適用します。

しかし、スクリプトを読み込んだり、オーディオが再生されたり、音量が変化していたり​​、音が出なかったりすると、音が聞こえません。多分私はどこかのコネクタを見逃したでしょうか？

アイデア？

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

何らかの出力が必要な場合は、scriptNodeの出力バッファを何かに設定する必要があります。デフォルトでは、出力は空です。

（同じ出力が必要な場合は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>

しかし、これは役に立たないメモリを食べて、ちょうど不要な処理を行いますので、あなたがソースから耳の未処理の音をしたい場合は、あなたもちょうど、destinationNodeに直接sourceNodeを接続することもできます。とにかく

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は良い何もしません。