audio标签自定义样式修改

目前前端页面不仅仅要求功能实现，还要讲究更多的美感。例如html5原生的audio标签，加上controls属性，基本可以满足所需功能。但是无奈目前的样式太丑了，身为开发人员都看不下去何况需求方了。so，今天记录下实现的效果与代码。功能有：播放、暂停、进度条、下载。详细如下：

效果图：

图1：初始效果图 图2：开始播放效果图 图3：播放完毕效果图

代码如下：

        html代码：

播放、暂停、下载图标可以去iconfont官网找自己觉得合适的

        js代码：

加载src资源后重新加载到audio的父标签中，播放完毕后图标切换至初始图标 根据音频总时长动态改变时间显示 根据时长设置进度条进度，主要是控制进度条的坐标位置；反之根据进度条的位置确定当前音频资源应该播放的时间点 使用blob方式可以达到直接下载的效果，不需要跳转至新的浏览器页面；可以自定义当前下载文件名称

        css部分：

样式可视情况自定义，我的是在layui弹框层，所以比较小 视情况自定义