Home > Article > Web Front-end > JavaScript implements audio control progress bar effect code

JavaScript implements audio control progress bar effect code

零下一度Original: 2017-04-18 11:04:012732browse

This article mainly introduces the sample code of js to implement the audio control progress bar function. Has very good reference value. Let’s take a look at it with the editor below

Rendering:

##The code is as follows:

<!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,p{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 p.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 p.info .size { float: left; display: block;}
.m-main .play-box .left p.info .timeshow { float: right; display: block;}
</style>
</head>
<body>
<p class="m-main">
  <p 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>
    <p class="play-box">
      <p class="left">
        <p class="timeline"><span style=""></span></p>
        <p class="info">
          <span class="size">00:00</span>
          <span class="timeshow">00:00</span>
        </p>
      </p>
    </p>
  </p>
 <p 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>
 </p>
</p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
   AudioControl(&#39;js-video&#39;)
   function AudioControl(id){
     // 音频控制进度条
     var audio = document.getElementById(id);
     $(audio).on(&#39;loadedmetadata&#39;,function(){
    audio.pause();
    // 进度条控制
     $(document).on(&#39;touchend&#39;,&#39;.timeline&#39;,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(&#39;click&#39;,&#39;#js-play&#39;,function(){
    audio.play()
    });
    // 暂停
    $(document).on(&#39;click&#39;,&#39;#js-pause&#39;,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);
     $(&#39;.timeshow&#39;).text(secondToMin(audio.duration))
     $(&#39;.timeline&#39;).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(&#39;.&#39;)[0];
   }
   }
  })
</script>
</body>
</html>

The above is the detailed content of JavaScript implements audio control progress bar effect code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of try catch instances in javascriptNext article：Detailed explanation of try catch instances in javascript

See more

JavaScript implements audio control progress bar effect code

Related articles