浅谈h5自定义audio(问题及解决)


Posted in HTML / CSS onAugust 19, 2016

h5活动需要插入音频,但又需要自定义样式,于是自己写咯

html

XML/HTML Code复制内容到剪贴板
  1. <!-- cur表示当前时间 max表示总时长 input表示进度条 -->  
  2. <span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>  

css

CSS Code复制内容到剪贴板
  1. /* 进度条 */  
  2. .range {   
  3.     width: 5.875rem;   
  4.     height: 0.15rem;   
  5.     background#2386e4;   
  6.     border-radius: 0.25rem;   
  7.     -webkit-appearance: none !important;   
  8.     positionabsolute;   
  9.     top: 3.55rem;   
  10.     left: 6rem;    
  11. }   
  12. /* 进度滑块 */  
  13. .range::-webkit-slider-thumb {   
  14.     width: 0.5rem;   
  15.     height: 0.5rem;   
  16.     background#fff;   
  17.     border1px solid #f18900;   
  18.     cursorpointer;   
  19.     border-radius: 0.25rem;   
  20.     -webkit-appearance: none !important;   
  21. }  

js

JavaScript Code复制内容到剪贴板
  1. //将秒数转为00:00格式   
  2. function timeToStr(time) {   
  3.     var m = 0,   
  4.     s = 0,   
  5.     _m = '00',   
  6.     _s = '00';   
  7.     time = Math.floor(time % 3600);   
  8.     m = Math.floor(time / 60);   
  9.     s = Math.floor(time % 60);   
  10.     _s = s < 10 ? '0' + s : s + '';   
  11.     _m = m < 10 ? '0' + m : m + '';   
  12.     return _m + ":" + _s;   
  13. }   
  14. //触发播放事件   
  15. $('.play').on('click',function(){   
  16.     var audio=document.getElementById('ao');   
  17.     audio.play();   
  18.     setInterval(function(){   
  19.         var t=parseInt(audio.currentTime);   
  20.     $(".range").attr({'max':751});   
  21.     $('.max').html(timeToStr(751));   
  22.         $(".range").val(t);   
  23.     $('.cur').text(timeToStr(t));   
  24.     },1000);   
  25. });   
  26. //监听滑块,可以拖动   
  27. $(".range").on('change',function(){   
  28.     document.getElementById('ao').currentTime=this.value;$(".range").val(this.value);   
  29. });  

以上基本可以实现自定义音频播放,但是在拖动进度条的时候出现了问题,电脑上是ok的,但是在手机上可以拖动,只不过音频的总时长比正常播放少了好几分钟,导致拖动进度后播放不准确。通过测试发现手机上拿到的duration(总时长)跟电脑上不一样,导致滑动后播放位置不准确。究其原因发现因为上传的音频被我压缩了,所以在手机上拿到的duration就跟正常的不一样。所以音频经过压缩后在手机上其duration就会变(电脑上不会),以后要注意。如果有什么既可以压缩音频也可以在手机上拿到正常duration的方法,麻烦告知小弟,哈哈。

关于这篇浅谈h5自定义audio(问题及解决)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 #HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 #HTML / CSS
Html5元素及基本语法详解
Aug 02 #HTML / CSS
Html5 web本地存储实例详解
Jul 28 #HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 #HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 #HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 #HTML / CSS
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
实用函数2
2007/11/08 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
JS Timing
2007/04/21 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python多进程实现进程间通信实例
2017/11/24 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
什么是唯一索引
2015/07/05 面试题
能源工程专业应届生求职信
2014/03/01 职场文书
2014年销售工作总结
2014/12/01 职场文书
个人委托函范文
2015/01/29 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
Java中的随机数Random
2022/03/17 Java/Android
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers