04.24 網頁音樂播放器

<code><code>head/<code><code>>/<code>

<code></<code><code>body/<code><code>>/<code>

<code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"ss-player"/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"ss-box"/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"pbcell"/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"btn-ctrl"/<code><code>>/<code><code>div/<code><code>>/<code>

<code> /<code><code><code>div/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"pbcell"/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"progressbar"/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"currenttime"/<code><code>></<code><code>i/<code> <code>class/<code><code>=/<code><code>"btn-drag"/<code><code>>/<code><code>i/<code><code>>/<code><code>div/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"buffertime"/<code><code>>/<code><code>div/<code><code>>/<code>

<code> /<code><code><code>div/<code><code>>/<code>

<code> /<code><code><code>div/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"pbcell"/<code><code>>/<code>

<code> /<code><code></<code><code>span/<code> <code>class/<code><code>=/<code><code>"timelabel"/<code><code>>00:00/00:00/<code><code>span/<code><code>>/<code>

<code> /<code><code><code>div/<code><code>>/<code>

<code> /<code><code><code>div/<code><code>>/<code>

<code> /<code><code></<code><code>audio/<code> <code>id/<code><code>=/<code><code>"player"/<code> <code>src/<code><code>=/<code><code>"http://jq22.qiniudn.com/the.mp3"/<code> <code>controls/<code><code>=/<code><code>""/<code><code>>/<code><code>audio/<code><code>>/<code>

<code><code>div/<code><code>>/<code>

<code></<code><code>p/<code> <code>style/<code><code>=/<code><code>"border:1px solid #B3E4FF;background-color: aliceblue;padding: 20px;"/<code><code>>/<code>

<code> /<code><code>有時間做了一個播放器，做的過程中，要做拖動和滑塊兩個小功能，所以順便一起演示給大家看。希望能幫到要學的人。/<code>

<code><code>p/<code><code>>/<code>

<code></<code><code>h1/<code><code>>1、滑塊演示/<code><code>h1/<code><code>>/<code>

<code>拖動我試試 ：/<code>

<code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"ZZZ"/<code> <code>style/<code><code>=/<code><code>"width:400px;height: 20px; background-color:#F1F1F1;margin:50px 0;display: inline-block;vertical-align: middle;"/<code><code>>/<code>

<code> /<code><code></<code><code>div/<code> <code>class/<code><code>=/<code><code>"AAA"/<code> <code>style/<code><code>=/<code><code>"width: 0%;height: 100%;background-color:#44C2FF; text-align: center; "/<code><code>></<code><code>span/<code> <code>class/<code><code>=/<code><code>"BBB"/<code><code>>/<code><code>span/<code><code>>/<code><code>div/<code><code>>/<code>

<code><code>div/<code><code>>/<code>

<code></<code><code>h1/<code><code>>2、播放器演示/<code><code>h1/<code><code>>/<code>

<code></<code><code>p/<code><code>>浮動著呢，左下角哈。雙擊播放器會切成Mini模式啊/<code><code>p/<code><code>>/<code>

<code></<code><code>script/<code><code>>/<code>

<code>$(function() {/<code>

<code> /<code><code>function formatTime(seconds) {/<code>

<code> /<code><code>var min = Math.floor(seconds / 60),/<code>

<code> /<code><code>second = seconds % 60,/<code>

<code> /<code><code>hour, newMin, time;/<code>

<code> /<code><code>min = parseInt(min);/<code>

<code> /<code><code>second = parseInt(second);/<code>

<code> /<code><code>if (min > 60) {/<code>

<code> /<code><code>hour = Math.floor(min / 60);/<code>

<code> /<code><code>newMin = min % 60;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (second < 10) {/<code>

<code> /<code><code>second = '0' + second;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (min < 10) {/<code>

<code> /<code><code>min = '0' + min;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>return time = hour ? (hour + ':' + newMin + ':' + second) : (min + ':' + second);/<code>

<code> /<code><code>}/<code>

<code> /<code><code>$('body').on('dragstart', '.ss-player', function() {/<code>

<code> /<code><code>return false;/<code>

<code> /<code><code>});/<code>

<code> /<code><code>function ssplayer() {/<code>

<code> /<code><code>var ssplayer = $('#player')[0];/<code>

<code> /<code><code>ssplayer.ontimeupdate = function() {/<code>

<code> /<code><code>//console.log(ssplayer.currentTime+'/'+ssplayer.duration);/<code>

<code> /<code><code>var duration = ssplayer.duration;/<code>

<code> /<code><code>var currentTime = ssplayer.currentTime;/<code>

<code> /<code><code>var p = currentTime / duration * 100;/<code>

<code> /<code><code>var dlen = formatTime(duration);/<code>

<code> /<code><code>var clen = formatTime(currentTime);/<code>

<code> /<code><code>var bfp = ssplayer.buffered.end(0) / duration * 100;/<code>

<code> /<code><code>//console.log(dlen+'/'+clen);/<code>

<code> /<code><code>$('.ss-player .timelabel').html(clen + '/' + dlen);/<code>

<code> /<code><code>$('.ss-player .currenttime').stop(false, true).css({/<code>

<code> /<code><code>width: p + '%'/<code>

<code> /<code><code>});/<code>

<code> /<code><code>$('.ss-player .buffertime').stop(false, true).css({/<code>

<code> /<code><code>width: bfp + '%'/<code>

<code> /<code><code>});/<code>

<code> /<code><code>}/<code>

<code> /<code><code>ssplayer.onended = function() {/<code>

<code> /<code><code>$('.ss-player .btn-ctrl').removeClass('pause');/<code>

<code> /<code><code>}/<code>

<code> /<code><code>ssplayer.onprogress = function() {/<code>

<code> /<code><code>}/<code>

<code> /<code><code>return $('#player')[0];/<code>

<code> /<code><code>}/<code>

<code> /<code><code>$('body').on('dblclick', '.ss-player', function() {/<code>

<code> /<code><code>$(this).toggleClass('mini');/<code>

<code> /<code><code>});/<code>

<code> /<code><code>var player = ssplayer();/<code>

<code> /<code><code>$('body').on('click', '.ss-player .btn-ctrl', function(e) {/<code>

<code> /<code><code>if (player.paused) {/<code>

<code> /<code><code>player.play();/<code>

<code> /<code><code>$('.ss-player .btn-ctrl').removeClass('pause').addClass('pause');/<code>

<code> /<code><code>} else {/<code>

<code> /<code><code>player.pause();/<code>

<code> /<code><code>$('.ss-player .btn-ctrl').removeClass('pause');/<code>

<code> /<code><code>}/<code>

<code> /<code><code>e.stopPropagation();/<code>

<code> /<code><code>});/<code>

<code> /<code><code>//拖動/<code>

<code> /<code><code>$.fn.extend({/<code>

<code> /<code><code>initDrag: function(options) {/<code>

<code> /<code><code>var defaults = {/<code>

<code> /<code><code>range: false, //可拖動範圍元素對象/<code>

<code> /<code><code>sx: true, //是否可橫向拖動/<code>

<code> /<code><code>sy: true, //是否可縱向拖動/<code>

<code> /<code><code>slider: false, //是否為滑塊模式，是則為對象/<code>

<code> /<code><code>sliding: function() {}, //滑動滑塊時的回調函數/<code>

<code> /<code><code>bans: false //禁用哪些內部對象拖動/<code>

<code> /<code><code>}/<code>

<code> /<code><code>var opts = $.extend(defaults, options);/<code>

<code> /<code><code>var _this = $(this);/<code>

<code> /<code><code>_this.isDragStart = false; //是否拖動模式/<code>

<code> /<code><code>_this.dragStartX = null; //起始座標X/<code>

<code> /<code><code>_this.dragStartY = null; //起始座標Y/<code>

<code> /<code><code>_this.mousedown(function(e) {/<code>

<code> /<code><code>_this.isDragStart = true; //標記為手動模式/<code>

<code> /<code><code>_this.dragStartX = e.pageX - _this.offset().left; //對象起始位置相對座標X/<code>

<code> /<code><code>_this.dragStartY = e.pageY - _this.offset().top; //對象起始位置相對座標Y/<code>

<code> /<code><code>if ($(document).setCapture) {/<code>

<code> /<code><code>$(document).setCapture();/<code>

<code> /<code><code>}/<code>

<code> /<code><code>//滑塊模式（當點擊範圍滑動和點擊處）/<code>

<code> /<code><code>if (opts.slider !== false) {/<code>

<code> /<code><code>var x = e.pageX - opts.slider.offset().left;/<code>

<code> /<code><code>var y = e.pageY - opts.slider.offset().top;/<code>

<code> /<code><code>var ww = opts.range.width();/<code>

<code> /<code><code>var hh = opts.range.height();/<code>

<code> /<code><code>if (x > ww) {/<code>

<code> /<code><code>x = ww;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (y > hh) {/<code>

<code> /<code><code>y = hh;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (opts.sx) {/<code>

<code> /<code><code>opts.slider.css('width', x + 'px');/<code>

<code> /<code><code>opts.sliding(x / ww);/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (opts.sy) {/<code>

<code> /<code><code>opts.slider.css('height', y + 'px');/<code>

<code> /<code><code>opts.sliding(y / hh);/<code>

<code> /<code><code>}/<code>

<code> /<code><code>}/<code>

<code> /<code><code>e.stopPropagation();/<code>

<code> /<code><code>});/<code>

<code> /<code><code>//禁用哪些內部元素拖動/<code>

<code> /<code><code>if (opts.bans !== false) {/<code>

<code> /<code><code>opts.bans.each(function() {/<code>

<code> /<code><code>$(this).mousedown(function(e) {/<code>

<code> /<code><code>e.stopPropagation();/<code>

<code> /<code><code>});/<code>

<code> /<code><code>});/<code>

<code> /<code><code>}/<code>

<code> /<code><code>//拖動時/<code>

<code> /<code><code>$(document).mousemove(function(e) {/<code>

<code> /<code><code>if (!_this.isDragStart) {/<code>

<code> /<code><code>return false;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (opts.slider !== false) {/<code>

<code> /<code><code>x = e.pageX - opts.slider.offset().left;/<code>

<code> /<code><code>y = e.pageY - opts.slider.offset().top;/<code>

<code> /<code><code>} else {/<code>

<code> /<code><code>var x = e.pageX - _this.dragStartX - _this.css('margin-left').replace('px', '');/<code>

<code> /<code><code>var y = e.pageY - _this.dragStartY - _this.css('margin-top').replace('px', '');/<code>

<code> /<code><code>}/<code>

<code> /<code><code>//是否啟用拖動範圍/<code>

<code> /<code><code>if (opts.range !== false) {/<code>

<code> /<code><code>var ww = opts.range.width();/<code>

<code> /<code><code>var hh = opts.range.height();/<code>

<code> /<code><code>var zw = _this.outerWidth(true);/<code>

<code> /<code><code>var zh = _this.outerHeight(true);/<code>

<code> /<code><code>if (x < 0) {/<code>

<code> /<code><code>x = 0;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (y < 0) {/<code>

<code> /<code><code>y = 0;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (opts.slider !== false) {/<code>

<code> /<code><code>if (x > ww) {/<code>

<code> /<code><code>x = ww;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (y > hh) {/<code>

<code> /<code><code>y = hh;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>} else {/<code>

<code> /<code><code>if (x > ww - zw) {/<code>

<code> /<code><code>x = ww - zw;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (y > hh - zh) {/<code>

<code> /<code><code>y = hh - zh;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>}/<code>

<code> /<code><code>}/<code>

<code> /<code><code>//是否滑塊模式，拖動模式/<code>

<code> /<code><code>if (opts.slider !== false) {/<code>

<code> /<code><code>if (opts.sx) {/<code>

<code> /<code><code>opts.slider.css('width', x + 'px');/<code>

<code> /<code><code>opts.sliding(x / ww);/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (opts.sy) {/<code>

<code> /<code><code>opts.slider.css('height', y + 'px');/<code>

<code> /<code><code>opts.sliding(y / hh);/<code>

<code> /<code><code>}/<code>

<code> /<code><code>} else {/<code>

<code> /<code><code>if (opts.sx) {/<code>

<code> /<code><code>_this.css('left', x + 'px').css('right', 'auto');/<code>

<code> /<code><code>}/<code>

<code> /<code><code>if (opts.sy) {/<code>

<code> /<code><code>_this.css('top', y + 'px').css('bottom', 'auto');/<code>

<code> /<code><code>}/<code>

<code> /<code><code>}/<code>

<code> /<code><code>});/<code>

<code> /<code><code>$(document).mouseup(function() {/<code>

<code> /<code><code>if ($(this).releaseCapture) {/<code>

<code> /<code><code>$(this).releaseCapture();/<code>

<code> /<code><code>}/<code>

<code> /<code><code>_this.isDragStart = false;/<code>

<code> /<code><code>});/<code>

<code> /<code><code>}/<code>

<code> /<code><code>});/<code>

<code> /<code><code>$('.ss-player .btn-drag,.ss-player .progressbar').initDrag({/<code>

<code> /<code><code>slider: $('.ss-player .currenttime'),/<code>

<code> /<code><code>sy: false,/<code>

<code> /<code><code>range: $('.ss-player .progressbar'),/<code>

<code> /<code><code>sliding: function(p) {/<code>

<code> /<code><code>var s = p * player.duration;/<code>

<code> /<code><code>player.currentTime = s;/<code>

<code> /<code><code>}/<code>

<code> /<code><code>});/<code>

<code> /<code><code>$('.ss-player').initDrag({/<code>

<code> /<code><code>range: $('body'),/<code>

<code> /<code><code>bans: $('.ss-player .progressbar,.ss-player .btn-ctrl')/<code>

<code> /<code><code>});/<code>

<code> /<code><code>$('.ZZZ').initDrag({/<code>

<code> /<code><code>slider: $('.AAA'),/<code>

<code> /<code><code>sy: false,/<code>

<code> /<code><code>range: $('.ZZZ'),/<code>

<code> /<code><code>sliding: function(p) {/<code>

<code> /<code><code>$('.BBB').html(Math.round(p * 100) + '%');/<code>

<code> /<code><code>}/<code>

<code> /<code><code>});/<code>

<code>});/<code>

<code><code>script/<code><code>>/<code>

<code><code>body/<code><code>>/<code>

<code><code>html/<code><code>>/<code>