> 资料来源：http://studio.bfw.wiki/Studio/Open/id/15832890572989400098.html ``` // 创建音频轨迹 let audioContext = new (window.AudioContext||window.webkitAudioContext); var src = audioContext .createMediaElementSource(audio); // 将 audio 对象添加到资源来源 var analyser = audioContext .createAnalyser(); src.connect(analyser); analyser.connect(audioContext .destination); analyser.fftSize = 128;//快速傅里叶变换, 必须为2的N次方 var bufferLength = analyser.frequencyBinCount; // = fftSize * 0.5 //part4: 变量 var barWidth = (WIDTH / bufferLength) - 1;//间隔1px var barHeight; var dataArray = new Uint8Array(bufferLength);//8位无符号定长数组 // 下面是通过音频更新触发的值 analyser.getByteFrequencyData(dataArray);//获取当前时刻的音频数据 var x = 0; for (var i = 0; i < bufferLength; i++) { var data = dataArray[i];//int,0~255 var percentV = data / 255;//纵向比例 var percentH = i / bufferLength;//横向比例 barHeight = HEIGHT * percentV; //gbk,0~255 var r = 255 * percentV;//值越大越红 var g = 255 * percentH;//越靠右越绿 var b = 50; context.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; context.fillRect(x, HEIGHT - barHeight, barWidth, barHeight); x += barWidth + 1;//间隔1px } // ```