基于jQuery简单的音乐播放器、滑块效果

浏览：969次- 评论：0次- 发布时间：2018-04-24

Html

Css

00:00/00:00

有时间做了一个播放器，做的过程中，要做拖动和滑块两个小功能，所以顺便一起演示给大家看。希望能帮到要学的人。

1、滑块演示

拖动我试试：

2、播放器演示

浮动着呢，左下角哈。双击播放器会切成Mini模式啊

html {
	height:100%;
}
body {
	height:100%;
}
#player {
	display:none;
}
.ss-player {
	position:fixed;
	left:0;
	bottom:0;
	margin:10px;
	color:#FFF;
}
.ss-player.mini .ss-box {
	width:100px;
	height:100px;
	border-radius:50%;
}
.ss-player.mini .pbcell:nth-child(2),.ss-player.mini .pbcell:nth-child(3) {
	display:none;
}
.ss-box {
	width:500px;
	height:100px;
	background-color:#000;
	overflow:hidden;
	display:table;
	transition:0.5s;
}
.ss-player .btn-ctrl {
	width:40px;
	height:40px;
	margin:10px;
	cursor:pointer;
	display:inline-block;
	background-image:url(http://jq22.qiniudn.com/1gvzgu.svg);
	background-size:100% 100%;
	background-position:center center;
	transition:0.5s;
}
.ss-player .btn-ctrl.pause {
	background-image:url(http://jq22.qiniudn.com/44mnya.svg);
}
.ss-player .timelabel {
	color:#FFF;
	font-size:14px;
}
.ss-player .progressbar {
	width:300px;
	height:4px;
	margin:auto;
	display:inline-block;
	border-radius:2px;
	background-color:rgba(255,255,255,0.2);
	position:relative;
}
.ss-player .currenttime {
	width:0%;
	height:100%;
	background-color:#e60012;
	border-radius:2px;
	position:absolute;
	text-align:right;
	left:0;
	top:0;
}
.ss-player .buffertime {
	width:0%;
	height:100%;
	background-color:rgba(180,180,180,0.5);
	border-radius:2px;
}
.ss-player .currenttime .btn-drag {
	width:6px;
	height:6px;
	border-radius:50%;
	background-color:#e60012;
	border:2px solid #FFF;
	display:inline-block;
	position:absolute;
	right:0px;
	margin-right:-4px;
	top:-2px;
	cursor:pointer;
	transition:0.3s;
}
.ss-player .currenttime .btn-drag:hover {
	box-shadow:0 0 10px 0 rgba(255,255,255,1);
}
.ss-player .pbcell {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.pbcell:nth-child(3) {
	padding:0 10px;
}

$(function() {

function formatTime(seconds) {
        var min = Math.floor(seconds / 60),
            second = seconds % 60,
            hour, newMin, time;
        min = parseInt(min);
        second = parseInt(second);

if (min > 60) {
            hour = Math.floor(min / 60);
            newMin = min % 60;
        }

if (second < 10) {
            second = '0' + second;
        }
        if (min < 10) {
            min = '0' + min;
        }

return time = hour ? (hour + ':' + newMin + ':' + second) : (min + ':' + second);
    }

$('body').on('dragstart', '.ss-player', function() {
        return false;
    });

function ssplayer() {

var ssplayer = $('#player')[0];

ssplayer.ontimeupdate = function() {
            //console.log(ssplayer.currentTime+'/'+ssplayer.duration);
            var duration = ssplayer.duration;
            var currentTime = ssplayer.currentTime;
            var p = currentTime / duration * 100;
            var dlen = formatTime(duration);
            var clen = formatTime(currentTime);
            var bfp = ssplayer.buffered.end(0) / duration * 100;
            //console.log(dlen+'/'+clen);
            $('.ss-player .timelabel').html(clen + '/' + dlen);
            $('.ss-player .currenttime').stop(false, true).css({
                width: p + '%'
            });
            $('.ss-player .buffertime').stop(false, true).css({
                width: bfp + '%'
            });
        }

ssplayer.onended = function() {
            $('.ss-player .btn-ctrl').removeClass('pause');
        }

ssplayer.onprogress = function() {

}

return $('#player')[0];
    }

$('body').on('dblclick', '.ss-player', function() {
        $(this).toggleClass('mini');
    });

var player = ssplayer();

$('body').on('click', '.ss-player .btn-ctrl', function(e) {
        if (player.paused) {
            player.play();
            $('.ss-player .btn-ctrl').removeClass('pause').addClass('pause');

} else {
            player.pause();
            $('.ss-player .btn-ctrl').removeClass('pause');
        }
        e.stopPropagation();

});

//拖动
    $.fn.extend({
        initDrag: function(options) {
            var defaults = {
                range: false, //可拖动范围元素对象
                sx: true, //是否可横向拖动
                sy: true, //是否可纵向拖动
                slider: false, //是否为滑块模式，是则为对象
                sliding: function() {}, //滑动滑块时的回调函数
                bans: false //禁用哪些内部对象拖动
            }
            var opts = $.extend(defaults, options);
            var _this = $(this);
            _this.isDragStart = false; //是否拖动模式
            _this.dragStartX = null; //起始坐标X
            _this.dragStartY = null; //起始坐标Y
            _this.mousedown(function(e) {
                _this.isDragStart = true; //标记为手动模式
                _this.dragStartX = e.pageX - _this.offset().left; //对象起始位置相对坐标X
                _this.dragStartY = e.pageY - _this.offset().top; //对象起始位置相对坐标Y
                if ($(document).setCapture) {
                    $(document).setCapture();
                }

//滑块模式（当点击范围滑动和点击处）
                if (opts.slider !== false) {
                    var x = e.pageX - opts.slider.offset().left;
                    var y = e.pageY - opts.slider.offset().top;
                    var ww = opts.range.width();
                    var hh = opts.range.height();
                    if (x > ww) {
                        x = ww;
                    }
                    if (y > hh) {
                        y = hh;
                    }
                    if (opts.sx) {
                        opts.slider.css('width', x + 'px');
                        opts.sliding(x / ww);
                    }
                    if (opts.sy) {
                        opts.slider.css('height', y + 'px');
                        opts.sliding(y / hh);
                    }
                }

e.stopPropagation();
            });

//禁用哪些内部元素拖动
            if (opts.bans !== false) {
                opts.bans.each(function() {
                    $(this).mousedown(function(e) {
                        e.stopPropagation();
                    });
                });
            }

//拖动时
            $(document).mousemove(function(e) {
                if (!_this.isDragStart) {
                    return false;
                }
                if (opts.slider !== false) {
                    x = e.pageX - opts.slider.offset().left;
                    y = e.pageY - opts.slider.offset().top;
                } else {
                    var x = e.pageX - _this.dragStartX - _this.css('margin-left').replace('px', '');
                    var y = e.pageY - _this.dragStartY - _this.css('margin-top').replace('px', '');
                }

//是否启用拖动范围
                if (opts.range !== false) {
                    var ww = opts.range.width();
                    var hh = opts.range.height();
                    var zw = _this.outerWidth(true);
                    var zh = _this.outerHeight(true);
                    if (x < 0) {
                        x = 0;
                    }

if (y < 0) {
                        y = 0;
                    }

if (opts.slider !== false) {
                        if (x > ww) {
                            x = ww;
                        }
                        if (y > hh) {
                            y = hh;
                        }
                    } else {
                        if (x > ww - zw) {
                            x = ww - zw;
                        }
                        if (y > hh - zh) {
                            y = hh - zh;
                        }
                    }
                }

//是否滑块模式，拖动模式
                if (opts.slider !== false) {
                    if (opts.sx) {
                        opts.slider.css('width', x + 'px');
                        opts.sliding(x / ww);
                    }
                    if (opts.sy) {
                        opts.slider.css('height', y + 'px');
                        opts.sliding(y / hh);
                    }
                } else {
                    if (opts.sx) {
                        _this.css('left', x + 'px').css('right', 'auto');
                    }
                    if (opts.sy) {
                        _this.css('top', y + 'px').css('bottom', 'auto');
                    }
                }

});

$(document).mouseup(function() {
                if ($(this).releaseCapture) {
                    $(this).releaseCapture();
                }
                _this.isDragStart = false;
            });

}
    });

$('.ss-player .btn-drag,.ss-player .progressbar').initDrag({
        slider: $('.ss-player .currenttime'),
        sy: false,
        range: $('.ss-player .progressbar'),
        sliding: function(p) {
            var s = p * player.duration;
            player.currentTime = s;
        }
    });

$('.ss-player').initDrag({
        range: $('body'),
        bans: $('.ss-player .progressbar,.ss-player .btn-ctrl')
    });

$('.ZZZ').initDrag({
        slider: $('.AAA'),
        sy: false,
        range: $('.ZZZ'),
        sliding: function(p) {
            $('.BBB').html(Math.round(p * 100) + '%');
        }
    });

});

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.8.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：有时间做了一个播放器，做的过程中，要做拖动和滑块两个小功能，所以顺便一起演示给大家看。希望能帮到要学的人。

$('.ss-player').initdrag({
    range: $('body'),
    bans: $('.ss-player .progressbar,.ss-player .btn-ctrl')
}); //拖动播放器

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取