乐趣区

关于vuepress:我做了一款vuepress的音乐可视化播放插件

jiezi

体验地址：博客，github，npm

前言

博客上的音乐播放器，大多都长一个样，小小的，塞在页面的一个角落里，在他人阅读文章的同时能够听音乐，减少某些体验的称心指数。而我，做了一件不太一样的事件：

博客不就是让人看文章的么？再播放音乐甚至有可能会升高浏览的品质，那听歌就好好听歌不好么？既然要体验，那就沉迷体验到爽不好么？

某天，偶尔关上了豆瓣 FM 网页版，很合乎豆瓣的感觉，洁净简洁，当然网上相似的音乐播放有很多，这里为我前面做的事件埋下了伏笔。

我博客是用 [vuepress]() 搭建的，主题是 vuepress-reco，最开始想找一个播放音乐的插件，于是去找了 awesome-vuepress，搜到惟一和音乐相干的插件，只有一个叫：vuepress-plugin-music-bar 的插件 ….. 还是个 bar…. 有点失落。于是，没人做？那 … 我做个试试？最终的效果图就是下面看到的四张图了：亮 / 暗系歌词，亮暗系可视化解码。在看完 vuepress 官网的插件 api，就开始搞了！

开搞

不管怎么画页面，初衷是沉迷式体验，找了很多播放器的大体构造，还是感觉网易云的播放界面算比拟难受的，本人也有尝试画过脑海里的播放界面，然而最终还是抉择用网易云的成果（拿来吧你）：左侧黑胶唱片滚动，右侧歌词滚动，目前不须要上一曲下一曲，就有播放和分享按钮，也就是长这个样子：

一天半工夫，匆匆忙忙做完之后，npm link 调试胜利就发了一版 npm 包。好用？不好说。能不能用？能！

优化

做到这里之后，沉迷式有那么点感觉了，体验？照搬过去就是好的体验么？不，还是要加点货色，比方 可视化。

这里特别感谢网易云大前端团队的一篇文章：Web Audio 在音频可视化中的利用，基本上照着看下来，外面的文献也看一下，就能够做进去下面的成果。说实话，文献是真头大 …. 波长，正余弦，频域时域，奈奎斯特定理，还有什么疾速傅里叶变换，头发在偷偷的掉 … 顺便附上一张某个文献的截图：

不过不看这些也能够做进去！

基本上的思路就是：

  1. 创立 AudioContext，关联音频输出，进行解码、管制音频播放和暂停
  2. 创立 analyser，获取音频的频率数据（FrequencyData）和时域数据（TimeDomainData）
  3. 设置疾速傅里叶变换值，信号样本的窗口大小，区间为 32-32768，默认 2048
  4. 创立音频源，音频源关联到分析器，分析器关联到输出设备（耳机、扬声器等）
  5. 获取频率数组，转格局，而后用 requestAnimationFrame 通过 canvas 画进去

这些货色下面的文章里讲的很具体，我这种门外汉就不多说啥了。

遇到的问题

npm link

之前应用 npm link 的时候，依赖包没有三方 / 四方的依赖，所以没留神到，如果开发的 npm 包带有别的依赖，那么调试的时候要在主我的项目里的 package.json 先加上这些包，就不会报错说 resolve 失败什么的了，调试完结记得 npm unlink 断开。

接口

原本想用的是 网易云音乐 NodeJS 版 API，然而有些货色不好找，比方我须要歌曲 id，封面和歌词，然而文档里没有歌曲 id 反查专辑 id 的（封面在专辑 id 里），只有一个歌曲详情的，然而这个接口，还须要认证跳转 …. 对于使用者来说，我没必要让使用者多这么一步操作，而且很容易出错。于是就换了一个 api：保罗 API，这个 API 能够解析的网易云歌曲不是那么的多，不过个别的够了，惟一的毛病就是，多频次刷新会始终 pending，应该是后端设置了 ip 频次。

既然都有问题，不应用接口行么？尝试找一种 mp3 文件解析进去歌词和封面呢？找到一个 jsmediatags 的仓库，能够解析 ID3v2，MP4，FLAC 等字段，然而 ….. 这不就是给用户增加麻烦么？须要找专辑，歌词，歌曲，艺人信息全副合一的音源文件 …. 如果我是用户，我不会用它。

翻来覆去，最终还是决定，歌曲用户传进来，而后再传一个歌曲 id，封面和歌词走接口，歌曲就是传进来的音源链接，应用办法如下：

<MusicPlayer musicId="xxx" musicSrc="xxx.mp3" style="margin:0 auto">

音源我集体倡议要么放 vuepress 的动态资源，要么就搞成相似图床一样的音源仓库，这样也好保护。

前期想方法优化吧。

主题色

亮系和暗系是适配 vuepress-reco 的主题切换做的适配。

结尾

灵感来自 豆瓣 FM，构造参考了昊神的 音乐播放器，可视化播放参考了 Web Audio 在音频可视化中的利用，接口感激 保罗 API，这么一说我如同也没做什么事 …..

该插件已发 npm 包，awesome-vuepress 仓库也已收录，可能多少还会有点体验上的小问题，会缓缓修复的。大家也能够提倡议，能听进去算我输！

我的项目写的匆匆忙忙，心愿能够做一点更有深度的货色吧——致本人。

更新

修复了一些 bug，反对 10 种主题色配置！也能够自定义！(2021-12-29)

原文地址：https://daodaolee.cn/fe/vuepr…，转载请分割作者并注明出处！

退出移动版