文档章节

仿微信播放音频(有进度条,剩余时间)

永不止步0929
 永不止步0929
发布于 2017/08/30 11:05
字数 723
阅读 19
收藏 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)

© 著作权归作者所有

共有 人打赏支持
永不止步0929
粉丝 0
博文 29
码字总数 7592
作品 0
海淀
程序员
私信 提问
iOS 9音频应用播放音频之iOS 9音频播放进度

iOS 9音频应用播放音频之iOS 9音频播放进度 iOS 9音频应用开发播放进度 音频文件在播放后经过了多久以及还有多久才可以播放完毕,想必是用户所关注的问题。为了解决这一问题,在很多的音乐播...

大学霸
2016/01/07
82
0
微信小程序音频功能开发实(cai)践(keng)

1. 需求分析与开发方案 1.1 需求简介 最近产品给我们提出了“在小程序中播放音频课程”的需求,主要是有四个要点: 课程管理:进入某个课程的播放页面,获取全部音频列表,但暂时不播放。 音...

丁香园F2E
2017/11/01
0
0
IOS开发之AVAudioPlayer的基本使用

1.这是播放效果,可以按下play和pause播放和暂停,进度条自动改变进度 ,我用的是mac mini产生很多错误,没有声音,换个耳机就可以了!! 滑动条拖动的时候,音乐播放改变会有噪音,解决方法如...

鹿微微鹿
2016/05/06
52
0
Android使用FFmpeg(七)--ffmpeg实现暂停、快退快进播放

Android使用FFmpeg(一)--编译ffmpeg Android使用FFmpeg(二)--Android Studio配置ffmpeg Android使用FFmpeg(三)--ffmpeg实现视频播放 Android使用FFmpeg(四)--ffmpeg实现音频播放(使用AudioTr...

天王盖地虎626
01/14
0
0
iOS仿网易云音乐

前言 最近做项目,遇到了需要播放网络音频的功能,由于以前对于音频方面的至少了解的不是很多,于是通过查阅资料对音频方面做了一些学习,然后利用VLCKit仿照网易云音乐的播放界面写了个Dem...

QuintGao
2017/10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Batch @EnableBatchIntegration 注解

设置一个远程分块任务需要定义一系列的 beans: 一个连接工程来从消息中间件中获得连接,消息中间件包括有(JMS,AMQP 和其他) 一个 MessagingTemplate 来从主向从发送消息,然后再次发送回...

honeymose
24分钟前
0
0
【剑指offer纪念版】--9 斐波那契数列

题目:斐波那契数列 题目:写一个函数,输入n,求斐波那契(Fibonacci)数列的第n项。斐波那契数列的定义如下:  求解 通过求解第10项的调用过程图来分析: package aigorithm;public cla...

细节探索者
28分钟前
0
0
浏览器缓存

HTTP缓存类型 200 from cache:直接从本地缓存获取响应,可细分为from disk cache, from memory cache 304 Not Modified:协商缓存,本地未命中发送校验数据到服务端,如果服务端数据没有改变,则读...

关元
57分钟前
3
0
正则表达式简单使用说明

在Python3里确实简单明了,测试样例如下 # 正则content = 'Hello 1234567 World_This is a Regex Demo'# 贪婪匹配 尽可能多的匹配result = re.match('^He.*(\d+).*Demo$', co......

轻轻的往前走
59分钟前
3
0
多线程创建方式

一、基本概念 进程:就是正在运行的应用程序,进程是线程的集合。 线程:就是进程中的一条执行路径,一个独立的执行单元。 多线程:就是为了提高程序的效率,使用多线程,每个线程互不影响,...

秋至丶枫以落
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部