js实现音频控制进度条功能_jsaudio播放有延迟 - CSDN文库

77 浏览量更新于2023-03-16 评论收藏 33KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

js实现音频控制进度条功能实现音频控制进度条功能

本文主要介绍了js实现音频控制进度条功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：效果图：

代码如下：代码如下：

<!doctype html>

<html>

<head>

<meta name="author" content="dony">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="pragma" content="no-cache">

<meta name="renderer" content="webkit">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>音频控制进度条</title>

<style type="text/css">

body,div{padding: 0;margin: 0;}

.m-main{width:560px; height: 100%; margin: 3% auto; background-color:#30a5ff;}

.m-main video{display: none; }

.m-main .player {

width: 100%;

height: 150px;

position: relative;

bottom: 0px;

}

.m-main .player>a{display: inline-block; width: 20%; margin: 0 auto; padding: 5%; color: #FFF; text-align: center;}

.m-main .play-box {

width: 100%;

margin: 0 auto;

}

.m-main .play-box .left {

width: 100%;

float: left;

}

.m-main .play-box .left p.timeline { width: 70%;height: 10px; background-color: rgba(216, 216, 216, 0.5); border-radius: 5px; margin:30px auto 0; position: relative; z-index: 2; }

.m-main .play-box .left p.timeline span {position: relative; width: 0px; height: 10px; background-color: #FFF; border-radius: 5px; display: block; -webkit-transition: width ease-out 0.3s;-o-transition: width ease-out 0.3s;transition: width ease-out 0.3s;}

.m-main .play-box .left p.timeline span:after{content: ""; position: absolute; top: -4px; right:-0.6rem;width: 1.2rem; height:1.2rem; border-radius: 50%;background-color: #FFF;}

.m-main .play-box .left div.info { height: 26px; line-height: 26px; font-size: 14px; color: #000; position: relative; top: -18px; margin:0 10px; z-index: 1;color: #FFF;}

.m-main .play-box .left div.info .size { float: left; display: block;}

.m-main .play-box .left div.info .timeshow { float: right; display: block;}

</style>

</head>

<body>

<div class="m-main">

<div class="player">

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play">播放</a>

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause">暂停</a>

<div class="play-box">

<div class="left">

<p class="timeline"><span style=""></span></p>

<div class="info">

<span class="size">00:00</span>

<span class="timeshow">00:00</span>

</div>

</div>

</div>

</div>

<div class="video">

<video controls autoplay name="media" id="js-video"><source src="http://chipsguide.snaillove.com/Public/Uploads/file_server_storage/Audio/2017/03/23/19/192_20003137.mp3" type="video/mp4"></video>

</div>

</div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

AudioControl('js-video')

function AudioControl(id){

// 音频控制进度条

var audio = document.getElementById(id);

$(audio).on('loadedmetadata',function(){

audio.pause();

// 进度条控制

$(document).on('touchend','.timeline',function(e){

var x = e.originalEvent.changedTouches[0].clientX-this.offsetLeft;

var X = x < 0 ? 0 : x ;

var W = $(this).width();

var place = X > W ? W : X;

audio.currentTime = (place/W).toFixed(2)*audio.duration

$(this).children().css({width:(place/W).toFixed(2)*100+"%"})

});

// 播放

$(document).on('click','#js-play',function(){

audio.play()

});

// 暂停

$(document).on('click','#js-pause',function(){

audio.pause()

});

})

setInterval(function () {

var currentTime = audio.currentTime;

setTimeShow(currentTime);

}, 1000);

// 设置播放时间

function setTimeShow(t) {

t = Math.floor(t);

var playTime = secondToMin(audio.currentTime);

$(".size").html(playTime);

$('.timeshow').text(secondToMin(audio.duration))

$('.timeline').children().css({width:(t/audio.duration).toFixed(4)*100+"%"})

}

// 计算时间

function secondToMin(s) {

var MM = Math.floor(s / 60);

var SS = s % 60;

if (MM < 10)

MM = "0" + MM;

if (SS < 10)

SS = "0" + SS;

var min = MM + ":" + SS;

return min.split('.')[0];

}

}

})

</script>

</body>

</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38557838

粉丝: 2
资源: 898

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈