NativeHTMLaudioUI当我们使用Web播放音频时，我们会发现native标签比较简单，有些low。不信可以点击上面的预览试一试。那么我们可以自己美化播放器的UI吗？当然，这篇文章就是介绍我们应该具备哪些知识，如何一步一步自定义播放器的UI，起到吸玉的作用。首先列举一下我们改装后的播放器的功能：点击显示开关（显示/关闭歌词），将鼠标悬停在小喇叭上可以调节音量，点击上方的歌曲名和歌手名区域进度条来切换播放器的形式。如果在自己的博客中引入播放器，播放歌曲时切换页面，播放器的播放状态会记录在localStorage中，当加载新页面时，会自动按照上一页的进度进行播放。你可以自己维护播放列表，如果你碰巧了解一些前端知识，只需将约定格式的数据传递给播放器组件即可。有关详细信息，请参阅源代码。现在我已经把它打包成一个vue组件发布到npm官网了。如果需要，可以直接使用npmileo-player--save。npm包地址完成上面的例子我们将使用的音频接口如下：play当音频/视频开始或不再暂停时触发。暂停音频/视频暂停时触发。timeupdate当前播放位置改变时触发。waiting当视频停止时触发，因为它需要缓冲下一帧。playing当音频/视频因缓冲而暂停或停止后准备就绪时触发。timeupdate当前播放位置改变时触发。以下是演示地址代码的概览。更详细的内容可以在项目地址中找到，这里就不一一贴了。
Demo有什么想法欢迎留言讨论
