新春又至 来一个音乐祝福语H5玩法

基于Html5的 webAudio API以及canvas。 通过控制包括背景节拍音和多个字符音频的组合播放,结合用户的互动反馈 达到基于节拍节奏控制场景和动画的表现。让用户进行主题 自由灵活创作丰富的MV互动。

基于多节奏音频控制动画表达的互动方案

音乐关联的动画互动 基于节拍来组织是最关键的地方

通过对基础节拍音乐进行载入代码分析。在帧频时序下,符合节拍节奏的演奏下把节拍动画 场景、单音和 单音动画,在玩家的根据自己的节奏交互下进行有机组合。

演奏多样丰富,富有节奏的MV。 还可以通过记录玩家的操作记录(一组简单触屏数据),可以保存完整的玩家自己制作的MV

一)项目结构介绍

一  音频节拍示意:

     节拍:是音乐中的重拍和弱拍周期性地有规律地重复进行

    节拍音在这里做为背景音乐 重复播放

1:背景节拍音乐控制mv的背景和节奏简单的动画

2:用户任意时间点击交互

在节拍节点接入播发对应的词字音 以及对应的动画

例1:如图“学”

===》

例2:心想事成

->->->

二)技术流程:

主要基于以下几点

1:通过对节拍音频的分析获得该音频文件得精确节拍数据

例如  audio的书duration获得该音频总时长

然后结合该节拍的节拍数据,(节拍数据是指该段音频一共有重复了多少次节拍)

然后获得一系列的精确的一个节拍的时间段

包括多个节拍组合中

1):最小节拍 wordTime 例如对应音 “心 想 事 成”

2):次级组合节拍spaceTime 例如对应

这个操作是为了避免(平台对音频的读取和音乐制作软件有出入)

2:帧频时序控制下

注意在标准的帧频时序下判断检测音频的position,不能直接监听音频的变化事件 这样会有误差

1):监听音频播放的位置 position 检测上述各个节拍的节点时间

2):在重复节拍中在不同的节拍节点播放对应的背景 动画

a):最小节拍 wordTime 例如对应不同动画

b):次级组合节拍spaceTime 例如对应不同场景(背景色块等)

3:监听玩家的触屏交互

1)  记录触发

2)  自动贴合节拍 比如 最小节奏是单字音 对应的最小节拍时间段 wordTime 在音频播放的position到达该节点播放该字动画

3)  记录该单音,在下次触发时候 通过判断时间间隔决定 衔接该单音进行组合 还是从新开始新的组合  例如对应单音组合 “心 想 事 成”

流程图

 

技术研究

原文地址:https://tgideas.qq.com/gicp/news/475/6558217.html?from=list