基于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图片平滑连续滚动插件
Apr 27 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
BootStrap 导航条实例代码
May 18 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python字符串常用方法
2018/06/14 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python 公共方法汇总解析
2019/09/16 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
三年级数学教学反思
2014/01/31 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
师德先进个人材料
2014/12/20 职场文书
先进个人申报材料
2014/12/30 职场文书
故宫的导游词
2015/01/31 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
纪律委员竞选稿
2015/11/19 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书