基于jQuery实现歌词滚动版音乐播放器的代码


Posted in Javascript onSeptember 17, 2016

先给大家看下效果图,感兴趣的朋友可以参考实现代码

基于jQuery实现歌词滚动版音乐播放器的代码

核心代码如下所示:

$.ajax({
url: "/music/music.txt",
type: "get",
success: function(data) {
data = jQuery.parseJSON(data);
var length = data.length;
var now=0;
for (i = 0; i < length; i++) {
$("#musicText li").eq(i).after("<li>" + data[i].text + "</li>")
}
var player = {
playButton: $(".play"),
songText: $(".musicText"),
state: 0,
//0播放,1暂停
audio: $("#audio").get(0),
bind: function() {
//绑定按钮
//播放或暂停
console.log($.type(this))
console.log($.type(this))
var obj = this;
this.playButton.click(function() {
obj.changeState(obj.state ? 0 : 1);
});
//设置声音
$("#voice").click(function(ex) {
var percent = (ex.clientX - $(this).offset().left) / $(this).width();
obj.setVoice(percent);
});
//默认声音 0.8 
obj.setVoice(1.0);
//静音
$("#voiceOP").click(function() {
if (obj.muted) {
$(this).removeClass("muted");
obj.audio.muted = false;
obj.muted = false;
} else {
$(this).addClass("muted");
obj.audio.muted = true;
obj.muted = true;
}
});
//设置进度
$("#MusicProgress").click(function(ex) {
var percent = (ex.clientX - $(this).offset().left) / $(this).width();
obj.setProgress(percent, false);
});
//上一首
$("#prev").click(function() {
obj.nowIndex--;
if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;
obj.playSing(obj.nowIndex);
});
//下一首
$("#next").click(function() {
obj.nowIndex++;
if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;
obj.playSing(obj.nowIndex);
player.audio.play();
});
//绑定事件 - 播放时间改变
this.audio.ontimeupdate = function() {
obj.timeChange();
}
//播放结束
this.audio.onended = function() {
obj.singEnd();
}
},
//切换播放状态
changeState: function(_state) {
this.state = _state;
if (!this.state) {
this.playButton.removeClass("pause").addClass("play");
this.pause();
} else {
this.playButton.removeClass("play").addClass("pause");
this.play();
}
},
//播放
play: function() {
this.audio.play();
},
//暂停
pause: function() {
this.audio.pause();
},
timeChange: function() {
var nowSec = Math.floor(this.audio.currentTime);
console.log(nowSec)
console.log(data[now].time)
if(nowSec>data[now].time){
now = now + 1;
console.log(now)
$("#musicText li").eq(now).addClass("active").siblings("li").removeClass("active");
$("#musicText").css("top",-(24*now)+138)
}
var totalSec = Math.floor(this.audio.duration);
//当前进度显示
var secTip = secFormat(nowSec) + "/" + secFormat(totalSec);
if (secTip.length == 11) $("#secTip").html(secTip);
this.setProgress(nowSec / totalSec, true);
},
setVoice: function(percent) {
$("#voice").children(".bar").css("width", percent * 100 + "%");
$("#voice").children("a").css("left", percent * 100 + "%");
this.audio.volume = percent;
},
setProgress: function(percent, justCss) {
$("#MusicProgress").children(".bar").css("width", percent * 100 + "%");
$("#MusicProgress").children("a").css("left", percent * 100 + "%");
if (!justCss) this.audio.currentTime = this.audio.duration * percent;
},
singEnd: function() {
if (this.style == 0) {
this.nowIndex++;
if (this.nowIndex >= this.list.length) this.nowIndex = 0;
this.playSing(this.nowIndex);
} else {
var index = Math.floor(Math.random() * (this.list.length + 1)) - 1;
index = index < 0 ? 0 : index;
index = index >= this.list.length ? (this.list.length - 1) : index;
this.playSing(index);
this.nowIndex = index;
}
},
};
player.bind();
function secFormat(num) {
var m = Math.floor(num / 60);
var s = Math.floor(num % 60);
return makeFormat(m) + ":" + makeFormat(s);
function makeFormat(n) {
if (n >= 10) return n;
else {
return "0" + n;
}
}
}
}
})

然后这里的代码是alpha0.0.1版的,一直在升级ing.

以上所述是小编给大家介绍的基于jQuery实现歌词滚动版音乐播放器的代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的。

Javascript 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
IE8 浏览器Cookie的处理
Jan 31 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
jQuery原生的动画效果
Jul 10 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 #Javascript
最全面的JS倒计时代码
Sep 17 #Javascript
jQuery检查元素存在性(推荐)
Sep 17 #Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 #Javascript
Js获取当前日期时间及格式化代码
Sep 17 #Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 #Javascript
jquery遍历标签中自定义的属性方法
Sep 17 #Javascript
You might like
PHP取进制余数函数代码
2012/01/19 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
python线程、进程和协程详解
2016/07/19 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Django--权限Permissions的例子
2019/08/28 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
施工安全协议书
2013/12/11 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书