JavaScript+Canvas实现绘制音频可视化波形图
更新时间：2024年02月02日 15:51:47 作者：伍嘉源
这篇文章主要为大家详细介绍了如何利用JavaScript和Canvas实现绘制音频可视化波形图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
1. 效果演示
上图演示了音频的波形随着音乐的节奏而跌宕起伏
2. 基本概念说明
2.1 音频源节点
音频数据的来源，是音频处理的其中一个环节
2.2 时域图
声音信号是一维的时域信号，无法观察出频率随时间的变化规律
横轴代表时间， 纵轴是信号的变化（振幅）
2.3 频谱图
任何信号（当然要满足一定的数学条件），都可以通过傅立叶变换而分解成一个直流分量（也就是一个常数）和若干个（一般是无穷多个）正弦信号的和
每个正弦分量都有自己的频率和幅值，频率值作横轴，幅值作纵轴
3. 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas在音频可视化的应用</title>
</head>
<body>
<canvas></canvas>
<audio src="./1.mp3" controls></audio>
<script>
const audio = document.querySelector('audio')
const canvas = document.querySelector('canvas')
const con = canvas.getContext('2d')
// 初始化canvas的尺寸
canvas.width = window.innerWidth // 窗口的内部宽度
canvas.height = window.innerHeight / 2 //窗口的内部高度
document.body.style.backgroundColor = '#000000' // 背景颜色设置为黑色
// 定义数组和音频分析器
let dataArray, analyser
audio.onplay = () => {
// 初始化
const audCon = new AudioContext() // 创建音频上下文
const source = audCon.createMediaElementSource(audio) // 创建音频源节点
// 创建音频分析器
analyser = audCon.createAnalyser()
// 快速傅里叶变换的长度必须为2的整数幂
analyser.fftSize = 512 // 这里把快速傅里叶变换的长度设置为512
// 连接音频源节点到音频分析器上
source.connect(analyser)
// 连接音频分析器到音频终端上
analyser.connect(audCon.destination)
// 创建数组，用于接收分析器节点的分析数据
// Uint8Array 数组类型表示一个 8 位无符号整型数组
// frequencyBinCount是fftSize值的一半作为可视化音频的数组长度
dataArray = new Uint8Array(analyser.frequencyBinCount)
}
// 把分析出的波形绘制到canvas上
(function draw() {
// 动画帧，按帧绘制canvas
requestAnimationFrame(draw)
// 清空画布
const { width, height } = canvas
con.clearRect(0, 0, width, height)
// 让分析器节点分析出数据到数组中
analyser.getByteFrequencyData(dataArray)
// 设置canvas上下文绘制的颜色
con.fillStyle = 'skyblue'
// len表示获取分析到的音频数据数组长度的
// 这里除以2.5是剔除不经常出现的高频的部分
const len = dataArray.length / 2.5
// barWidth表示每个波形矩形的宽度
// 这里除以2是为了绘制对称的波形图
const barWidth = width / len / 2
for (let i = 0; i < len; i++) {
// data是8位数组的每个数据，因为是一个字节，即data的值都是 <= 255
const data = dataArray[i]
// barHeight表示每个波形矩形的高度，值为单位长度乘canvas容器的高
const barHeight = (data / 255) * height
// 绘制点y
const y = height - barHeight
// 绘制点x1
const x1 = i * barWidth + width / 2
// 绘制点x2
const x2 = width / 2 - (i + 1) * barWidth
// 绘制右半部分波形图
con.fillRect(x1, y, barWidth - 2, barHeight)
// 绘制左半部分波形图
con.fillRect(x2, y, barWidth - 2, barHeight)
}
})()
</script>
</body>
</html>到此这篇关于JavaScript+Canvas实现绘制音频可视化波形图的文章就介绍到这了,更多相关JavaScript Canvas音频波形图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了通过javascript实现扫雷游戏代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了详解webpack打包第三方类库的正确姿，我们主要介绍了webpack.optimize.CommonsChunkPlu，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了浅谈javascript 函数属性和方法的相关资料,需要的朋友可以参考下2015-01-01
LRU缓存就是一种常用策略,下面这篇文章主要给大家介绍了关于前端面试中常提到的LRU缓存策略的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了JavaScript使用concat连接数组的方法,实例分析了javascript中concat函数操作数组的技巧,需要的朋友可以参考下2015-04-04
Javascript中replace方法与正则表达式的结合使用教程
replace方法是javascript涉及到正则表达式中较为复杂的一个方法,严格上说应该是string对象的方法,下面这篇文章主要给大家介绍了关于Javascript中replace方法与正则表达式的结合使用的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
符合标准的表格变色的js代码2008-06-06
在网站中加入网页助手小精灵，当用户访问网站时，向用户问好，或是传递一些网站的重要信息，给用户带来极好的体验感，那么基于js代码是如何调用网页助手小精灵的呢？下面跟着脚本之家小编一起学习吧2016-06-06
这篇文章主要介绍了JS通过Cookie判断页面是否为首次打开 的相关资料,需要的朋友可以参考下2016-02-02
最新评论