基于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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
node app 打包工具pkg的具体使用
Jan 17 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
Python正则表达式使用范例分享
2016/12/04 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Python读写压缩文件的方法
2020/07/30 Python
Python实现壁纸下载与轮换
2020/10/19 Python
历史专业个人求职信分享
2013/12/20 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
前台文员岗位职责
2015/02/04 职场文书
在职证明范本
2015/06/15 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
单位病假条范文
2015/08/17 职场文书
2016中秋节广告语
2016/01/28 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技