Audio仿微信语音播放效果

23天前208阅读约3分钟 

周末折腾了时光机新增语音发送的功能,默认是输出一个 audio 的标签,然后简单的写了两句 CSS,今天发现在手机端很丑,哈哈。

今天花了睡中午觉的时间重新写了个仿微信语音播放效果,看上去还行,哈哈。

*PS:本来打算网上直接找个现成的,但是都是不太好看,然后又都是用的 JQ 写的,我还是喜欢用 JS,无奈只能自己动手,哈哈。

用了 N 个 DIV 加 CSS 加几句蹩脚的 JS,将原生的 audio 隐藏,终于看上去舒服些了,哈哈。

目前可以实现首先是样式和功能基本与微信语音一样,然后也有未播放时有小红点,点击播放后小红点消失,然后点击暂停时会出现继续播放,同时播放时有动态小喇叭样式,哈哈。

其实 DIV 和 CSS 是最简单的一步,基本上就是一个圆角矩形加一个小三角可以组合成对话框,然后内部分别是播放喇叭、音频时长、未播放小红点、继续播放以及 audio 标签,基本上就是整个的框架。

JS 部分主要是获取到当前点击的 ID,然后给下面对应的 audio 执行播放、暂停等。

我主要判断了是否未播放,如果是,点击就播放同时未播放小红点消失,然后小喇叭开始动,再点击即为暂停,同时小喇叭停止并出现继续播放按钮,再点击时继续播放并隐藏继续播放按钮,播放结束时切换为小喇叭停止。

基本上就能复现微信语音播放的效果,其中有几个地方比较麻烦。

一个是获取音频时长,可以用 JS 可以获取并赋值到时长元素内,也可以使用 PHP 在时光机接收页面用 Getid3 组件,也很方便,两个我都试了,没有差异,但是 JS 可能会存在有概率读取不到,然后需要注意获取的都是带小数点的秒数,取个整就行。

还有一个是小喇叭播放的问题,我原本是用纯 CSS animation 实现的,但是问题比较多,在测试页面上调整好,到实际应用的时候又出现各种错位啥的,然后我就选了个简单偷懒的方法,哈哈,自己 ps 做了个喇叭的 PNG 和 GIF,JS 判断未播放、暂停以及播放结束时为 PNG,播放时为 GIF,哈哈。

基本上就这么多吧,哈哈,又划水了一篇文章,哦耶!

对了,昨天博友和我说可以做个语音翻译,哈哈,其实也是可以的,我记得在公众号开发者里打开语音识别,返回的字段里会增加一个 Recognition 字段,直接调用就是语音识别出来的文字解析,后期可以加个长按翻译成文字功能,哈哈~

*新增:对了,还有个音频长度的对应相应 DIV 对话框长度设置,可以用上面获取的取整时长做个语法判断即可,比如 10 秒以内 DIV 长是 50%或固定的 px,10-20 秒是 60%,20-30 秒是 70%等类似,即可实现不同的音频时长对应相应的对话框长度,哈哈,刚刚改了下,完美~

phpJavascriptcssHTML时光机9 

Audio仿微信语音播放效果 - 祭华的博客