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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python之yield和Generator深入解析
2019/09/18 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
开办饭店创业计划书
2013/12/28 职场文书
医学求职自荐信
2014/06/21 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
办公室文员岗位职责
2015/02/04 职场文书
技术员个人工作总结
2015/03/03 职场文书
超市食品安全承诺书
2015/04/29 职场文书
二胎满月酒致辞
2015/07/29 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python