周末折腾了时光机新增语音发送的功能，默认是输出一个 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％等类似，即可实现不同的音频时长对应相应的对话框长度，哈哈，刚刚改了下，完美~