腾讯体育:我为中国队创作一首加油歌

2019-09-08 H5案例分享 H5案例分享
腾讯体育:我为中国队创作一首加油歌


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

识别图中二维码

我为中国队创作一首加油歌-查阅二维码

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


案例:我为中国队创作一首加油歌

品牌:腾讯体育

技术实现: audio + JavaScript

亮点:

1. 创意定位

腾讯体育在篮球世界杯时刻,为中国队加油助威的H5。在赛场上,作为观众为运动员加油助威是我们最好的方式,有节奏的助威可能更显示出作为观众的整体素质。

 

2. 策划上

为中国队创作加油音乐,进入首屏后,首先点击“GO”按钮,就听到有节奏为中国队助威的音乐,点击“创作你的音乐”按钮,会有指引提示:

将下方的音符向上拖动音乐元素到人物身上,

向下拖动去掉人物身上的音乐,

一共16种音乐,见下图

 

 

屏幕上方一共6个人物,通过自由添加、替换、删除音乐,合成专属音乐,这个过程中可以不断的给人物添加音乐,删除音乐,在录制音乐的过程中,形成音乐的不同旋律。

点击下方“开始录制”按钮,一共80秒的录制时长,当然,可以不录制那么久,多少秒都可以,最长是80秒。点击“结束录制”完成整体的音乐录制,最后会生成一张音乐海报!保存后,分享朋友圈,朋友长按进入这支H5,就可以听到你的专属为中国队加油的音乐。

 

3. 技术上

案例采用了微信授权,不能看到具体代码,小编评估,音乐的不同节奏,应该是使用数组或者字符串形式记录下来,上传到服务器或者url中的参数值,生成不同的音乐旋律id号,朋友进入H5,才可以听到你的专属音乐。

 

4. 体验上

整体案例比较有趣,互动性很强,当你静下心,谱出一首自己的音乐后,确实分享的意愿更浓。

 

 





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

标签

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

相关推荐:

QQ音乐:耳朵,你辛苦了

腾讯视频:明日之子

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~