网络音频 api 音量指示器 - 不再有声音

Question

我尝试使用<audio> 标签中加载的声音文件中的网络音频 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>

但这只会进行不必要的处理，占用无用的内存，因此如果您想听到源中未处理的声音，您甚至可以直接将源节点连接到目标节点。

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 不会有什么好处。