網頁音樂播放器

時間 2019-11-12 標籤網頁音樂播放

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

實例經過jQuery技術在html網頁中實現一個音樂播放器, 播放器可以播放在線音樂, 實現了暫停，開始，拖動進度等功能，雙擊播放器界面還能夠變成 Mini模式, 趕忙來看看吧html

視頻觀看地址：http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1065java

實例講解】dom

1. 實例運行起來的效果見下圖的實例效果ide

2. 爲了讓音樂播放器可以自動拖拽, 在滑塊演示中實現了這樣的小功能函數

3. 播放器演示中，點擊播放圖片，音樂播放，再點擊，音樂中止, 拖動到指定位置，音樂從相應的位置開始播放this

4. 雙擊黑色區域，音樂播放器切換成Mini模式，再雙擊，從Mini模式切回正常模式spa

【實例效果】code

【實例代碼】orm

</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>一、滑塊演示</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>二、播放器演示</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>