基于Web Audio API实现音频可视化效果
网页音频接口最有趣的特性之一它就是可以获取频率、波形和其它来自声源的数据，这些数据可以被用作音频可视化。这篇文章将解释如何做到可视化，并提供了一些基础使用案例。
基本概念节
要从你的音频源获取数据，你需要一个 AnalyserNode节点，它可以用 AudioContext.createAnalyser() 方法创建，比如：
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser();
然后把这个节点（node）连接到你的声源：
source = audioCtx.createMediaStreamSource(stream); source.connect(analyser); analyser.connect(distortion);
// etc.
注意： 分析器节点(Analyser Node) 不一定输出到另一个节点，不输出时也可以正常使用。但前提是它必须与一个声源相连（直接或者通过其他节点间接相连都可以）。
分析器节点(Analyser Node) 将在一个特定的频率域里使用快速傅立叶变换(Fast Fourier Transform (FFT) )来捕获音频数据，这取决于你给 AnalyserNode.fftSize 属性赋的值（如果没有赋值，默认值为2048）。
注意： 你也可以为FFT数据缩放范围指定一个最小值和最大值，使用AnalyserNode.minDecibels 和AnalyserNode.maxDecibels进行设置，要获得不同数据的平均常量，使用 AnalyserNode.smoothingTimeConstant。阅读这些页面以获得更多如何使用它们的信息。
要捕获数据，你需要使用 AnalyserNode.getFloatFrequencyData() 或 AnalyserNode.getByteFrequencyData() 方法来获取频率数据，用 AnalyserNode.getByteTimeDomainData() 或 AnalyserNode.getFloatTimeDomainData() 来获取波形数据。
这些方法把数据复制进了一个特定的数组当中，所以你在调用它们之前要先创建一个新数组。第一个方法会产生一个32位浮点数组，第二个和第三个方法会产生8位无符号整型数组，因此一个标准的JavaScript数组就不能使用 —— 你需要用一个 Float32Array 或者 Uint8Array 数组，具体需要哪个视情况而定。
那么让我们来看看例子，比如我们正在处理一个2048尺寸的FFT。我们返回 AnalyserNode.frequencyBinCount 值，它是FFT的一半，然后调用Uint8Array()，把frequencyBinCount作为它的长度参数 —— 这代表我们将对这个尺寸的FFT收集多少数据点。
analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength);
要正确检索数据并把它复制到我们的数组里，就要调用我们想要的数据收集方法，把数组作为参数传递给它，例如：
analyser.getByteTimeDomainData(dataArray);
现在我们就获取了那时的音频数据，并存到了我们的数组里，而且可以把它做成我们喜欢的可视化效果了，比如把它画在一个HTML5 <canvas> 画布上。
创建一个频率条形图节
另一种小巧的可视化方法是创建频率条形图，
现在让我们来看看它是如何实现的。
首先，我们设置好解析器和空数组，之后用 clearRect() 清空画布。与之前的唯一区别是我们这次大大减小了FFT的大小，这样做的原因是为了使得每个频率条足够宽，让它们看着像“条”而不是“细杆”。
analyser.fftSize = 256; var bufferLength = analyser.frequencyBinCount; console.log(bufferLength); var dataArray = new Uint8Array(bufferLength); canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
接下来我们写好 draw() 函数，再一次用 requestAnimationFrame() 设置一个循环，这样显示的数据就可以保持刷新，并且每一帧都清空一次画布。
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
}
现在我们来设置一个 barWidth 变量，它等于每一个条形的宽度。理论上用花布宽度除以条的个数就可以得到它，但是在这里我们还要乘以2.5。这是因为有很多返回的频率区域中是没有声音的，我们每天听到的大多数声音也只是在一个很小的频率区域当中。在条形图中我们肯定不想看到大片的空白条，所以我们就把一些能正常显示的条形拉宽来填充这些空白区域。
我们还要设置一个条高度变量 barHeight，还有一个 x 变量来记录当前条形的位置。
var barWidth = (WIDTH / bufferLength) * 2.5; var barHeight; var x = 0;
像之前一样，我们进入循环来遍历 dataArray 数组中的数据。在每一次循环过程中，我们让条形的高度 barHeight 等于数组的数值，之后根据高度设置条形的填充色（条形越高，填充色越亮），然后在横坐标 x 处按照设置的宽度和高度的一半把条形画出来（我们最后决定只画高度的一半因为这样条形看起来更美观）。
需要多加解释的一点是每个条形竖直方向的位置，我们在 HEIGHT-barHeight/2 的位置画每一条，这是因为我想让每个条形从底部向上伸出，而不是从顶部向下（如果我们把竖直位置设置为0它就会这样画）。所以，我们把竖直位置设置为画布高度减去条形高度的一半，这样每个条形就会从中间向下画，直到画布最底部。
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i]/2;
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);
x += barWidth + 1;
}
};
和刚才一样，我们在最后调用 draw() 函数来开启整个可视化过程。
draw();
这些代码会带来下面的效果：
源码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>可视化音乐播放器</title>
</head>
<body>
<input type="file" name="" value="" id="musicFile">
<p id="tip"></p>
<canvas id="casvased" width="500" height="500"></canvas>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//随机变颜色
function randomRgbColor() { //随机生成RGB颜色
var r = Math.floor(Math.random() * 256); //随机生成256以内r值
var g = Math.floor(Math.random() * 256); //随机生成256以内g值
var b = Math.floor(Math.random() * 256); //随机生成256以内b值
return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
}
//随机数 0-255
function sum (m,n){
var num = Math.floor(Math.random()*(m - n) + n);
}
console.log(sum(0,100));
console.log(sum(100,255));
//展示音频可视化
var canvas = document.getElementById("casvased");
var canvasCtx = canvas.getContext("2d");
//首先实例化AudioContext对象 很遗憾浏览器不兼容，只能用兼容性写法；audioContext用于音频处理的接口，并且工作原理是将AudioContext创建出来的各种节点(AudioNode)相互连接，音频数据流经这些节点并作出相应处理。
//总结就一句话 AudioContext 是音频对象，就像 new Date()是一个时间对象一样
var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
if (!AudioContext) {
alert("您的浏览器不支持audio API，请更换浏览器（chrome、firefox）再尝试，另外本人强烈建议使用谷歌浏览器！")
}
var audioContext = new AudioContext();//实例化
// 总结一下接下来的步骤
// 1 先获取音频文件（目前只支持单个上传）
// 2 读取音频文件，读取后，获得二进制类型的音频文件
// 3 对读取后的二进制文件进行解码
$('#musicFile').change(function(){
if (this.files.length == 0) return;
var file = $('#musicFile')[0].files[0];//通过input上传的音频文件
var fileReader = new FileReader();//使用FileReader异步读取文件
fileReader.readAsArrayBuffer(file);//开始读取音频文件
fileReader.onload = function(e) {//读取文件完成的回调
//e.target.result 即为读取的音频文件（此文件为二进制文件）
//下面开始解码操作 解码需要一定时间，这个时间应该让用户感知到
var count = 0;
$('#tip').text('开始解码')
var timer = setInterval(function(){
count++;
$('#tip').text('解码中,已用时'+count+'秒')
},1000)
//开始解码，解码成功后执行回调函数
audioContext.decodeAudioData(e.target.result, function(buffer) {
clearInterval(timer)
$('#tip').text('解码成功，用时共计:'+count+'秒')
// 创建AudioBufferSourceNode 用于播放解码出来的buffer的节点
var audioBufferSourceNode = audioContext.createBufferSource();
// 创建AnalyserNode 用于分析音频频谱的节点
var analyser = audioContext.createAnalyser();
//fftSize (Fast Fourier Transform) 是快速傅里叶变换，一般情况下是固定值2048。具体作用是什么我也不太清除，但是经过研究，这个值可以决定音频频谱的密集程度。值大了，频谱就松散，值小就密集。
analyser.fftSize = 256;
// 连接节点,audioContext.destination是音频要最终输出的目标，
// 我们可以把它理解为声卡。所以所有节点中的最后一个节点应该再
// 连接到audioContext.destination才能听到声音。
audioBufferSourceNode.connect(analyser);
analyser.connect(audioContext.destination);
console.log(audioContext.destination)
// 播放音频
audioBufferSourceNode.buffer = buffer; //回调函数传入的参数
audioBufferSourceNode.start(); //部分浏览器是noteOn()函数，用法相同
//可视化 创建数据
// var dataArray = new Uint8Array(analyser.fftSize);
// analyser.getByteFrequencyData(dataArray)//将数据放入数组，用来进行频谱的可视化绘制
// console.log(analyser.getByteFrequencyData)
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);
console.log(dataArray)
canvasCtx.clearRect(0, 0, 500, 500);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
//canvasCtx.fillStyle = ;
canvasCtx.fillRect(0, 0, 500, 500);
var barWidth = (500 / bufferLength) * 2.5;
var barHeight;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
//随机数0-255 Math.floor(Math.random()*255)
// 随机数 10*Math.random()
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ','+Math.floor(Math.random()*(20- 120) + 120)+','+Math.floor(Math.random()*(10 - 50) + 50)+')';
canvasCtx.fillRect(x,500-barHeight/2,barWidth,barHeight/2);
x += barWidth + 1;
}
};
draw();
});
}
})
</script>
</html>
注意：
本文中的案例展现了 AnalyserNode.getByteFrequencyData() 和 AnalyserNode.getByteTimeDomainData() 的用法。如果想要查看AnalyserNode.getFloatFrequencyData() 和 AnalyserNode.getFloatTimeDomainData() 的用法，请参考我们的 Voice-change-O-matic-float-data 演示（也能看到 源代码 ）——它和本文中出现的 Voice-change-O-matic 功能完全相同，唯一区别就是它使用的是浮点数作数据，而不是本文中的无符号整型数。
《参考：https://github.com/mdn/voice-change-o-matic 》
《案例一：https://mdn.github.io/voice-change-o-matic/ 》
《案例二：http://margox.github.io/vudio.js/ 》
总结
到此这篇关于基于Web Audio API实现音频可视化效果的文章就介绍到这了,更多相关Web Audio API实现音频可视化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS 音频可视化插件Wavesurfer.js的使用教程
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import WaveSurfer from "wavesurfer.js"; 创建实例对象 this.wavesurfer = WaveSurfer.create(options); options 参数 默认值 说明 audioRate 1 音频的播放速度,数值越小越慢 barWidth none 如
-
Android音频可视化开发案例说明
Android 调用自带的录制音频程序 Android中有自带的音频录制程序,我们可以通过指定一个Action MediaStore.Audio.Media.RECORD_SOUND_ACTION的Intent来 启动它就可以了.然后在onActivityResult()方法中,获取Intent的Data,就是录制的音频对应的URI. java代码: 复制代码 代码如下: package eoe.demo; import android.app.Activity; import android.
-
JS实现可视化音频效果的实例代码
效果如图: 背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整. 代码如下(可直接复制使用): <html lang="en"> <head> <meta charset="UTF-8"> <title>可视化音频</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></scr
-
基于Web Audio API实现音频可视化效果
网页音频接口最有趣的特性之一它就是可以获取频率.波形和其它来自声源的数据,这些数据可以被用作音频可视化.这篇文章将解释如何做到可视化,并提供了一些基础使用案例. 基本概念节 要从你的音频源获取数据,你需要一个 AnalyserNode节点,它可以用 AudioContext.createAnalyser() 方法创建,比如: var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser
-
基于JavaScript实现简单的音频播放功能
现效果如下: 由于我这边不需要其他按钮,就没写 数据是由后台提供,在这做了个小列子 后台代码 public ActionResult MusicPlayer(int musicId=0) { MusicPlayerModel model = new MusicPlayerModel(); switch (musicId) { default: model.MusicName = "Believe-动画<海贼王>"; model.CoverImg = "/Conte
-
微信小程序基于高德地图API实现天气组件(动态效果)
在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.3 支持的动画效果 简单介绍下,动画由3个部分组成 一个是主
-
C# NAudio 库的各种常见使用方式之播放 录制 转码 音频可视化
概述 在 NAudio 中, 常用类型有 WaveIn, WaveOut, WaveStream, WaveFileWriter, WaveFileReader, AudioFileReader 以及接口: IWaveProvider, ISampleProvider, IWaveIn, IWavePlayer WaveIn 表示波形输入, 继承了 IWaveIn, 例如麦克风输入, 或者计算机正在播放的音频流. WaveOut 表示波形输出, 继承了 IWavePlayer, 用来播放波形音乐
-
基于python win32setpixel api 实现计算机图形学相关操作(推荐)
最近读研期间上了计算机可视化的课,老师也对计算机图形学的实现布置了相关的作业.虽然我没有系统地学过图形可视化的课,但是我之前逆向过一些游戏引擎,除了保护驱动之外,因为要做透视,接触过一些计算机图形学的基础常识.这次的作业主要分为2个主要模块,一个是实现画线,画圆的算法,还有填充的算法,以及裁剪的算法. 之前工作的时候虽然参与过一些数据可视化大屏的设计,但是当时主要的工作使用Echarts或者G2做业务组件开发,并没有对画线,填充,裁剪等基础算法做过实现.这次就着这个机会我就想了解一些.实现的效果
-
网站基于flash实现的Banner图切换效果代码
本文实例讲述了网站基于flash实现的Banner图切换效果代码,该实例的主要切换功能是由flash完成的.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
-
基于vue-cli 路由 实现类似tab切换效果（vue 2.0）
1,更改main.js 2,在App.vue中,写入两个跳转链接(router-link),分别跳转到"home""About" (home.About即分别是两个组件) ----其中,为什么要使用<router-link></router-link>, 请移步:http://router.vuejs.org/zh-cn/api/router-link.html ----router-view路由视图(必须) ----css可以使用外部样式
-
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是