84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
就如图所示，在未播放时方便又红点，播放时，对话框里的小喇叭会动态变化。而且对话框的长度会随的时间的长短而改变！请问该如何制作？或者有类似的插件，谢谢！
认证高级PHP讲师
这种DOM操作复杂的建议用react或者angularjs，通过状态管理来实现dom操作。
这也没什么太大的难度
红点逻辑看你的需求了，要是想换设备也有未读过的点，就要在后台持久保存了，根据后台返回的未读信息来显示对应语音的红点；不考虑换设备，只是刚推送的信息有红点，就直接保存在 sessionStorage 里就行。
长度那个，要求后台返回音频的时长，你按时长，规定一个比例，设置 DOM 的长度就行，注意设备最小长度。
播放动画，只用在 audio 标签的onplay、onpause、onended三个事件中改变动画 class 就行。
onplay
onpause
onended
我写过一个angular的简易版本，可以播放，停止，就是将audio包了一下。没有楼主的这么复杂，有空我完善一下，不过我是在pc端使用的。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这种DOM操作复杂的建议用react或者angularjs，通过状态管理来实现dom操作。
这也没什么太大的难度
红点逻辑看你的需求了，要是想换设备也有未读过的点，就要在后台持久保存了，根据后台返回的未读信息来显示对应语音的红点；不考虑换设备，只是刚推送的信息有红点，就直接保存在 sessionStorage 里就行。
长度那个，要求后台返回音频的时长，你按时长，规定一个比例，设置 DOM 的长度就行，注意设备最小长度。
播放动画，只用在 audio 标签的
onplay、onpause、onended三个事件中改变动画 class 就行。我写过一个angular的简易版本，可以播放，停止，就是将audio包了一下。没有楼主的这么复杂，有空我完善一下，不过我是在pc端使用的。