WebCRT Audio(AudioContext) - 绘制音波图，超级好玩！

背景

最近正在做一个开源的项目–pear-rec，pear-rec 是一个跨平台的截图、录屏、录音、录像软件。截图功能上篇文章已经讲过了，现在正在做录音功能。其实录音功能不难，但是我想做的美观，所以我想实现一个波形图。来展示正在录音。

工具

• canvas
• audio
• jquery(可选)
• echarts(可选)

实现

原理逻辑

页面加载一段音频(audio),然后通过AudioContext对象解析音频的数据，然后转换成Uint8Array的数组，最后通过canvas实时画出数组的数据。就可以完成了！其实并不难，接下来我们就来实现吧！

准备工作

因为我们是简单实现一个demo,我选择了jquery和echarts来辅助我来开发，其实也可以不用。

<script src="https://fastly.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

静态页面

css 代码

             html,
                body {
   
   
                    margin: 0;
                    overflow: hidden;
                    font-family: sans-serif;
                    background: #13091B;
                    height: 100%;
                }

                body {
   
   
                    background: url(https://p1.music.126.net/gAmIGjlWnYXE_0O8LFp5-w==/109951164382001054.jpg) no-repeat;
                    background-size: cover;
                }

                #canvas {
   
   
                    position: fixed;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }

                audio {
   
   
                    visibility: hidden;
                }

                #pause-btn,
                #play-btn {
   
   
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: #13091B;
                    background: #007A99;
                    display: block;
                    width: 150px;
                    height: 45px;
                    line-height: 45px;
                    font-size: 18px;
                    cursor: pointer;
                    border-radius: 4px;