基于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 相关文章推荐
jQuery中before()方法用法实例
Dec 25 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
js中console在一行内打印字符串和对象的方法
Sep 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP函数积累总结
2019/03/19 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
angular4自定义组件详解
2017/09/28 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python追加元素到列表的方法
2015/07/28 Python
Python随机数random模块使用指南
2016/09/09 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
心理健康活动总结
2014/04/30 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
应届毕业生自荐书
2014/06/18 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
齐云山导游词
2015/02/06 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python