仿微信播放音频（有进度条，剩余时间）

最新推荐文章于 2021-05-29 03:35:49 发布

weixin_34402408

最新推荐文章于 2021-05-29 03:35:49 发布

阅读量742

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java python ViewUI

原文链接：https://my.oschina.net/ming0929/blog/1526009

2019独角兽企业重金招聘Python工程师标准>>>

<html>

<head>

</head>

<body>

<div>
<p class="weixinAudio">
<audio src="" id="media" width="1" height="1" preload></audio>
<span id="audio_area" class="db audio_area">
<span class="audio_wrp db">
<span class="audio_play_area">
<i class="icon_audio_default"></i>
<i class="icon_audio_playing"></i>
</span>
<span id="audio_length" class="audio_length tips_global">00:30</span>
<span class="db audio_info_area">
<strong class="db audio_title">高中生如何选择适合自己的专业</strong>

</span>
<span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
</span>
</span>
</p>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./js/weixinAudio.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.weixinAudio').weixinAudio({
autoplay:false,
src:'./sound/sound.mp3',
});
</script>
</div>

</body>

</html>

.db {
display: block;
}

       .weixinAudio {
           line-height: 1.5;
       }

       .audio_area {
           display: inline-block;
           width: 100%;
           vertical-align: top;
           margin: 0px 1px 0px 0;
           font-size: 0;
           position: relative;
           font-weight: 400;
           text-decoration: none;
           -ms-text-size-adjust: none;
           -webkit-text-size-adjust: none;
           text-size-adjust: none;
       }

       .audio_wrp {
           border: 1px solid #ebebeb;
           background-color: #fcfcfc;
           overflow: hidden;
           padding: 12px 20px 12px 12px;
       }

       .audio_play_area {
           float: left;
           margin: 9px 22px 10px 5px;
           font-size: 0;
           width: 18px;
           height: 25px;
       }

       .playing .audio_play_area .icon_audio_default {
           display: block;
       }

       .audio_play_area .icon_audio_default {
           background: transparent url(../images/small/iconloop.png) no-repeat 0 0;
           width: 18px;
           height: 25px;
           vertical-align: middle;
           display: inline-block;
           -webkit-background-size: 54px 25px;
           background-size: 54px 25px;
           background-position: -36px center;
       }

       .audio_play_area .icon_audio_playing {
           background: transparent url(../images/small/iconloop.png) no-repeat 0 0;
           width: 18px;
           height: 25px;
           vertical-align: middle;
           display: inline-block;
           -webkit-background-size: 54px 25px;
           background-size: 54px 25px;
           -webkit-animation: audio_playing 1s infinite;
           background-position: 0px center;
           display: none;
       }

       .audio_area .pic_audio_default {
           display: none;
           width: 18px;
       }

       .tips_global {
           color: #8c8c8c;
       }

       .audio_area .audio_length {
           float: right;
           font-size: 0.7rem;
           margin-top: 0.1rem;
           margin-left: 1rem;
           height: 25px;
           line-height: 40px;
       }
       .audio_area .audio_title {
           font-weight: 400;
           font-size: 17px;
           margin-top: -2px;
           margin-bottom: -3px;
           width: auto;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           word-wrap: normal;
           height: 3rem;
           line-height: 3rem;
       }

/*       .audio_area .audio_source {
           font-size: 14px;
       }*/
       .audio_area .progress_bar {
           position: absolute;
           left: 0;
           bottom: 0;
           background-color: #0cbb08;
           height: 0.2rem;
       }

       .playing .audio_play_area .icon_audio_default {
           display: none;
       }

       .playing .audio_play_area .icon_audio_playing {
           display: inline-block;
       }

       @-webkit-keyframes audio_playing {
           30% {
               background-position: 0px center;
           }
           31% {
               background-position: -18px center;
           }
           61% {
               background-position: -18px center;
           }
           61.5% {
               background-position: -36px center;
           }
           100% {
               background-position: -36px center;
           }
       }

(function() {
   $.fn.weixinAudio = function(options) {
       var $this = $(this);
       var defaultoptions = {
           autoplay:false,
           src:'',
       };
       function Plugin($context) {
           //dom
           this.$context = $context;

           this.$Audio = $context.children('#media');
           this.Audio = this.$Audio[0];
           this.$audio_area = $context.find('#audio_area');
           this.$audio_length = $context.find('#audio_length');
           this.$audio_progress = $context.find('#audio_progress');
           //属性
           this.currentState = 'pause';
           this.time = null;
           this.settings = $.extend(true, defaultoptions, options);
           // console.log(this.Audio.duration);
           //执行初始化
           this.init();

       }
       Plugin.prototype = {
           init: function() {
               var self = this;
               // console.log(self.Audio.duration);
               self.updateTotalTime();
               self.events();
               // 设置src
               if(self.settings.src !== ''){
                       self.changeSrc(self.settings.src);
               }
               // 设置自动播放
               if(self.settings.autoplay){
                   self.play();
               }
           },
           play: function() {
               var self = this;
               if (self.currentState === "play") {
                   self.pause();
                   return;
               }
               self.Audio.play();
               clearInterval(self.timer);
               self.timer = setInterval(self.run.bind(self), 50);
               self.currentState = "play";
               self.$audio_area.addClass('playing');
           },
           pause: function() {
               var self = this;
               self.Audio.pause();
               self.currentState = "pause";
               clearInterval(self.timer);
               self.$audio_area.removeClass('playing');
           },
           stop:function(){

           },
           events: function() {
               var self = this;
               var updateTime;
               self.$audio_area.on('click', function() {
                   self.play();
                   if (!updateTime) {
                       self.updateTotalTime();
                       updateTime = true;
                   }
               });
           },
           //正在播放
           run: function() {
               var self = this;
               self.animateProgressBarPosition();
               if (self.Audio.ended) {
                   self.pause();
               }
           },
           //进度条
           animateProgressBarPosition: function() {
               var self = this;
               percentage = (self.Audio.currentTime * 100 / self.Audio.duration) + '%';
               if (percentage == "NaN%") {
                   percentage = 0 + '%';
               }

               var shengyu_time=Math.floor(self.Audio.duration-self.Audio.currentTime) ;
               minutes = self.getAudioMinutes(shengyu_time),
               seconds = self.getAudioSeconds(shengyu_time),
               audioTime = minutes + ":" + seconds;
               self.$audio_length.text(audioTime);