目前前端页面不仅仅要求功能实现，还要讲究更多的美感。例如html5原生的audio标签，加上controls属性，基本可以满足所需功能。但是无奈目前的样式太丑了，身为开发人员都看不下去何况需求方了。so，今天记录下实现的效果与代码。功能有：播放、暂停、进度条、下载。详细如下：
效果图：
图1：初始效果图
图2：开始播放效果图
图3：播放完毕效果图
代码如下：
html代码：
播放、暂停、下载图标可以去iconfont官网找自己觉得合适的
js代码：
加载src资源后重新加载到audio的父标签中，播放完毕后图标切换至初始图标
根据音频总时长动态改变时间显示
根据时长设置进度条进度，主要是控制进度条的坐标位置；反之根据进度条的位置确定当前音频资源应该播放的时间点
使用blob方式可以达到直接下载的效果，不需要跳转至新的浏览器页面；可以自定义当前下载文件名称
css部分：
样式可视情况自定义，我的是在layui弹框层，所以比较小
视情况自定义
