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>

但这只会进行不必要的处理，吃掉无用的内存，所以你甚至可以直接将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将无所作为。

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

1 个答案: