特效描述：利用HTML5實現 網頁底部音樂 播放器代碼。利用HTML5實現網頁底部音樂播放器代碼

代碼結構

1. 引入JS

2. HTML代碼

瀏覽器不支持此格式

00:0000:00

//底部顯示區域總寬度

var footerW = $('.myaudio').width();

//中央顯示區域的寬度

var audioW = $('.myaudio-center').width();

//alert(footerW);

//alert(audioW);

$('.myaudio-center').css({'left':(footerW-audioW)/2})

$('.aud-show').css({'width':audioW-70})

$('#Progress').css({'width':audioW-170})

var i=0;

$('#play').click(function () {

i++;

if (i % 2 != 0) {

$(this).attr('src', 'images/pause.png');

aud_play();

} else {

$(this).attr('src', 'images/play.png');

aud_pause()

}

})

var music;

var audio = document.getElementById("aud");

function aud_play(q=0) {

audio.currentTime = q;

audio.play();

music = setInterval(function () {

var curtime = audio.currentTime.toFixed(2);//播放進度

var durtime = audio.duration.toFixed(2);//播放時間

var str = "00:00";

var time = formatSeconds(curtime);

var time1 = str.substring(0, str.length - formatSeconds(durtime).length) + formatSeconds(durtime);

$('#Progress-time').html(time);

$('#Progress-end').html(time1);

$width = curtime / durtime * (audioW - 181);

$('#jin').css({width: $width})

$('#yuan').css({left: $width})

}, 100);

}

function aud_pause() {

document.getElementById("aud").pause();

clearInterval(music);

}

function formatSeconds(value) {

var theTime = parseInt(value);// 秒

var theTime1 = 0;// 分

var theTime2 = 0;// 小時

if (theTime > 60) {

theTime1 = parseInt(theTime / 60);

theTime = parseInt(theTime % 60);

if (theTime1 > 60) {

theTime2 = parseInt(theTime1 / 60);

theTime1 = parseInt(theTime1 % 60);

}

}

var result = "" + theTime;

result = (result.length==1)?'0'+result:result;

if (theTime1 > 0) {

theTime1 = (theTime1.length==1)?'0'+theTime1:theTime1;

result = "" + theTime1 + ":" + result;

}

if (theTime2 > 0) {

theTime2 = (theTime2.length==1)?'0'+theTime2:theTime2;

result = "" + theTime2 + ":" + result;

}

result = (result.length==2)?'00:'+result:result;

return result;

}

var cont = $("#yuan");

var contW = $("#yuan").width();

var startX, sX, moveX, disX;

var winW = $('#Progress').width();

$("#yuan").on({//綁定事件

touchstart: function (e) {

startX = e.originalEvent.targetTouches[0].pageX; //獲取點擊點的X坐標

sX = $(this).offset().left-110;//相對于當前窗口X軸的偏移量

leftX = startX - sX;//鼠標所能移動的最左端是當前鼠標距div左邊距的位置

rightX = winW - contW + leftX;//鼠標所能移動的最右端是當前窗口距離減去鼠標距div最右端位置

},

touchmove: function (e) {

//aud_pause();

e.preventDefault();

moveX = e.originalEvent.targetTouches[0].pageX;//移動過程中X軸的坐標

if(moveX

if(moveX>rightX){moveX=rightX;}

$(this).css({

"left":moveX+sX-startX,

});

$('#jin').width($(this).width()+moveX+sX-startX);

var w = audio.duration.toFixed(2)*($('#jin').width()/winW)

$('#play').attr('src', 'images/pause.png');

aud_play(w)

},

mousedown: function (ev) {

aud_pause()

var patch = parseInt($(this).css("height")) / 2;

var left1 = parseInt($(this).parents('.myaudio-center').css("left"));

$(this).mousemove(function (ev) {

var oEvent = ev || event;

// console.log(oEvent);

var oX = oEvent.clientX;

console.log(oX);

var l = oX - patch-left1-115;//115為$("#yuan")的起始位置到$('.myaudio-center')左邊的距離

console.log(l);

var w = $(window).width() - $(this).width();

console.log(w);

if (l < 0) {

l = 0

}

if (l > w) {

l = w

}

$(this).css({left: l})

$('#jin').width($(this).width()+l);

var w = audio.duration.toFixed(2)*($('#jin').width()/winW)

$('#play').attr('src', 'images/pause.png');

aud_play(w)

});

$(this).mouseup(function () {

$(this).unbind('mousemove');

});

}

});

總結

以上是生活随笔為你收集整理的HTML右下角音乐播放器,利用HTML5实现网页底部音乐播放器代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。