audioContext,js audiocontext
要实现音频可视化，实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext：
AudioContext接口表示由链接的音频模块构成的音频处理图，每个模块由一个AudioNode表示。音频上下文控制其包含的节点的创建以及音频处理或解码的执行。在做任何其他事情之前，您需要创建一个AudioContext对象，因为所有事情都发生在上下文中。建议创建一个AudioContext对象并重用它，而不是每次都初始化一个新的AudioContext对象，并且可以将一个AudioContext对象同时用于多个不同的音频源和管道。
一、准备 audio 和 canvas 标签
audio class= audio ref= audio :src= tune @ ended= ended /audio canvas ref= canvas width= 300 px height= 300 px /canvas
二、创建并返回一个新的AudioContext对象。
const CTX=new audio context()；
三、创建一个新的MediaElementAudioSourceNode对象
使用AudioContext接口的createMediaElementSource()方法创建一个新的MediaElementAudioSourceNode对象，输入一个现有的HTMLaudioorvideo元素，可以播放或修改相应的音频。常量音频src=CTX。CreateMediaElementSource (this。音频元素)；
四、创建AnalyserNode对象
音频上下文的createAnalyser()方法可以创建一个AnalyserNode，可以用来获取音频的时频数据，实现数据可视化。
const analyser=CTX . create analyser()；
五、设置 fftSize 属性
分析器节点接口的fftSize属性的值是一个无符号长整数，表示(信号)样本的窗口大小。当执行快速傅立叶变换(FFT)时，这些(信号)样本用于获得频域数据。fftSize属性的值必须是2的非零幂，范围是32到32768；其默认值为2048。analyser.fftSize=512
六、audioSrc 和 analyser 进行链接
AudioNode接口的connect()方法使您可以将一个节点的输出连接到指定的目标，该目标可能是另一个AudioNode(从而将音频数据引导到下一个指定的节点)或AudioParam，这样上一个节点的输出数据就可以随着时间的推移自动改变下一个参数值。
audioSrc.connect(分析器)；
七、analyser 和 ctx.destination 进行链接
audio context的destination属性返回AudioDestinationNode，指示上下文中所有音频(节点)的最终目的节点，通常是音频呈现设备，如扬声器。
analyst . connect(CTX . destination)
八、歌曲播放进行中
uint 8 array数组类型表示8位无符号整数数组，其内容在创建时初始化为0。创建后，您可以将数组中的元素作为对象或通过使用数组下标索引来引用。
AnalyserNode接口的getByteFrequencyData()方法将当前频率数据复制到传入的Uint8Array(无符号字节数组)中。
如果数组的长度小于AnalyserNode.frequencyBinCount，Analyser中多余的元素将被删除。如果它大于，数组中多余的元素将被忽略。
visualization(){ const arr=new uint 8 array(this . analyser . frequency bincount)；this . analyser . getbytefrequencydata(arr)；this . draw(arr)；}，
九、使用canvas绘制音频图谱
htmlcanvaseelement . get context()方法返回画布的上下文，或者null。2d，如果上下文未定义，则建立画布渲染上下文的2D渲染上下文。this.canvas=this。$ refs . canvas . get context( 2d )；draw(arr) { canvas.clearRect(0，0，document.body.clientWidth，this . canvasheight)；const start=((document . body . client width/2)-(arr . length/2)* 3))；arr.forEach((item，index)={ this . canvas . begin path()；this . canvas . stroke style= # b2af 4 ；this . canvas . line width=3；this . canvas . move to(start(index * 4)，this . canvasheight)；this . canvas . line to(start(index * 4)，this . canvasheight-item/2)；this . canvas . stroke()；});}效果展示：
这就是这篇关于AudioContext实现音频可视化(web技术分享)的文章。更多关于AudioContext实现音频可视化的信息，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。