js+java后台基于开源项目上实现web端音频可视化（three.js）（一）

本文链接：https://blog.csdn.net/luanshi_hanpi/article/details/120146590

开源代码
 原项目
本项目是在github一个开源项目的基础上，简单添加了一些功能：
一、播放本地音频文件
1.前端实现细节
2.后端实现
二、小程序录音上传到后台，后台发送给前端进行播放
3.实时录音（未实现）
所以更多的是学习下后台功能，代码实现的逻辑
效果图
在这里插入图片描述

1.前端实现细节
这里先讲解下播放本地音频文件是如何实现的
.
.
.
.

首先，讲讲音频文件如何加载的。

如果想了解下js音频可视化的代码是如何实现的，可以看这篇文章学习下：
HTML5 随音乐节奏变化的频谱图动画
里面会讲到AudioContext如何解析音频文件实现可视化。

回归本项目，audioload函数将本地资源路径或者是文件（通过按钮选择提交文件）传入，其细节是在chunk开头的js文件实现的，原项目做的实在太牛逼了（麻省理工的人开发的）3w多行代码= =开发了近1个月，也就只看了很少一部分的代码。。

可以试着用控制台打印下，然后会发现其底层也同样是用媒体流实现的
在这里插入图片描述
用音频环境，也就是说，他是用音频缓冲区进行解析播放（其实音频可视化也就这个API能用吧，看了很多js的音频可视化项目，全部都是用到了AudioContext，也就是处理音频的API）。打印了一波发现果不其然

在这里插入图片描述
所以这里的所有音频都是转化为了AudioBuffer的。这个chunk文件实现了将音频文件转AudioBuffer（其实也很简单，用一些API就可以实现blob,ArrayBuffer,AudioBuffer互转，AudioContext对象的decodeAudioData()就可以使ArrayBuffer转AudioBuffer),我们只需要把文件路径传进去就行了,不用管这些。

那么这里还有一个问题，出于安全考虑，浏览器限制了访问的权限，除了该项目的静态资源外，本地资源是不能被访问的。如何加载本地文件？
如果作为静态资源，那么一次性将所有歌曲加载到tomcat容器上，显然是不太合理的，那么最好就是将本地资源映射到tomcat上，这里请看另一篇文章：idea配置tomcat本地资源路径
这样就可以让本地资源被访问啦。
在这里插入图片描述
然后就是前端与后台的交互功能的实现了。