深圳摇滚音乐联盟

(前端项目实战) 微信 H5音乐项目总结

前端资料s 2019-04-23 22:49:39

作者: yiiouo

https://segmentfault.com/a/1190000014168133


刚刚完成了一个 H5 项目,途中使用 audio 的时候遇到不少坑,所以写篇项目总结。

项目需求

要经过微信授权才能进入。所以只能在微信打开。

流程:

  1. 开场有个小的过渡效果,有 bgm

  2. 接着连续两张图片显示,有各自的 bgm

    1. 第二张图片,有文字,文字的显示要有打字的效果,附带 bgm

  3. 主场面

    1. 拥有各个小物品,像时钟、猫、电脑、手机、杂志、durex 等等

    2. 点击各个物品,对应的图片会切换,并且播放声音,最后显示一个确认框。时钟也会转动

    3. 点击关灯,进入下一个画面

  4. 接着又是图片的显示。图片会根据时钟的时间,显示不同的图片。也是简单的图片渐变显示、打字效果、弹幕和 bgm

  5. 最后是结果页,结果页有三个按钮,重新来一次,生成截图,外链

大概的需求就是这样,挺简单的。

遇到的问题

微信 ios 无法自动播放声音

这个处理起来不难。