html5音乐播放器网页底部,jQuery+html5网页底部固定mp3音乐播放器代码
一款非常简洁的jQuery+html5网页底部固定mp3音乐播放器代码,电脑手机端都适用的h5音乐播放器插件,可拖动播放进度条。有一点缺憾,就是暂停后点击播放按钮会重头开始播放。
查看演示
下载资源:
18
次 下载资源
下载积分:
20
积分
js代码
//底部显示区域总宽度
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');
});
}
});
html5音乐播放器网页底部,jQuery+html5网页底部固定mp3音乐播放器代码相关推荐
- html5网页中加入播放器,10款jquery+html5实现的网页播放器
1.3D版HTML5模拟衣服拖拽动画效果 这是一款3D版HTML5模拟衣服拖拽动画效果源码,是一款非常具有创意而且很好玩的HTML5动画.运行本例源码可见衣服布料呈3D环形显示,可以用鼠标左键来拖拽衣 ...
- Android 播放raw文件夹下音频文件,本地MP3文件播放,播放云端MP3文件,获取MP3文件播放时长
1.复制音频文件到raw文件夹下 2.实例化音频文件 private final MediaPlayer.OnCompletionListener beepListener = new MediaPl ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- 播放器图片html,jQuery实现类似视频播放功能的图片播放器插件
jquery Image Player是一款可以像视频播放一样逐张播放图片的图片播放器jQuery插件.当你需要介绍你的某个产品和项目的时候,这个插件就可以发挥它的强大作用.你可以将产品或项目的各个功 ...
- html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器 代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...
- Android开发本地及网络Mp3音乐播放器(十三)网络音乐搜索功能实现,歌名歌手专辑名搜索
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51298411 觉得博文有用,请点赞,请留言,请关注,谢谢!~ 实现功能: 实现网络音乐 ...
- Android开发本地及网络Mp3音乐播放器(二十)歌曲下载完成后通知主界面更新本地音乐
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51448597 项目源码(打赏5积分请点这边):http://download.csdn ...
- Android开发本地及网络Mp3音乐播放器(十二)创建NetMusicListAdapter、SearchResult显示网络音乐列表
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/51290181 觉得博文有用,请点赞,请留言,请关注,谢谢!~ 实现功能: 实现NetM ...
- MPEG简介 + 如何计算 CBR/VBR MP3 的播放时间
[此文目的] 1. 了解 MPEG相关知识 2. 了解 MP3 的常见术语含义 3. 详解 VBR MP3的帧头格式及含义 4. 搞懂如何去计算 CBR和 VBR的 MP3文件的播放时 ...
- jQuery+html5音乐网站mp3播放器代码
播放器演示 jQuery+html5音乐网站mp3播放器代码演示 播放器介绍 jQuery+html5音乐网站mp3播放器代码 1. 支持显示播放进度条: 2. 支持拖动播放功能: 3. 支持显示音量 ...
最新文章
- CVPR2021|基于双边扩充和自适应融合方法的点云语义分割网络
- 代理 block 通知传值
- fr4速度 微带线_【射频笔记5】传输线理论基础
- python面试设计模式问题_聊聊 Python 面试最常被问到的几种设计模式(下)
- 怎么才能点一下excel中的超链接就显示出图片?_Excel如何批量建立超链接,搭建工作台...
- python 指针_C++的动态内存:C++的指针
- 快速创建UI控件的 方法 ,值得总结1
- python千行代码项目_p2:千行代码入门python
- StanfordDB class自学笔记 (15) Recursion
- 怎么做Web应用压力测试?
- 2021-6-26 激光的工业应用
- 【图片上传与图片显示】 SpringBoot ajax (跨域问题)
- java网页作业提交_基于JAVA网上作业提交批改系统的设计(SQL)(含录像)
- MySQL语法笔记(自用)
- 【鼠标右键点击桌面图标时,出现资源管理器未响应】
- Debian 支持蓝牙音响
- 公众号欢迎各位大佬投稿
- AP微观和宏观经济学考察重点分析
- Android矢量图的制作
- 字符串为null 和 字符串长度为0