SAO Utils音频可视化插件
本文最后更新于 1470 天前,其中的信息可能已经有所发展或是发生改变。

一个月前,在b站无意间刷到一个分享SAO Utils桌面图标挂件和音乐挂件的视频,视频中那个白色的动态频谱可以将系统音频的频谱展示出来。很好,你成功的引起了我的注意。看了下视频简介居然还贴心的附上了下载地址,下载后解压一看,发现事情并不简单,里面都是ini配置文件。纳尼!?还以为是SAO Utils的新插件,原来是雨滴的皮肤!?为了这么一个小小的动态频谱我还得安装一个雨滴?不想再安装一个雨滴,但是又很想要一个在桌面上任意位置摆放,大小可调的频谱插件。权衡之下,打算自己弄一个SAO Utils插件。但是SAO Utils的SDK中暂时还没有开放GUI界面的接口,而且用C++编写的频谱显示插件的预设样式有限,用户难以自定义。而SAO Utils还有一个强大的桌面网页挂件,这使得用户可以通过编写HTML文件来自定义频谱显示样式,然后通过网页挂件打开让其在桌面上展示出来。那么现在插件的功能确定为捕获系统音频,将经过FFT处理后的频谱数据通过WebSocket协议发送给客户端。网页客户端通过调用频谱数据进行显示。

视频演示


使用说明

开发日志

  • 2020-05-20:V1.2.1版本更新支持EXP 1实验版的SAO Utils。新增调试版插件下载,可输出日志文件。
  • 2020-05-19:V1.1.0版本的插件在beta 1beta 2(steam)版本的SAO Utils中测试过通过。已知在实验性版本Exp 1中会导致程序崩溃与SAO Utils实验版兼容的插件会在后续中推出,敬请期待。

插件下载

下载最新版本的插件:ADV_Plug-in.zip,将下载的 ADV_Plug-in.zip 压缩文件解压。

文件夹结构如下
│  readme.txt
│
├─ADV_Client
│      adv.js
│      index.html
│
└─AudioDVServer
        advConfig.ini
        module64.dll

插件安装

将解压缩根目录下的AudioDVServer文件夹拷贝至SAO Utils根目录的Plugins文件夹中,重启SAO即可。

插件配置

安装完成后打开SAO Utils首选项中的插件管理页面,将名称为AudioDVServer的插件选择启用后点击保存。

通过更改AudioDVServer文件夹中的advConfig.ini文件来配置插件。当配置数据错误或无配置文件时使用默认值,配置值不区分大小写。

  • ip:可选,默认值为127.0.0.1,可更改为any,指代地址0.0.0.0。只支持any与默认参数local,定义插件提供服务的地址。
  • port:可选,默认值为5050,定义插件提供服务的端口号。
  • maxClient:可选,默认值为5,定义客户端最大连接数。
  • logger:可选,默认值为false,调试版(Debug Version)专有,发行版(Release Version)可设置,但无效。设置为true后可在插件所在目录下输出日志文件ADV_Log.log

advConfig.ini 文件示例:

[Server]
ip = local
port = 5050
maxClient = 4
logger = true

客户端配置

压缩包内提供了一个频谱显示客户端的示例,可用SAO Utils桌面网页挂件打开。通过设置ADV_Client文件夹内的index.html文件来配置地址,端口号以及显示频谱的样式。必须保证客户端与插件设置的地址与端口号一致。示例文件已配置好,可以直接使用。开发者也可通过编写HTML文件来定义自己的频谱显示客户端。

可以更改index.html中的以下代码来自定义客户端,值得注意的是IPPORT需要与插件的设置一致。

var IP = "local";
var PORT = 5050;
//频谱线颜色
var LINE_COLOR = "rgba(0,191,255,0.4)";
//分界线的颜色
var CENTER_COLOR = "rgba(0,0,0,0.9)";

使用注意事项

请不要频繁刷新网页挂件:与浏览器不同的是,网页挂件刷新后不会立即关闭前一个WebSocket连接,需要等待一段时间后才能释放,而新的连接会被插件计数。所以当频繁刷新次数加上已有的客户端数大于设置的最大客户端连接数时,会造成被刷新的那个客户端无法正常显示。如果出现这种情况,可以通过打开SAO Utils首选项中的插件管理页面重启该插件,或者等待之前的客户端自动断开连接。

开发接口/API

ADV_Client文件夹内的adv.js封装了一个ADV_Plugin类,并提供了一个ondata()接口方便数据的引用。

引用方法:

var adv = new ADV_Plugin("ANY",5050);
adv.ondata = function(audioData){ //do something with audioData...};

每当客户端收到插件发送的频谱数据就会触发ondata事件。
其中audioData是数据长度为128的数组,前面64个数据为左声道FFT数据,后面64个数据为右声道FFT数据。每一个声道的FFT数据位从低到高对应频谱频率的由低到高。


最后

最后附上项目地址,欢迎开issue提问或者建议。

因为平时时间不太充裕,所以测试平台也只在本机(Win10 1903)上测试过,如果出现Bug的话欢迎指出。如果你喜欢本插件的话,还请为这个项目加一个Star啦~


post

版权声明:版权所有权属于Mashiro_Sorata,转载请注明出处,谢谢!



  • 本文作者: Mashiro_Sorata

  • 版权声明: 本站所有文章除特别声明外,均采用 (CC)BY-NC-SA 许可协议。转载请注明出处!


暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇