微信语音聊天对话框如何制作？？

Question

就如图所示，在未播放时方便又红点，播放时，对话框里的小喇叭会动态变化。而且对话框的长度会随的时间的长短而改变！请问该如何制作？或者有类似的插件，谢谢！

Answer 1

这种DOM操作复杂的建议用react或者angularjs，通过状态管理来实现dom操作。

Answer 2

这也没什么太大的难度

1. 红点逻辑看你的需求了，要是想换设备也有未读过的点，就要在后台持久保存了，根据后台返回的未读信息来显示对应语音的红点；不考虑换设备，只是刚推送的信息有红点，就直接保存在 sessionStorage 里就行。

2. 长度那个，要求后台返回音频的时长，你按时长，规定一个比例，设置 DOM 的长度就行，注意设备最小长度。

3. 播放动画，只用在 audio 标签的 onplay、onpause、onended 三个事件中改变动画 class 就行。

Answer 3

我写过一个angular的简易版本，可以播放，停止，就是将audio包了一下。没有楼主的这么复杂，有空我完善一下，不过我是在pc端使用的。