天津一汽：听～这是你内心的声音

2018-05-25 H5案例分享 H5案例分享

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

识别图中二维码

听～这是你内心的声音-查阅二维码

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

案例：听～这是你内心的声音

出品：天津一汽

亮点：

策划上，以“留声机”的声音为出发点，通过6个关于声音的问题，回答每道问题，都会告诉你，当前问题是否回答对，无论回答正确还是错误，都有对问题答案的解释。一共4个结果，通过你的选择，给出一个听诊结果。
设计上，乳白色背景，黑色线条，整体线稿风格。
技术上，一共创建了6个audio标签，每个问题对应一个audio声音，这样的好处，是可以达到音频的预加载。如果使用一个audio标签，每次更改src音频的路径，会造成，声音需要播放时，还正在加载，给用户的感觉是没有声音。

技术实现： jQuery + audio

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

标签