【分享】累了吗?进来听听音乐吧——shader实现音频可视化

基于Creator 2.4.0,只支持web。最新版已经支持native和小游戏。

实现思路

第一版Web Only

主要思路是用web api提取音频频域数据写入RenderTexture,然后用shader读取该纹理进行渲染。

支持native、小游戏的通用版

主要思路是用工具离线提取音频频域数据,写入纹理。运行时渲染和声音同步执行。


资源

Demo地址

http://caogtaa.gitee.io/ccdemos?scene=SceneVisualizeMusic
(音频加载可能稍慢)

源码

https://github.com/caogtaa/CCTricks/tree/master/assets/Demo/VisualizeMusic
如果喜欢记得点个小星星~star
(master分支的源码暂时只支持Web)

插件

可视化icon
http://store.cocos.com/app/detail/2892

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
https://www.shadertoy.com/view/Mlj3WV
以及百度搜到的某播放器界面

33赞

整挺好   

3赞

手动:+1::+1:手动:+1::+1:手动:+1::+1:

1赞

大佬牛皮!

1赞

想到一个方法解决原生和小游戏上没有API的问题,开搞。晚些时候会把Demo放商店。

:+1:牛批啊大佬

太强了吧,必须给大佬顶一下

大佬tql :heart_eyes:

mark!!

mark!!

厉害厉害:tada:

大佬可以简单分享一下思路吗? 最近升级引擎在迁移blit的实现在原生层发现缺了很多渲染相关接口, 现在在jsb绑定层一个个手动补, 有点头疼. 另外请问小游戏上缺api是什么意思呢? 是指canvas模式下缺接口吗?

简单地讲就是没有 AnalyserNode 实现,无法实时获取音频的频域数据做展示。

mark!

mark一下~

做了一个方案让可视化可以在小游戏上运行,可以兼容所有小游戏平台。做成了插件已提交到Cocos Store。
http://store.cocos.com/app/detail/2892

实现思路是以60 fps离线提取音频频域数据,写入纹理。运行时渲染和声音同步执行。
安装插件后可以在右键菜单里直接完成纹理提取,在同目录生成"音频名字-fft.png"文件。

将音频文件和纹理同时挂到Demo场景下即可实现同步播放。

也可以运行时渲染指定音频
参考 MusicVisualizer.SyncAudio() 方法

2赞

大佬,下载了您的插件 想尝试 用来做音乐游戏 是否可行?

感谢支持 :heart:
做这个的初衷是练习shader,并不是做音游框架。
个人理解音游主要是处理节拍数据,我玩过的音游都是不需要展示频域数据的,倒是正经的音乐播放器会展示。
如果要用频域数据丰富一些游戏的特效表现倒是可以。

你是真牛逼

顶一下mark!!