基于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小实验之函数引用
Nov 17 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
Vue.use源码学习小结
Jun 20 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
一个程序下载的管理程序(三)
2006/10/09 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Javascript的this用法
2017/01/16 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
python移位运算的实现
2019/07/15 Python
keras的三种模型实现与区别说明
2020/07/03 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
常见的软件开发流程有哪些
2015/11/14 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
大课间活动制度
2014/01/18 职场文书
银行优秀员工事迹
2014/02/06 职场文书
2014年内勤工作总结
2014/11/24 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
React forwardRef的使用方法及注意点
2021/06/13 Javascript
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
浅谈克隆 JavaScript
2021/11/02 Javascript
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android