荔枝:声音艺术馆

2018-09-26 H5案例分享 H5案例分享
荔枝:声音艺术馆


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

声音艺术馆-查阅二维码

完整欣赏此案例大约需要1分30秒


案例:声音艺术馆

出品:荔枝

亮点:

  1. 1. 策划上,以声音为主角,通过用户的声音画一幅画。首先是声音艺术馆入口,进入艺术馆,横向滑动收听8个不同音乐的声音,同时对声音有解释说明文字,点击【创作你的声音艺术】按钮,进入用户制作页面,下面有10句让用户读的文字引导,也是横向滑动观看,当然,不按提示说也可以,点击录音,用户说话,系统自动识别音频信息,最后生成用户声音的鉴定海报,里面有音乐画作、音色鉴定、音色评分和声音密码。 

     

    2. 设计上,2.5D立体视觉,主色调为紫色,运用了颗粒度的质感。 

     

    3. 体验上,刚刚进入H5,只觉得音乐很好听,进入用户自己创作页面,就开始有趣了,你可以用自己不同的声音,反复的尝试,不同的声音,出现的音乐画作不同,音色鉴定也不同,原来声音可以可视化。小五音色鉴定出有少萝音、萝莉音、少御音、少女音四种,不过觉得还有其他种。可以留言告诉我,你发现的新音色鉴定结果。

     

    4. 技术上,采用提取人声的基频信息以及语音特征MFCC(梅尔倒谱系数)作为声音特征值,围绕声音特征值定义画笔像素,对称方式,轨迹以及颜色,并建立绘图模型。使同一个人念同一个文本,绘制的图形大致一样;同一个人念不同文本,绘制的图形有所差异;不同的人念同一个文本,绘制的图形又有一定差异;不同的人念不同的文本,绘制的图形便更为多样化。



技术实现: video



以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

荔枝:七夕聊妹/聊汉/聊朋友圈小工具

LEVI'S:这好像是我第一次把声音交给别人

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~