团队博客by tiger

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

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

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

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

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

一）项目结构介绍

一  音频节拍示意： 

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

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

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

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

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

例1：如图“学”

例2：心想事成

->

->

->

二）技术流程：

主要基于以下几点

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

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

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

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

包括多个节拍组合中 

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

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

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

2:帧频时序控制下

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

例如 window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 30);
        };
})();

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

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

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

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

3：监听玩家的触屏交互

1）  记录触发

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

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

流程图 

（转自TGideas的新春又至 来一个音乐祝福语H5玩法，团队博客by tiger，链接是：https://tgideas.qq.com/gicp/news/475/6558217.html?from=list）