jQuery网页版简易qq音乐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>QQ音乐播放器 - NJ</title><link rel="stylesheet" href="css/jquery.mCustomScrollbar.css"><link rel="stylesheet" href="css/index.css"><script src="js/jquery-1.12.4.js"></script><script src="js/jquery.mCustomScrollbar.concat.min.js"></script><script src="js/player.js"></script><script src="js/progress.js"></script><script src="js/lyric.js"></script><script src="js/index.js"></script></head>
<body>
<div class="header"><h1 class="logo"><a href="#"></a></h1><ul class="register"><li>登录</li><li>设置</li></ul>
</div>
<div class="content"><div class="content_in"><div class="content_left"><div class="content_toolbar"><span><i></i>收藏</span><span><i></i>添加到</span><span><i></i>下载</span><span><i></i>删除</span><span><i></i>清空列表</span></div><div class="content_list" data-mcs-theme="minimal-dark"><ul><li class="list_title"><div class="list_check"><i></i></div><div class="list_number"></div><div class="list_name">歌曲</div><div class="list_singer">歌手</div><div class="list_time">时长</div></li><!-- <li class="list_music"><div class="list_check"><i></i></div><div class="list_number">1</div><div class="list_name">歌曲<div class="list_menu"><a href="javascript:;" title="播放"></a><a href="javascript:;" title="添加"></a><a href="javascript:;" title="下载"></a><a href="javascript:;" title="分享"></a></div></div><div class="list_singer">李凯</div><div class="list_time"><span>03:09</span><a href="javascript:;" title="删除"></a></div></li>--></ul></div></div><div class="content_right"><div class="song_info"><a href="javascript:;" class="song_info_pic"><img src="data:images/lnj.jpg" alt=""></a><div class="song_info_name">歌曲名称:<a href="javascript:;">从零玩转编程开发</a></div><div class="song_info_singer">歌手名:<a href="javascript:;">李南江</a></div><div class="song_info_ablum">专辑名:<a href="javascript:;">从零玩转系列</a></div></div><div class="song_lyric_container"><ul class="song_lyric"></ul></div></div></div>
</div>
<div class="footer"><div class="footer_in"><a href="javascript:;" class="music_pre"></a><a href="javascript:;" class="music_play"></a><a href="javascript:;" class="music_next"></a><div class="music_progress_info"><div class="music_progress_top"><span class="music_progress_name">从零玩转编程 / 李南江</span><span class="music_progress_time">00:00 / 05:23</span></div><div class="music_progress_bar"><div class="music_progress_line"><div class="music_progress_dot"></div></div></div></div><a href="javascript:;" class="music_mode"></a><a href="javascript:;" class="music_fav"></a><a href="javascript:;" class="music_down"></a><a href="javascript:;" class="music_comment"></a><a href="javascript:;" class="music_only"></a><div class="music_voice_info"><a href="javascript:;" class="music_voice_icon"></a><div class="music_voice_bar"><div class="music_voice_line"><div class="music_voice_dot"></div></div></div></div></div>
</div>
<div class="mask_bg"></div>
<div class="mask"></div>
<audio src=""></audio>
</body>
</html>

*{margin: 0;padding: 0;
}
html,body{width: 100%;height: 100%;font-size: 14px;
}
.header{width: 100%;height: 45px;
}
.header .logo{float: left;margin-left: 20px;opacity: 0.5;
}
.header .logo:hover{opacity: 1;
}
.header .logo a{display: inline-block;width: 78px;height: 21px;background: url("../images/player_logo.png") no-repeat 0 0;
}
.header .register{float: right;line-height: 45px;
}.header .register li{list-style: none;float: left;margin-right: 20px;color: #fff;opacity: 0.5;
}
.header .register li:hover{opacity: 1;
}
.content{width: 100%;height: 460px;
}
.content .content_in{width: 1200px;height: 100%;margin: 0 auto;
}
.content_in .content_left{float: left;width: 800px;height: 100%;
}
.content_left .content_toolbar{width: 100%;height: 40px;
}
.content_toolbar span{display: inline-block;width: 122px;height: 100%;line-height: 40px;text-align: center;border: 1px solid #fff;box-sizing: border-box;border-radius: 5px;color: #fff;opacity: 0.5;
}
.content_toolbar span:hover{opacity: 1;
}
.content_toolbar span i{display: inline-block;width: 18px;height: 18px;background: url("../images/icon_sprite.png") no-repeat 0 0;margin-right: 10px;vertical-align: -5px;
}
.content_toolbar span:nth-child(1) i{background-position: -60px -20px;
}
.content_toolbar span:nth-child(2) i{background-position: -20px -20px;
}
.content_toolbar span:nth-child(3) i{background-position: -40px -240px;
}
.content_toolbar span:nth-child(4) i{background-position: -100px -20px;
}
.content_toolbar span:nth-child(5) i{background-position: -40px -300px;
}
.content_left .content_list{width: 100%;height: 420px;overflow: auto;
}
.content_list ul>li{list-style: none;width: 100%;height: 50px;border-bottom: 1px solid rgba(255,255,255,0.5);box-sizing: border-box;user-select: none;
}
.content_list li div{float: left;color: rgba(255,255,255,0.5);line-height: 50px;/*opacity: 0.5;*/
}
.content_list .list_check{width: 50px;height: 100%;text-align: center;
}
.content_list .list_check i{display: inline-block;width: 14px;height: 14px;border: 1px solid #fff;opacity: 0.5;
}
.content_list .list_checked i{background: url("../images/icon_sprite.png") no-repeat -60px -80px;opacity: 1;
}
.content_list .list_number{width: 20px;height: 100%;
}
.content_list .list_number2{color: transparent !important;background: url("../images/wave.gif") no-repeat 0 center;
}
.content_list .list_name{width: 50%;height: 100%;
}
.list_name .list_menu{margin-top: 5px;float: right;margin-right: 20px;display: none;
}
.list_menu a{display: inline-block;width: 36px;height: 36px;background: url("../images/icon_list_menu.png") no-repeat 0 0;opacity: 0.5;
}
.list_menu a:hover{opacity: 1;
}
.list_menu a:nth-child(1){background-position: -120px 0;
}
.list_menu a:nth-child(2){background-position: -120px -80px;
}
.list_menu a:nth-child(3){background-position: -120px -120px;
}
.list_menu a:nth-child(4){background-position: -120px -40px;
}.list_menu .list_menu_play2{background-position: -80px -200px !important;
}.content_list .list_singer{width: 20%;height: 100%;
}
.content_list .list_time a{width: 36px;height: 36px;background: url("../images/icon_list_menu.png") no-repeat -120px -160px;float: left;margin-top: 5px;display: none;opacity: 0.5;
}
.content_list .list_time a:hover{opacity: 1;
}
.content_in .content_right{float: right;width: 400px;height: 100%;user-select: none;
}
.content_right .song_info{text-align: center;color: rgba(255,255,255,0.5);line-height: 30px;
}
.song_info .song_info_pic{display: inline-block;background: url("../images/album_cover_player.png") no-repeat 0 0;width: 201px;height: 180px;text-align: left;
}
.song_info_pic img{width: 180px;height: 180px;
}
.song_info div a{text-decoration: none;color: #fff;opacity: 0.5;
}
.song_info div a:hover{opacity: 1;
}
.content_right .song_lyric_container{margin-top: 30px;height: 150px;overflow: hidden;
}
.content_right .song_lyric{text-align: center;
}
.content_right .song_lyric li{list-style: none;line-height: 30px;font-weight: bold;color: rgba(255,255,255,0.5);
}
.content_right .song_lyric .cur{color: #31c27c;
}.footer{width: 100%;height: 80px;position: absolute;left: 0;bottom: 0;
}
.footer .footer_in{width: 1200px;height: 100%;margin: 0 auto;user-select: none;
}
.footer_in a{display: inline-block;text-decoration: none;color: #fff;background: url("../images/player.png") no-repeat 0 0;margin-right: 20px;
}
.footer_in .music_pre{width: 19px;height: 20px;background-position: 0 -30px;
}
.footer_in .music_play{width: 21px;height: 29px;background-position: 0 0;vertical-align: -5px;
}
.footer_in .music_play2{background-position: -30px 0;
}
.footer_in .music_next{width: 19px;height: 20px;background-position: 0 -52px;
}
.footer_in .music_progress_info{display: inline-block;width: 670px;height: 40px;position: relative;top: 10px;
}
.music_progress_info .music_progress_top{width: 100%;height: 30px;line-height: 30px;color: #fff;
}
.music_progress_top .music_progress_name{float: left;opacity: 0.5;
}
.music_progress_top .music_progress_name:hover{opacity: 1;
}
.music_progress_top .music_progress_time{float: right;opacity: 0.5;
}
.music_progress_info .music_progress_bar{width: 100%;height: 4px;background: rgba(255,255,255,0.5);margin-top: 5px;position: relative;
}
.music_progress_bar .music_progress_line{width: 0px;height: 100%;background: #fff;
}
.music_progress_line .music_progress_dot{width: 14px;height: 14px;border-radius: 50%;background: #fff;position: absolute;top: -5px;left: 0px;
}
.footer_in .music_mode{width: 26px;height: 25px;background-position: 0 -205px;
}
.footer_in .music_mode2{width: 23px;height: 20px;background-position: 0 -260px;
}
.footer_in .music_mode3{width: 25px;height: 19px;background-position: 0 -74px;
}
.footer_in .music_mode4{width: 26px;height: 25px;background-position: 0 -232px
}
.footer_in .music_fav{width: 24px;height: 21px;background-position: 0 -96px;
}
.footer_in .music_fav2{background-position: -30px -96px;
}
.footer_in .music_down{width: 22px;height: 21px;background-position: 0 -120px;
}
.footer_in .music_comment{width: 24px;height: 24px;background-position: 0 -400px;
}
.footer_in .music_only{width: 74px;height: 27px;background-position: 0 -281px;
}
.footer_in .music_only2{background-position: 0 -310px;
}
.footer_in .music_voice_info{display: inline-block;width: 100px;height: 40px;'
line-height: 40px;position: relative;top: 10px;
}
.music_voice_info .music_voice_icon{width: 26px;height: 21px;background-position: 0 -144px;position: absolute;left: 0;top: 10px;
}
.music_voice_info .music_voice_icon2{background-position: 0 -182px;
}
.music_voice_info .music_voice_bar{width: 70px;height: 4px;background: rgba(255,255,255,0.5);position: absolute;right: 0;top: 18px;
}
.music_voice_bar .music_voice_line{width: 70px;height: 100%;background: #fff;
}
.music_voice_line .music_voice_dot{width: 14px;height: 14px;border-radius: 50%;background: #fff;position: relative;top: -5px;left: 70px;
}
.mask_bg{position: absolute;left: 0;top: 0;z-index: -2;width: 100%;height: 100%;background: url("../images/lnj.jpg") no-repeat 0 0;background-size: cover;filter: blur(100px);
}
.mask{position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background: rgba(0,0,0,0.35);
}
._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar{width:8px;
}

$(function () {// 0.自定义滚动条$(".content_list").mCustomScrollbar();var $audio = $("audio");var player = new Player($audio);var progress;var voiceProgress;var lyric;//1 、加载歌曲列表getPlayList();function getPlayList() {$.ajax({url:"./source/musiclist.json",dataType:"json",success:function (data) {player.musicList = data;//3.1 遍历数据，创建每一条音乐var $musicList = $(".content_list ul");$.each(data,function (index,ele) {var $item = crateMusicItem(index, ele);//3.1.1 添加子元素$musicList.append($item);});initMusicInfo(data[0]);initMusicLyric(data[0]);},error:function (e) {console.log(e);}});}//2、初始化歌曲信息function initMusicInfo(music) {var $musicImg = $(".song_info_pic>img");var $musicName = $(".song_info_name>a");var $musicSinger = $(".song_info_singer>a");var $musicAblum = $(".song_info_ablum>a");var $musicProgressName = $(".music_progress_name");var $musicProgressTime = $(".music_progress_time");var $mskBg = $(".mask_bg");//给获取到的元素赋值$musicImg.attr("src",music.cover);$musicName.text(music.name);$musicSinger.text(music.singer);$musicAblum.text(music.album);$musicProgressName.text(music.name +" / "+music.singer);$musicProgressTime.text("00:00 / "+music.time);$mskBg.css("background", "url('"+music.cover+"')");}//3、初始化歌词信息function initMusicLyric(music) {lyric = new Lyric(music.link_lrc);var $lyricContainer = $(".song_lyric");//清空上一首歌的歌词$lyricContainer.html("");lyric.loadLyric(function () {//创建歌词列表$.each(lyric.lyrics,function (index,ele) {var $item = $("<li>"+ele+"</li>");$lyricContainer.append($item);})});}//5、初始化进度条initProgress()function initProgress() {var $musicProgressBar = $(".music_progress_bar");var $musicProgressLine = $(".music_progress_line");var $musicProgressDot = $(".music_progress_dot");progress = Progress($musicProgressBar,$musicProgressLine,$musicProgressDot);progress.progressClick(function (value) {player.musicSeekTo(value);});progress.progressMove(function (value) {player.musicSeekTo(value);});//声音滚动条var $voiceBar = $(".music_voice_bar");var $voiceLine = $(".music_voice_line");var $voiceDot = $(".music_voice_dot");voiceProgress = Progress($voiceBar,$voiceLine,$voiceDot);voiceProgress.progressClick(function (value) {player.musicVoiceSeekTo(value);});voiceProgress.progressMove(function (value) {player.musicVoiceSeekTo(value);});}//6、 初始化事件监听initEvents();function initEvents() {//1、监听鼠标移入移出歌曲的事件//因为list_music是动态创建的所以监听时要形成事件委托$(".content_list").delegate(".list_music","mouseenter",function () {// 显示子菜单(find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。)$(this).find(".list_menu").stop().fadeIn(100);//隐藏时间$(this).find(".list_time>span").stop().fadeOut(100);$(this).find(".list_time>a").stop().fadeIn(100);});$(".content_list").delegate(".list_music","mouseleave",function () {// 显示子菜单(find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。)$(this).find(".list_menu").stop().fadeOut(100);$(this).find(".list_time>a").stop().fadeOut(100);//隐藏时间$(this).find(".list_time>span").stop().fadeIn(100);});//2、监听复选框的点击事件/*addClass()是在原有的类基础上增加类属性，仍然保留原有的类的样式toggleClass() 是切换元素class类别，删除原有的class样式，替换为新的class样式. (切换,没有加，有减)*/$(".content_list").delegate(".list_check","click",function (){$(this).toggleClass("list_checked");});/*$(".list_title>.list_check").click(function () {if( $(this).attr("class").indexOf("list_checked") !=-1){//未选中$(this).addClass("list_checked");}else {$(this).removeClass("list_checked");}});*///5 、子菜单播放按钮的监听//获取下面的播放按钮var $music_play = $(".music_play");$(".content_list").delegate(".list_menu_play","click",function (){var $item =  $(this).parents(".list_music");// console.log($item.get(0).index); //获取播放音乐的编号//  console.log($item.get(0).music);//5.1 切换图标$(this).toggleClass("list_menu_play2");//5.2 复原其他播放图标$item.siblings().find(".list_menu_play").removeClass(".list_menu_play2");//5.3 同步底部的播放按钮if($(this).attr("class").indexOf("list_menu_play2") != -1){//当前是播放状态$music_play.addClass("music_play2");// 让文字高亮$item.find("div").css("color","#fff");$item.siblings().find("div").css("color","rgba(255,255,255,0.5)");}else {$music_play.removeClass("music_play2");// 让文字恢复$item.find("div").css("color","rgba(255,255,255,0.5)");}//5.4 播放时切换为跳动图标this代表.list_menu_play$item.find(".list_number").toggleClass("list_number2");$item.siblings().find(".list_number").removeClass("list_number2");//5.5 播放音乐player.playMusic($item.get(0).index,$item.get(0).music);//5.6 切换歌曲信息initMusicInfo($item.get(0).music);//5.7 切换歌词信息initMusicLyric($item.get(0).music);});//6、监听底部控制区域的播放按钮的点击$music_play.click(function () {//先判断是否是第一次播放if(player.currentIndex  == -1){//第一次播放，找到第一首歌，自动触发他的点击事件$(".list_music").eq(0).find(".list_menu_play").trigger("click");}else {$(".list_music").eq(player.currentIndex).find(".list_menu_play").trigger("click");}});//7、监听底部控制区域的上一首按钮的点击$(".music_pre").click(function () {$(".list_music").eq(player.preIndex()).find(".list_menu_play").trigger("click");});//8、监听底部控制区域的下一首按钮的点击$(".music_next").click(function () {$(".list_music").eq(player.nextIndex()).find(".list_menu_play").trigger("click");});//9.监听子菜单的删除按钮的点击$(".content_list").delegate(".list_menu_del","click",function () {var $item = $(this).parents(".list_music");//判断删除的音乐是否是当前正在播放的音乐if($item.get(0).index  == player.currentIndex){//当前播放删除，播放下一首音乐$(".music_next").trigger("click");}$item.remove();player.changeMusic($item.get(0).index);//删除后需要重新排序$(".list_music").each(function (index,ele) {ele.index  = index;$(ele).find(".list_number").text(index + 1);});});//10.监听播放进度player.musicTimeUpdate(function (currentTime, duration, timeStr) {$(".music_progress_time").text(timeStr);//同步进度//就是播放百分比var value = currentTime / duration *100;progress.setProgress(value);// 实现歌词同步var index = lyric.currentIndex(currentTime);var $item = $(".song_lyric li").eq(index);$item.addClass("cur");$item.siblings().removeClass("cur");// 实现歌词滚动if(index <= 2) return;$(".song_lyric").css({marginTop: (-index + 2) * 30});});//11、监听声音和图标的点击$(".music_voice_icon").click(function () {$(this).toggleClass("music_voice_icon2");//声音的切换if($(this).attr("class").indexOf("music_voice_icon2") != -1){//变为没有声音player.musicVoiceSeekTo(0);}else {//变为有声音player.musicVoiceSeekTo(1);}});}//4、定义方法创建一条音乐function  crateMusicItem(index, music) {var $item = $("<li class=\"list_music\">\n" +"                        <div class=\"list_check\"><i></i></div>\n" +"                        <div class=\"list_number\">"+(index+1)+"</div>\n" +"                        <div class=\"list_name\">"+music.name+"\n" +"                            <div class=\"list_menu\">\n" +"                                <a href=\"javascript:;\" title=\"播放\" class='list_menu_play'></a>\n" +"                                <a href=\"javascript:;\" title=\"添加\"></a>\n" +"                                <a href=\"javascript:;\" title=\"下载\"></a>\n" +"                                <a href=\"javascript:;\" title=\"分享\"></a>\n" +"                            </div>\n" +"                        </div>\n" +"                        <div class=\"list_singer\">"+music.singer+"</div>\n" +"                        <div class=\"list_time\">\n" +"                            <span>"+music.time+"</span>\n" +"                            <a href=\"javascript:;\" title=\"删除\" class='list_menu_del'></a>\n" +"                        </div>\n" +"                    </li>");$item.get(0).index = index;//将他的序号保存到原生list_music中$item.get(0).music = music;return $item;}
});

(function (window) {function Player($audio) {return new Player.prototype.init($audio);}Player.prototype = {constructor: Player,//自定义musicList: [],init: function ($audio) { //初始化this.$audio = $audio;this.audio = $audio.get(0);},currentIndex: -1,// 当前音乐playMusic:function (index, music) {if(this.currentIndex == index){//同一首音乐在暂停和播放之间切换if(this.audio.paused){this.audio.play();}else {this.audio.pause();}}else {// 不是同一首this.$audio.attr("src", music.link_url);this.audio.play();this.currentIndex = index;}},//处理索引preIndex:function () {var index = this.currentIndex - 1;if(index < 0){index = this.musicList.length - 1;}return index;},nextIndex:function () {var index = this.currentIndex + 1;if(index > this.musicList.length - 1){index = 0;}return index;},changeMusic:function (index) {//删除对应的数据this.musicList.splice(index,1);// 判断当前删除的是否是正在播放音乐的前面的音乐if(index < this.currentIndex){this.currentIndex = this.currentIndex - 1;}},musicTimeUpdate: function (callBack) {var $this = this;this.$audio.on("timeupdate", function () {var duration = $this.audio.duration;var currentTime = $this.audio.currentTime;var timeStr = $this.formatDate(currentTime, duration);callBack(currentTime, duration, timeStr);//使用回调函数为了返回三个参数给 musicTimeUpdate的函数});},formatDate: function (currentTime, duration) {var endMin = parseInt(duration / 60); // 2var endSec = parseInt(duration % 60);if(endMin < 10){endMin = "0" + endMin;}if(endSec < 10){endSec = "0" + endSec;}var startMin = parseInt(currentTime / 60); // 2var startSec = parseInt(currentTime % 60);if(startMin < 10){startMin = "0" + startMin;}if(startSec < 10){startSec = "0" + startSec;}return startMin+":"+startSec+" / "+endMin+":"+endSec;},musicSeekTo: function (value) {//判断是否传入的是浮点数if(isNaN(value)) return;this.audio.currentTime = this.audio.duration * value;},musicVoiceSeekTo:function (value) {if(isNaN(value)) return;if(value <0 || value > 1) return;//这个属性的取值范围是 0 ~ 1this.audio.volume = value;}};Player.prototype.init.prototype = Player.prototype;window.Player = Player;})(window);

(function (window) {function Progress($musicProgressBar,$musicProgressLine,$musicProgressDot) {return new Progress.prototype.init($musicProgressBar,$musicProgressLine,$musicProgressDot);}Progress.prototype = {constructor: Progress,//自定义init: function ($musicProgressBar,$musicProgressLine,$musicProgressDot) { //初始化this.$progressBar = $musicProgressBar;this.$progressLine = $musicProgressLine;this.$progressDot = $musicProgressDot;},isMove:false,progressClick:function (callBack) {var $this = this; //这个this是progress//监听背景的点击this.$progressBar.click(function (event) {//获取背景默认到窗口边的距离var normalLeft = $(this).offset().left; //这个this是$musicProgressBar//获取点击位置到窗口边的距离var evenLeft = event.pageX;//设置前景的宽度$this.$progressLine.css("width",evenLeft - normalLeft);$this.$progressDot.css("left",evenLeft - normalLeft);//计算进度条的比例（前景宽度除以背景宽度）var value = (evenLeft - normalLeft) / $(this).width();callBack(value);});},progressMove:function (callBack) {var $this = this;// 获取背景距离窗口默认的位置var normalLeft = this.$progressBar.offset().left;var barWidth = this.$progressBar.width();var eventLeft;//1、监听鼠标按下事件this.$progressBar.mousedown(function () {this.isMove = true;var normalLeft = $(this).offset().left; //这个this是$musicProgressBar//2、监听鼠标移动事件$(document).mousemove(function () {//获取点击位置到窗口边的距离var evenLeft = event.pageX;//设置前景的宽度$this.$progressLine.css("width",evenLeft - normalLeft);$this.$progressDot.css("left",evenLeft - normalLeft);//计算进度条的比例（前景宽度除以背景宽度）var value = (evenLeft - normalLeft) / $(this).width();callBack(value);});});//3、监听鼠标抬起事件$(document).mouseup(function () {$(document).off("mousemove");this.isMove = false;var value = (eventLeft - normalLeft) / barWidth;callBack(value);});},setProgress:function (value) {if(this.isMove) return;//默认情况下是false，在拖拽的情况下就会执行下面的代码，否则则不执行if(value <0 || value > 100) return;this.$progressLine.css({width:value + "%"});this.$progressDot.css({left:value + "%"});}};Progress.prototype.init.prototype = Progress.prototype;window.Progress = Progress;})(window);

(function (window) {function Lyric(path) {return new Lyric.prototype.init(path);}Lyric.prototype = {constructor: Lyric,init: function (path) {this.path = path;},times: [],lyrics: [],index: -1,loadLyric: function (callBack) {var $this = this;$.ajax({url: $this.path,dataType: "text",success: function (data) {// console.log(data);$this.parseLyric(data);callBack();},error: function (e) {console.log(e);}});},parseLyric: function (data) {var $this = this;// 一定要清空上一首歌曲的歌词和时间$this.times = [];$this.lyrics = [];var array = data.split("\n");// console.log(array);// [00:00.92]var timeReg = /\[(\d*:\d*\.\d*)\]/// 遍历取出每一条歌词$.each(array, function (index, ele) {// 处理歌词var lrc = ele.split("]")[1];// 排除空字符串(没有歌词的)if(lrc.length == 1) return true;$this.lyrics.push(lrc);// 处理时间var res = timeReg.exec(ele);// console.log(res);if(res == null) return true;//表示继续执行var timeStr = res[1]; // 00:00.92var res2 = timeStr.split(":");var min = parseInt(res2[0]) * 60;var sec = parseFloat(res2[1]);var time = parseFloat(Number(min + sec).toFixed(2)) ;$this.times.push(time);});// console.log($this.times + "");// console.log($this.lyrics + "");},currentIndex: function (currentTime) {// console.log(currentTime);// 0.93 >= 0.92// 4.8 >= 4.75if(currentTime >= this.times[0]){this.index++; // 0  1this.times.shift(); // 删除数组最前面的一个元素}return this.index; // 1}/*[6.4,23.59,26.16,29.33,34.27,36.9];["告白气球 - 周杰伦","词：方文山","曲：周杰伦","塞纳河畔 左岸的咖啡","我手一杯 品尝你的美","留下唇印的嘴","花店玫瑰 名字写错谁","告白气球 风吹到对街"]*/}Lyric.prototype.init.prototype = Lyric.prototype;window.Lyric = Lyric;
})(window);

jQuery网页版简易qq音乐相关推荐

HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
网页版简易计算器（仅加减乘除）
网页版简易计算器(仅加减乘除) ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:20 ...
Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...
制作网页版简易计算器（Calculator）
网页版计算器的制作比想象中要来的容易,界面上只需固定计算器面板的宽高和按钮的宽高即可. 先放张图: 代码下载与演示:https://codepen.io/yinyoupoet/pen/oeewWw 讲 ...
陌陌推出网页版支持观看音乐互动直播
陌陌 3月23日消息,近日,移动社交应用陌陌推出网页版,用户可以通过电脑进行即时消息的收发.网页版陌陌支持移动端应用的大部分功能,可以收发文字信息和表情贴纸.收听语音信息.体验聊天室.观看音乐互动直播 ...
Web网页版简易计算器
说明: 1.这个计算器的功能比较简单,包括加减乘除,小数点,退格,清除以及等于. 2.首先写出html,即界面主要框架:再写出css,即属性,使框架看起来美观一些:最后就是javascript,就是功 ...
协议分析（微信网页版 wx2.qq.com）
转自:http://biezhi.me/2016/02/21/wechat-protocol-analysis/ 打开首页,分配一个随机uuid, 根据该uuid获取二维码图片. 微信客户端扫描该图片 ...
jQuery实现高仿QQ音乐
几个实现的效果看视频吧: bandicam 2020-02-05 16-28-20-127 动图很是不清楚 github地址奉上:https://github.com/tangmusenLiu/Lar ...
音乐微信小程序源码php版,仿QQ音乐的微信小程序
//获取推荐频道数据 function getRecommend(callback) { wx.request({ url: 'https://c.y.qq.com/musichall/fcgi-bi ...

jQuery网页版简易qq音乐

jQuery网页版简易qq音乐相关推荐

最新文章

热门文章