Download the demo of this article: http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1065
The example implements a music player in an html web page through jQuery technology. The player can play online music, and realizes functions such as pause, start, and drag progress. Double-clicking the player interface can also turn into Mini mode. Come and have a look.
Video viewing address: http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1065
Example explanation]
1. The effect of the instance running is shown in the example effect in the following figure
2. In order to allow the music player to automatically drag and drop, such a small function is implemented in the slider demo
3. In the player demonstration, click to play the picture, the music will play, click again, the music will stop, drag it to the specified position, and the music will start playing from the corresponding position
4. Double-click the black area, the music player switches to Mini mode, and then double-click to switch from Mini mode to normal mode
【Example effect】
【Example code】
</head>
<body>
<div class="ss-player">
<div class="ss-box">
<div class="pbcell">
<div class="btn-ctrl"></div>
</div>
<div class="pbcell">
<div class="progressbar">
<div class="currenttime"><i class="btn-drag"></i></div>
<div class="buffertime"></div>
</div>
</div>
<div class="pbcell">
<span class="timelabel">00:00/00:00</span>
</div>
</div>
<audio id="player" src="http://jq22.qiniudn.com/the.mp3" controls=""></audio>
</div>
<p style="border:1px solid #B3E4FF;background-color: aliceblue;padding: 20px;">
I have time to make a player. In the process of doing it, I have to do two small functions of dragging and sliding, so I will show it to everyone by the way. Hope it helps someone who wants to learn.
</p>
<h1>1. Slider demo</h1>
Drag me to try:
<div class="ZZZ" style="width:400px;height: 20px; background-color:#F1F1F1;margin:50px 0;display: inline-block;vertical-align: middle;">
<div class="AAA" style="width: 0%;height: 100%;background-color:#44C2FF; text-align: center; "><span class="BBB"></span></div>
</div>
<h1>2. Player demo</h1>
<p>It's floating, the lower left corner. Double-clicking the player will switch to Mini mode</p>
<script>
$(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();
});
//drag
$.fn.extend({
initDrag: function(options) {
var defaults = {
range: false, //Dragable range element object
sx: true, //Whether it can be dragged horizontally
sy: true, //Whether it can be dragged vertically
slider: false, //Whether it is slider mode, if it is, it is an object
sliding: function() {}, //Callback function when sliding the slider
bans: false //Which internal objects are disabled from dragging
}
var opts = $.extend(defaults, options);
var _this = $(this);
_this.isDragStart = false; //Whether drag mode
_this.dragStartX = null; //Start coordinate X
_this.dragStartY = null; //Start coordinate Y
_this.mousedown(function(e) {
_this.isDragStart = true; //mark as manual mode
_this.dragStartX = e.pageX - _this.offset().left; //The relative coordinate X of the starting position of the object
_this.dragStartY = e.pageY - _this.offset().top; //The relative coordinate Y of the starting position of the object
if ($(document).setCapture) {
$(document).setCapture();
}
//Slider mode (when the click range slides and clicks)
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();
});
//Disable which inner elements to drag
if (opts.bans !== false) {
opts.bans.each(function() {
$(this).mousedown(function(e) {
e.stopPropagation();
});
});
}
//while dragging
$(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', '');
}
// Whether to enable drag range
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;
}
}
}
//Whether slider mode, drag mode
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) + '%');
}
});
});
</script>
</body>
</html>