仿微信播放音频(有进度条,剩余时间)
仿微信播放音频(有进度条,剩余时间)
永不止步0929 发表于9个月前
仿微信播放音频(有进度条,剩余时间)
  • 发表于 9个月前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

<!--html部分-->

<html>

<head>

<link rel="stylesheet" href="./css/sound.css">

</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 class="audio_source tips_global">From/来源</span> -->
                </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>

 

<!--css部分-->

.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;
            }
        }

<!--js部分-->

(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);

                var styles = {
                    "width": percentage
                };
                self.$audio_progress.css(styles);
            },
            //获取时间秒
            getAudioSeconds: function(string) {
                var self = this,
                    string = string % 60;
                string = self.addZero(Math.floor(string), 2);
                (string < 60) ? string = string: string = "00";
                return string;
            },
            //获取时间分
            getAudioMinutes: function(string) {
                var self = this,
                string = string / 60;
                string = self.addZero(Math.floor(string), 2);
                (string < 60) ? string = string: string = "00";
                return string;
            },
            //时间+0
            addZero: function(word, howManyZero) {
                var word = String(word);
                while (word.length < howManyZero) word = "0" + word;
                return word;
            },
            //更新总时间
            updateTotalTime: function() {
                var self = this,
                time = self.Audio.duration,
                minutes = self.getAudioMinutes(time),
                seconds = self.getAudioSeconds(time),
                audioTime = minutes + ":" + seconds;
                // console.log(time);
                if(!isNaN(time)){
                    // console.log(22);
                    self.$audio_length.text(audioTime);
                }
                
            },
            //改变音频源
            changeSrc:function(src,callback){
                var self = this;
                self.pause();
                self.Audio.src = src;
                //self.play();
                //callback();
            },
        };
        var obj = {}
        // var instantiate = function() {
        //      new Plugin($(this));
        // }
        $this.each(function(index,element){
            obj['weixinAudio'+index] = new Plugin($(this));
        }); //多个执行返回对象

        return obj;
    }
})(jQuery)

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 29
码字总数 7592
×
永不止步0929
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: