文档章节

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

永不止步0929
 永不止步0929
发布于 2017/08/30 11:05
字数 723
阅读 14
收藏 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
iOS仿网易云音乐

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

QuintGao
2017/10/16
0
0
一步一步实战HTML音乐播放器

在这里我用HTML5从头开始一步一步来制作一个简约的音乐播放器,大家可以参考一下,接下来正式开始。 音乐播放器效果 播放器分析 这里将播放器分两块来做: 视图层(html + css) 逻辑层 ( js...

lecepin
2017/01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

获取多个集合列表的笛卡尔积

获取多个集合笛卡尔积 电商中典型业务场景:商品搜索 单属性属性值之间为并查询 不同属性的属性值之间查询为与查询 import java.util.ArrayList;import java.util.List;/** * Created w...

键走偏锋
8分钟前
0
0
echarts 迁移地图 控制鼠标缩放大小比例

在网上找了好久没有找到解决方式,还是重新看了一下文档,终于找到的解决方案, zoom:1, //默认显示级别 scaleLimit:{min:1,max:3}, // 缩放级别 echarts 文档-配置项链接 http://echarts.b...

心驰
11分钟前
0
0
Boot2Docker ISO is out-of-date,

Boot2Docker ISO is out-of-date, downloading the latest release. 使用docker-machine时无法更新Boot2Docker ISO导致创建vm machine失败 解决方法:关闭网络,创建好之后再开启...

writeademo
19分钟前
0
0
在 Tomcat 中设置 Tapestry 框架的 html 热加载

如果开发中使用到了 Tapestry 这个框架,如果事先没有设置过的话,开发的时候 html 是不会热加载的,也就是说修改了 html 文件,不能刷新浏览器后立马看到修改完的效果,必须先重新启动应用服...

LeoXu
41分钟前
0
0
【微服务】开启巨石应用到微服务的探索

背景 在过去的一年时间里,我一直在从事一件事情,将现有的单体应用(巨石应用)向微服务改造。 接下来,将持续整理一些在微服务路上的学习与成长。 为什么要做微服务 单体应用,开发、部署简...

艳沐石
51分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部