[阅 #5] 你有想过在表单验证中加入语音提示吗?

96
作者 goddyzhao
2017.09.11 08:36 字数 693

「阅」——JSCourse 旗下栏目,专门推荐我们为大家精心挑选的优质 JavaScript 相关技术内容

大家好,我是小 J,今天给大家分享一个新鲜事儿,小编我觉得这件事情创意不错,非常有意思。且听我慢慢道来!

国外有位在数字领域有超过 15 年经验的艺术家,名叫 Ruth John,前阵子她写了一篇文章,提出了一个很有意思的想法叫:把 Web Audio 用在表单验证中!而且她还用实际的例子来证明了她这个想法是可行的。怎么样,听上去挺有意思的吧(怎么我就没想到呢)。

表单大家都用过吧,甚至自己还实现过对吧,就像下面这种注册表单:

图片截取自 https://css-tricks.com/form-validation-web-audio/
图片截取自 https://css-tricks.com/form-validation-web-audio/

一般,我们会对用户的输入进行一定的前端校验,比如:Email 输入是否合法,密码复杂度有没有达到要求等等,如果不符合就会给出文字提示,就像这样:

图片截取自 https://css-tricks.com/form-validation-web-audio/
图片截取自 https://css-tricks.com/form-validation-web-audio/

但是大家有没有想过,如果这个表单在手机端,我们完全可以利用一些音效来给于用户反馈是否他 / 她输入的内容是否如何要求,就像这样:

查看 Demo 视频

我们暂且不去讨论这种方式是否真的更好,但起码它提出了一种新的交互思路,而且在技术上是完全可行的。为什么这么说呢?因为传统的表单校验技术上完全没问题,这里只要解决音频播放的问题就可以了,而 Web Audio API 就可以用来完成播放音频的任务。而且它在各种最新浏览器上的支持都还不错。而且,Facebook 开开源了 一套 SoundKit ,非常适合在这个场景中使用。

小编分享这个给大家主要不是技术上的而更多是交互和用户体验上的,其实在 web 页面中播放音频这件事情很早很早就有了,表单验证也是司空见惯,但是为什么别人就想到将这两者结合起来,这个是我们需要反思的,另外就是小编觉得这个想法本身一定会引发一系列关于 Web Audio 更丰富的应用场景的思考,希望大家能够有比较好的点子!谢谢!我们下期再见!

关注「jscourse」微信公众号获取最新课程和学习资料哦!

jscourse