目前前端页面不仅仅要求功能实现，还要讲究更多的美感。例如html5原生的audio标签，加上controls属性，基本可以满足所需功能。但是无奈目前的样式太丑了，身为开发人员都看不下去何况需求方了。so，今天记录下实现的效果与代码。功能有：播放、暂停、进度条、下载。详细如下：
效果图：
图1：初始效果图
图2：开始播放效果图
图3：播放完毕效果图
代码如下：
html代码：
播放、暂停、下载图标可以去iconfont官网找自己觉得合适的
js代码：
加载src资源后重新加载到audio的父标签中，播放完毕后图标切换至初始图标
根据音频总时长动态改变时间显示
根据时长设置进度条进度，主要是控制进度条的坐标位置；反之根据进度条的位置确定当前音频资源应该播放的时间点
使用blob方式可以达到直接下载的效果，不需要跳转至新的浏览器页面；可以自定义当前下载文件名称
css部分：
样式可视情况自定义，我的是在layui弹框层，所以比较小
视情况自定义
目前前端页面不仅仅要求功能实现，还要讲究更多的美感。例如html5原生的audio标签，加上controls属性，...
1. audio标签无法改变样式 尝试给audio标签添加背景图片发现无果，只能自定义播放器样式，通过js捕获au...
改变audio标签样式 改变原生audio样式 隐藏audio标签，用div实现一个样式 代码详细https://...
前言： 对audio标签修改样式实在痛苦了，直接运用了下wavesurfer.js效果看起来还行吧！那就废话不多...
解决audio标签样式问题及ios自动播放问题 html代码如下，ios的audio标签好像不支持ogg文件播放，...
修改a标签的默认样式 正常的超链接写法，未加任何自定义css样式： 超链接 点击链接之前的样式： 点击链接之后的样...
微信小程序（原生） - 修改自定义组件样式 修改自定义组件样式 需求场景： ...
修改指示点修改轮播样式 1、自定义指示点 js css 美化修改轮播样式 js css
最近公司项目需要在移动端页面中使用语音播放功能，直接使用audio标签即可完成，但奈何默认的audio样式太丑，没...
1、通过标签设置样式和CSS修改样式的对比 1.1 通过标签设置样式的缺点 1.1.1 需要记忆哪些标签具有哪些属...
本文标题：audio标签自定义样式修改
本文链接：https://www.haomeiwen.com/subject/iwcxiktx.html
网友评论