JavaScript implementiert den Code für den Fortschrittsbalkeneffekt der Audiosteuerung-js-Tutorial-php.cn

JavaScript implementiert den Code für den Fortschrittsbalkeneffekt der Audiosteuerung

零下一度

Freigeben： 2017-04-18 11:04:01

Original

2776 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode von js zur Implementierung der Fortschrittsbalkenfunktion für die Audiosteuerung vorgestellt. Hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor unten an

Rendering:

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJavaScript implementiert den Code für den Fortschrittsbalkeneffekt der Audiosteuerung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!