AudioContext 实现音频可视化(web技术分享)
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
要实现音频可视化，实现一些炫酷的效果需要借助 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='300px' height='300px'></canvas>
二、创建并返回一个新的AudioContext对象。
const ctx = new AudioContext();
三、创建一个新的MediaElementAudioSourceNode对象
AudioContext接口的createMediaElementSource()方法用于创建一个新的MediaElementAudioSourceNode对象,输入某个存在的 HTML<audio>or<video>` 元素, 对应的音频即可被播放或者修改.
const audioSrc = ctx.createMediaElementSource(this.audioElement);
四、创建AnalyserNode对象
AudioContext 的createAnalyser()方法能创建一个AnalyserNode，可以用来获取音频时间和频率数据，以及实现数据可视化。
const analyser = ctx.createAnalyser();
五、设置 fftSize 属性
AnalyserNode接口的 fftSize 属性的值是一个无符号长整型的值, 表示（信号）样本的窗口大小。当执行快速傅里叶变换（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。fftSize属性的值必须是从32到32768范围内的2的非零幂; 其默认值为2048。
analyser.fftSize = 512;
六、audioSrc 和 analyser 进行链接
AudioNode 接口的 connect() 方法使你能将一个节点的输出连接到一个指定目标，这个指定的目标可能是另一个 AudioNode（从而将音频数据引导到下一个指定节点）或一个AudioParam, 以便上一个节点的输出数据随着时间流逝能自动地对下一个参数值进行改变。
audioSrc.connect(analyser);
七、analyser 和 ctx.destination 进行链接
AudioContext 的 destination 属性返回一个 AudioDestinationNode 表示context中所有音频（节点）的最终目标节点，一般是音频渲染设备，比如扬声器。
analyser.connect(ctx.destination)
八、歌曲播放进行中
Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
AnalyserNode接口的 getByteFrequencyData() 方法将当前频率数据复制到传入的Uint8Array（无符号字节数组）中。
如果数组的长度小于 AnalyserNode.frequencyBinCount, 那么Analyser多出的元素会被删除. 如果是大于, 那么数组多余的元素会被忽略.
visualization() {
const arr = new Uint8Array(this.analyser.frequencyBinCount);
this.analyser.getByteFrequencyData(arr);
this.draw(arr);
},
九、使用canvas绘制音频图谱
HTMLCanvasElement.getContext()方法返回canvas的上下文，如果上下文没有定义则返回 null .- 2d建立一个 CanvasRenderingContext2D 二维渲染上下文。
this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); const start = ((document.body.clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((item, index) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); this.canvas.lineTo(start + (index * 4), this.canvasHeight - item / 2); this.canvas.stroke(); });}
效果展示：
到此这篇关于 AudioContext 实现音频可视化(web技术分享)的文章就介绍到这了,更多相关 AudioContext 实现音频可视化内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要给大家介绍了web技术中的WebRTC记录音视频流，文章内容围绕主题展相关资料，需要的小伙伴可以参考一下，希望对你有所帮助2022-02-23Web前端开发规范2017(HTML/JavaScript/CSS)
这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道，当一个团队开始指定并实行2017-01-21- 这篇文章主要为大家详细介绍了响应式Web之流式网格系统的相关资料，感兴趣的小伙伴们可以参考一下2016-07-04
最新评论