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),其他配置不需要 ...
随机推荐
- ABP框架 - 数据传输对象
文档目录 本节内容: DTO 必要性 领域层的抽象 数据隐藏 序列化和延迟加载问题 DTO 约定和验证 示例 DTO和实体间自动映射 使用特性和扩展方法进行映射 辅助接口和类 Data Transfe ...
- PHP 调用webService方式
方法如下: <?php header('Content-Type: text/html; charset=UTF-8'); define('APP_ROOT', dirname(__FILE__ ...
- [.Net] 手把手带你将自己打造的类库丢到 NuGet 上
手把手带你将自己打造的类库丢到 NuGet 上 序 我们习惯了对项目右键点击“引用”,选择“管理NuGet 程序包”来下载第三方的类库,可曾想过有一天将自己的打造的类库放到 NuGet 上,让第三者下 ...
- 如何修复VUM在客户端启用之后报数据库连接失败的问题
在上一篇随笔中介绍了关于重新注册VMware Update Manager(VUM)至vCenter Server中的方法,最近有朋友反应,原本切换过去好好的更新服务为什么某次使用一下就不灵了? 当时 ...
- SharePoint 2013 configure and publish infopth
This article will simply descript how to configure and publish a InfoPath step by step. Note: To con ...
- windows环境tomcat8配置Solr5.5.1
前言 前前后后接触Solr有一个多月了,想趁着学习Solr顺便把java拾起来.我分别用4.X和5.X版本在windows环境下用jetty的方式.tomcat部署的方式自己搭建了一把.其中从4.x到 ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- AJAX（一）
AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...
- dicom网络通讯入门（3）
接下来可以进行消息传递了 ,也就是dimse ,再来复习下 什么是dimse .n-set n-create c-echo 这些都是dimse 他们都是属于一种结构的pdu 那就是tf-pdu(传 ...
- Index
我主要在研究.NET/C# 实现 PC IMERP 和 Android IMERP ,目的在解决企业通信中遇到的各类自动化问题 分布式缓存框架: Microsoft Velocity:微软自家分布 ...