Heim > Artikel > Web-Frontend > JavaScript implementiert den Code für den Fortschrittsbalkeneffekt der Audiosteuerung

JavaScript implementiert den Code für den Fortschrittsbalkeneffekt der Audiosteuerung

零下一度Original: 2017-04-18 11:04:012765Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung von Try-Catch-Instanzen in JavascriptNächster Artikel：Detaillierte Erklärung von Try-Catch-Instanzen in Javascript

In Verbindung stehende Artikel

Mehr sehen