当前位置：首页 > 网页特效 > 音频和视频

HTML5手机自适应音乐播放器代码（原创）

分类：音频和视频日期：2024-05-14 点击(5) 评论(0)

简介

js代码
```javascript
//底部显示区域总宽度
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<leftX){moveX=leftX;}
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');
});
}
});
```

web299.com

HTML5手机自适应音乐播放器代码（原创）

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果