Html5 audio标签样式的修改


Posted in HTML / CSS onJanuary 28, 2016

先给大家介绍下HTML5中的新元素标签
src:音频文件路径。
autobuffer:设置是否在页面加载时自动缓冲音频。
autoplay:设置音频是否自动播放。
loop:设置音频是否要循环播放。
controls:属性供添加播放、暂停和音量控件。
由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下:

Html5 audio标签样式的修改

作为技术实现,它的原理比较简单,就是把原生的audio隐藏,然后用div来显示播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取,有时不行,比较坑,所以建议在audio标签上自定义duration属性存放时长,这时,如果组件获取不到时会来取这个值。

复制代码
代码如下:

this.settings.target.on('loadedmetadata', function() {
_this.duration = _this.audio.duration;
if (_this.duration != "Infinity") {
_this.durationContent.html(Math.floor(_this.duration) + 's');
} else {
var attr = $(_this.settings.target).attr('duration');
if(attr){
_this.durationContent.html($(_this.settings.target).attr('duration')+"s");
}else{
_this.durationContent.html('');
}
}
});

以上内容给大家介绍了Html5 audio标签样式的修改 ,希望对大家有所帮助。

HTML / CSS 相关文章推荐
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 #HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 #HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 #HTML / CSS
Html5实现二维码扫描并解析
Jan 20 #HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 #HTML / CSS
You might like
header跳转和include包含问题详解
2012/09/08 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python结合API实现即时天气信息
2016/01/19 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
爱情保证书大全
2014/04/29 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android