h5自定义audio（问题及解决）
h5活动需要插入音频，但又需要自定义样式，于是自己写咯
html
<!-- cur表示当前时间 max表示总时长 input表示进度条 -->
<span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>
css
/* 进度条 */
.range {
width: 5.875rem;
height: 0.15rem;
background: #2386e4;
border-radius: 0.25rem;
-webkit-appearance: none !important;
position: absolute;
top: 3.55rem;
left: 6rem;
}
/* 进度滑块 */
.range::-webkit-slider-thumb {
width: 0.5rem;
height: 0.5rem;
background: #fff;
border: 1px solid #f18900;
cursor: pointer;
border-radius: 0.25rem;
-webkit-appearance: none !important;
}
js
//将秒数转为00:00格式
function timeToStr(time) {
var m = 0,
s = 0,
_m = '00',
_s = '00';
time = Math.floor(time % 3600);
m = Math.floor(time / 60);
s = Math.floor(time % 60);
_s = s < 10 ? '0' + s : s + '';
_m = m < 10 ? '0' + m : m + '';
return _m + ":" + _s;
}
//触发播放事件
$('.play').on('click',function(){
var audio=document.getElementById('ao');
audio.play();
setInterval(function(){
var t=parseInt(audio.currentTime);
$(".range").attr({'max':751});
$('.max').html(timeToStr(751));
$(".range").val(t);
$('.cur').text(timeToStr(t));
},1000);
});
//监听滑块，可以拖动
$(".range").on('change',function(){
document.getElementById('ao').currentTime=this.value;$(".range").val(this.value);
});
以上基本可以实现自定义音频播放，但是在拖动进度条的时候出现了问题，电脑上是ok的，但是在手机上可以拖动，只不过音频的总时长比正常播放少了好几分钟，导致拖动进度后播放不准确。通过测试发现手机上拿到的duration（总时长）跟电脑上不一样，导致滑动后播放位置不准确。究其原因发现因为上传的音频被我压缩了，所以在手机上拿到的duration就跟正常的不一样。所以音频经过压缩后在手机上其duration就会变（电脑上不会），以后要注意。如果有什么既可以压缩音频也可以在手机上拿到正常duration的方法，麻烦告知小弟，哈哈。
改进：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio</title>
<style>
/* 进度条 */
.range {
width: 5.875rem;
height: 0.15rem;
background: #2386e4;
border-radius: 0.25rem;
-webkit-appearance: none !important;
position: absolute;
top: 3.55rem;
left: 6rem;
}
/* 进度滑块 */
.range::-webkit-slider-thumb {
width: 0.5rem;
height: 0.5rem;
background: #fff;
border: 1px solid #f18900;
cursor: pointer;
border-radius: 0.25rem;
-webkit-appearance: none !important;
}
</style> </head>
<body>
<audio src='2012.mp3' id='ao'></audio>
<span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>
<button class='play'>play</button>
<button class='pause'>pause</button> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
//将秒数转为00:00格式
function timeToStr(time) {
var m = 0,
s = 0,
_m = '00',
_s = '00';
time = Math.floor(time % 3600);
m = Math.floor(time / 60);
s = Math.floor(time % 60);
_s = s < 10 ? '0' + s : s + '';
_m = m < 10 ? '0' + m : m + '';
return _m + ":" + _s;
}
//触发播放事件
var audio=document.getElementById('ao'); $('.play').on('click',function(){
var duration=audio.duration;
$(".range").attr({'max':duration});
$('.max').html(timeToStr(duration));
audio.play();
function timer(){
var t=parseInt(Math.round(audio.currentTime));
$(".range").val(t);
$('.cur').text(timeToStr(t));
t=parseInt(audio.currentTime);
if(t<duration){
setTimeout(timer, 1000);
}else{
clearTimeout(timer);
}
}
timer();
});
$('.pause').on('click', function(){
audio.pause();
})
//监听滑块，可以拖动
$(".range").on('change',function(){
audio.currentTime=this.value;
console.log(this.value)
$(".range").val(this.value);
});
</script>
</body>
</html>
h5自定义audio（问题及解决）的更多相关文章
- h5新API之WebStorage解决页面数据通信问题
localStorage相信大家都不陌生,今天我们要讨论的不是怎么存储数据,获取数据.而是看看WebStorage的一些妙用,相信大家在开发中遇到过这样一个场景,一个页面中嵌套一个iframe,ifr ...
- h5 的 audio 标签知识点
因为音频格式有版权,各浏览器使用不同的音频格式. 音频格式兼容性 音频格式 Chrome Firefox IE9 Opera Safari MP3 支持 不支持 支持 不支持 支持 OGG 支持 支持 ...
- H5之audio标签放音兼容所有浏览器方法
前端交流群,群文件提供大量文档.书籍和资料.期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio> ...
- Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
情景: uni-app使用vue框架开发混合APP,虽然APP或者小程序没有跨域,但希望就是写完这个既有H5,又有APP,小程序等,所以能通过后端解决跨域最好.但是不知道是vue的原因还是什么,在PH ...
- 【转】h5页面audio不自动播放问题
1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- zabbix 获取不到自定义脚本的值解决
agent端: zabbix 自定义脚本 [root@localhost script]# cat check_ping.sh #!/bin/bash result=$(/usr/local/nagi ...
- 自定义JS乘法运算误差解决！
在实际开发中遇到这样一个乘法公式:数量*单价=总价 像这样的浮点数列子:200*8.2,JS算出的结果是: 像这种浮点数的乘法计算就会有误差,我们需要得到准确的值应该是:1640,与我们后台C#计算结 ...
- (C)spring boot读取自定义配置文件时乱码解决办法
这是入门的第三天了,从简单的hello spring开始,已经慢慢接近web的样子.接下来当然是读取简单的对象属性了. 于是按照网上各位大神教的,简单写了个对象book,如上一篇(B),其他配置不需要 ...
随机推荐
- 玩转 Linux 系统的方法论
Linus 说“Just for fun”,而我要说“Just for 折腾”.想知道我是怎样折腾 Linux 的,请看下面这个截图: 从这个截图可以看出,我为了“折腾” Linux 系统,在我的电脑 ...
- ASP.NET MVC 视图(四)
ASP.NET MVC 视图(四) 前言 上篇对于利用IoC框架对视图的实现进行依赖注入,最后还简单的介绍一下自定义的视图辅助器是怎么定义和使用的,对于Razor语法的细节和辅助器的使用下篇会说讲到, ...
- ABP(现代ASP.NET样板开发框架)系列之7、ABP Session管理
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之7.ABP Session管理 ABP是“ASP.NET Boilerplate Project (ASP.NET ...
- C++ std::array
std::array template < class T, size_t N > class array; Code Example #include <iostream> ...
- is和as
一.明确两个基本概念 隐式转换: a.对于值类型,低精度=>高精度.eg:int=>long b.对于引用类型,子类向祖宗类转换过程.eg:对象=>Object 显式转换:显示转换是 ...
- Atitit各种SDM 软件开发过程SDP sdm的ddd tdd bdd设计
Atitit各种SDM 软件开发过程SDP sdm的ddd tdd bdd设计 1.1. software development methodology (also known as SDM 1 1 ...
- Android开发-之监听button点击事件
一.实现button点击事件的方法 实现button点击事件的监听方法有很多种,这里总结了常用的四种方法: 1.匿名内部类 2.外部类(独立类) 3.实现OnClickListener接口 4.添加X ...
- 说说面向服务的体系架构SOA
序言 在.Net的世界中,一提及SOA,大家想到的应该是Web Service,WCF,还有人或许也会在.NET MVC中的Web API上做上标记,然后泛泛其谈! 的确,微软的这些技术也确实推动着面 ...
- 【WPF】闲着没事，写了个支持数据列表分页的帮助类
支持分页的MVVM组件大家可以网上找,老周这个类只是没事写来娱乐一下的,主要是功能简单,轻量级,至少它满足了我的需求,也许还有未知的 bug . 这个类支持对数据列表进行分页处理,原理是利用 Skip ...
- 前端学HTTP之WEB服务器
前面的话 Web服务器每天会分发出数以亿计的Web页面,它是万维网的骨干.本文主要介绍WEB服务器的相关内容 总括 Web服务器会对HTTP请求进行处理并提供响应.术语“Web服务器”可以用来表示We ...