WEB Audio API 错误:无法读取属性“getByteFrequencyData”

WEB Audio API Error: Cannot read Property 'getByteFrequencyData'

本文关键字：属性 读取 getByteFrequencyData Audio API 错误 WEB      更新时间：2023-09-26

我正在尝试制作音频栏可视化工具。

阅读网络音频API，我有以下代码：

.HTML：

<audio controls>  
      <source src="video/DownToEarth.mp3" type="audio/mp3">
</audio>
<canvas id="analyser_render"></canvas>

JAVASCRIPT：

var audioCtx, myAudio, canvas, ctx, source, analyser, bufferLength, dataArray, bars, bar_x, bar_width, bar_height;
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var myAudio = document.querySelector('audio');
    var source = audioCtx.createMediaElementSource(myAudio);
    var analyser = audioCtx.createAnalyser();
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);
    analyser.minDecibels = -90;
    analyser.maxDecibels = -10;
    var canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    frameLooper();
}
function frameLooper(){
    window.requestAnimationFrame(frameLooper);
    analyser.getByteFrequencyData(dataArray);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#00CCFF';
    bars = 100;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(dataArray[i] / 2);
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}

现在一切看起来都井井有条，但是每次我尝试运行它时，我都会继续收到错误：未捕获的类型错误：无法读取未定义的属性"getByteFrequencyData"我有数据进入dataArray，但getByteFrequencyData似乎没有从中得到任何东西。

我

从这篇文章中读到，我可能想包含一些关于最小和最大分贝范围的行，但这并没有产生任何差异，我仍然收到此错误。

变量

analyser不存在于您尝试使用它的范围内，因为它是本地函数initMp3Player。

您需要更改frameLooper的签名：

function frameLooper(analyser){...

当您调用它时，传递 analyser ，这在您调用它的位置的范围内。

frameLooper(analyser);

以便它可以在您的frameLooper函数中使用。

或者，您可以在更高的范围内声明analyser...但避免使用全局变量可能是个好主意。

相关文章：