网页音乐播放器

本文demo下载：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1065

实例通过jQuery技术在html网页中实现一个音乐播放器, 播放器能够播放在线音乐, 实现了暂停，开始，拖动进度等功能，双击播放器界面还可以变成 Mini模式, 赶紧来看看吧

视频观看地址：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1065

实例讲解】

1. 实例运行起来的效果见下图的实例效果

2. 为了让音乐播放器能够自动拖拽, 在滑块演示中实现了这样的小功能

3. 播放器演示中，点击播放图片，音乐播放，再点击，音乐停止, 拖动到指定位置，音乐从相应的位置开始播放

4. 双击黑色区域，音乐播放器切换成Mini模式，再双击，从Mini模式切回正常模式

【实例效果】

网页音乐播放器

【实例代码】

</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;">
有时间做了一个播放器，做的过程中，要做拖动和滑块两个小功能，所以顺便一起演示给大家看。希望能帮到要学的人。
</p>
<h1>1、滑块演示</h1>
拖动我试试 ：
<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、播放器演示</h1>
<p>浮动着呢，左下角哈。双击播放器会切成Mini模式啊</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();
});
//拖动
$.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) + '%');
}
});
});
</script>
</body>
</html>

猜你喜欢