这是你内心的声音

2018-05-28 11:49:00
admin
原创
187
天津一汽:听~这是你内心的声音


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

识别图中二维码

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

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


案例:听~这是你内心的声音

出品:天津一汽

亮点:

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



技术实现: jQuery + audio