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

Creator 2.x
#1

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

symmetry_practise_3
symmetry_practise_3479×582 357 KB

实现思路

第一版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
以及百度搜到的某播放器界面

37赞
#2

整挺好   

3赞
#3

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

1赞
#4

大佬牛皮！

1赞
#5

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

#6

:+1:牛批啊大佬

#7

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

#8

大佬tql :heart_eyes:

#10

mark!!

#11

mark!!

#12

厉害厉害:tada:

#13

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

#14

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

#15

mark！

#16

mark一下~

#17

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

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

image
image560×550 68.6 KB

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

image
image658×528 22.5 KB

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

2赞
#18

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

#19

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

#20

你是真牛逼

#21

顶一下mark!!