QQ音乐播放器项目

大体效果如下：

HTML结构分析：

一、页面布局

1、首先来看下HTML大体结构：

<div class="header"></div>
<div class="content"><div class="content-in"><div class="content-left"></div><div class="content-right"></div></div>
</div>
<div class="footer"><div class="footer-in"></div>
</div>

效果如下：

2、完成页面头部

HTML代码：

<div class="header"><!-- logo --><h1 class="logo"><a href="#"></a></h1><!-- 登录注册按钮 --><ul class="register"><li>登录</li><li>注册</li></ul>
</div>

css样式代码：

.header {width: 100%;height: 45px;
}.header .logo {float: left;margin-left: 20px;opacity: .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 {line-height: 45px;list-style: none;float: right;
}.header .register li {float: left;cursor: pointer;margin-right: 20px;color: #fff;opacity: .5;
}.header .register li:hover {opacity: 1;
}

效果如下：

3、完成内容区的菜单部分

HTML结构如下：

<!-- 作为菜单标签 -->
<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>

css样式如下：

.content .content-in .content-left .content-toolbar {width: 100%;height: 40px;}.content .content-in .content-left .content-toolbar span {display: inline-block;width: 122px;height: 100%;border: 1px solid #fff;box-sizing: border-box;text-align: center;line-height: 40px;border-radius: 5px;opacity: .5;color: #fff;font-size: 14px;
}.content .content-in .content-left .content-toolbar span:hover {opacity: 1;
}.content .content-in .content-left .content-toolbar span i {width: 18px;height: 18px;display: inline-block;background: url(../images/icon_sprite.png) no-repeat 0 0;vertical-align: -5px;margin-right: 9px;}.content .content-in .content-left .content-toolbar span:nth-child(1) i {background-position: -60px -20px;
}.content .content-in .content-left .content-toolbar span:nth-child(2) i {background-position: -20px -20px;
}.content .content-in .content-left .content-toolbar span:nth-child(3) i {background-position: -40px -240px;
}.content .content-in .content-left .content-toolbar span:nth-child(4) i {background-position: -100px -20px;
}.content .content-in .content-left .content-toolbar span:nth-child(5) i {background-position: -40px -300px;
}

4、完成歌曲列表布局

我们只完成第一行，因为除了第一行以外，其他的都是歌曲，后边通过js来动态创建

<!-- 作为歌曲菜单 -->
<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></ul>
</div>

css样式如下：

.content .content-in .content-left .content-list {width: 100%;/* height: 760px; */height: 600px;overflow: auto;margin-top: 50px;
}.content-list li {width: 775px;height: 50px;list-style: none;border-bottom: 1px solid rgba(255, 255, 255, .5);user-select: none;
}.content-list div {float: left;line-height: 50px;/*opacity: .8;*/color: rgba(255, 255, 255, .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;box-sizing: border-box;opacity: .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%;
}.content-list .list-music .list-name .list-menu {float: right;margin-top: 7px;margin-right: 10px;display: none;
}.content-list .list-music .list-name .list-menu a {display: inline-block;width: 36px;height: 36px;background: url(../images/icon_list_menu.png) no-repeat 0 0;opacity: .5;
}.content-list .list-music .list-name .list-menu a:hover {opacity: 1;
}.content-list .list-music .list-name .list-menu a:nth-child(1) {background-position: -120px 0;
}.content-list .list-music .list-name .list-menu a:nth-child(2) {background-position: -120px -80px;
}.content-list .list-music .list-name .list-menu a:nth-child(3) {background-position: -120px -120px;
}.content-list .list-music .list-name .list-menu a:nth-child(4) {background-position: -120px -40px;
}.content-list .list-menu-play2 {background-position: -80px -200px !important;
}.content-list .list-singer {width: 20%;height: 100%;
}.content-list .list-time {width: 20%;height: 100%;
}.content-list .list-music .list-time a {display: inline-block;width: 36px;height: 36px;background: url(../images/icon_list_menu.png) no-repeat 0 0;background-position: -120px -160px;float: left;margin-top: 7px;display: none;opacity: .5;
}.content-list .list-music .list-time a:hover {opacity: 1;
}

5、自定义歌曲列表滚动条

首先下载一个jQuery插件：jQuery custom content scroller（http://manos.malihu.gr/jquery-custom-content-scroller/）
引入下载好的css文件
为需要添加的元素调用mCustomScrollbar()方法： $(".content_list").mCustomScrollbar();
为该元素添加自定义属性 data-mcs-theme=“dark”：<div class="content_list" data-mcs-theme='minimal-dark'></div>
可以设置滚动条的宽度：
._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar { width: 8px; }

如图所示自定义滚动条设置完毕：

6、右边的歌曲信息与歌词布局

HTML结构如下：

<!-- 作为内容区的右边部分 -->
<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-album">专辑名：<a href="javascript:;">未知名系列</a></div></div><div class="song-lyric-container"><!-- 歌词 --><ul class="song-lyric"><!-- 默认显示两条歌词 --></ul></div>
</div>

css样式如下：

.content-right {width: 400px;height: 100%;float: right;user-select: none;
}.content-right .song-info {text-align: center;color: rgba(255, 255, 255, .5);line-height: 30px;cursor: pointer;
}.content-right .song-info .song-info-pic {display: inline-block;width: 201px;height: 180px;text-align: left;background: url(../images/album_cover_player.png) no-repeat 0 0;
}.song-info-pic img {width: 180px;height: 180px;
}.content-right .song-info div a {text-decoration: none;color: #fff;opacity: .5;
}.content-right .song-info div a:hover {opacity: 1;
}
.content-right .song-lyric-container {height: 300px;overflow: hidden;margin-top: 70px;/* background-color: rebeccapurple; */
}.content-right .song-lyric {cursor: pointer;opacity: .7;list-style: none;text-align: center;line-height: 30px;/* font-weight: bold; */font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;font-size: 15px;
}.content-right .song-lyric .cur {color: #31c27c;}

7、底部播放按钮部分

HTML结构：

<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:30</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-right"><!-- 音量进度条 --><div class="music-voice-bar"><div class="music-voice-line"><div class="music-voice-dot"></div></div></div></div></div></div>

css样式：

.footer {width: 100%;height: 80px;position: absolute;bottom: 0;
}.footer-in {width: 1200px;height: 100%;margin: auto;user-select: none;
}.footer-in div {display: inline-block;
}.footer-in a {display: inline-block;text-decoration: none;background: url(../images/player.png) no-repeat 0 0;margin-right: 40px;
}.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 {width: 500px;height: 40px;margin-right: 40px;
}.footer-in .music-progress-info .music-progress-top {width: 100%;height: 20px;line-height: 20px;color: #fff;
}.footer-in .music-progress-info .music-progress-top .music-progress-name {float: left;
}.footer-in .music-progress-info .music-progress-top .music-progress-time {float: right;
}.footer-in .music-progress-info .music-progress-bar {width: 100%;height: 4px;background-color: rgba(255, 255, 255, .5);position: relative;
}.footer-in .music-progress-info .music-progress-line {width: 0;height: 100%;background-color: #fff;float: left;
}.footer-in .music-progress-info .music-progress-dot {width: 14px;height: 14px;border-radius: 50%;background-color: white;position: absolute;top: -5px;left: 0;
}.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;margin-right: 20px;
}.footer-in .music-only2 {background-position: 0 -310px;
}.footer-in .music-voice-info {width: 93px;height: 24px;
}.footer-in .music-voice-info .music-voice-icon {display: inline-block;width: 26px;height: 21px;background-position: 0 -144px;margin-right: 0;}.footer-in .music-voice-info .music-voice-icon2{background-position: 0 -182px;
}.footer-in .music-voice-info .music-voice-right {width: 68%;height: 100%;float: right;margin-right: 0;margin-top: -3px;
}.footer-in .music-voice-info .music-voice-bar {width: 100%;height: 4px;background-color: rgba(255, 255, 255, .5);
}.footer-in .music-voice-info .music-voice-line {width: 100%;height: 100%;background-color: #fff;position: relative;float: left;
}.footer-in .music-voice-info .music-voice-dot {width: 14px;height: 14px;border-radius: 50%;background-color: white;position: absolute;top: -5px;left: 100%;
}

8、高斯模糊背景设置

我们需要定义两div用来设置页面整体高斯模糊背景图像

<!-- 歌手音乐图片作为背景效果 -->
<div class="mask-bg"></div>
<!-- 灰色遮罩 -->
<div class="mask"></div>

有了这两元素大体上就可以设置我们的背景效果了。
css样式效果如下：

.mask-bg {z-index: -2;width: 100%;height: 100%;background: url(../images/lnj.jpg) no-repeat 0 0;background-size: cover;position: absolute;top: 0;left: 0;filter: blur(100px);/* 图片模糊设置 */
}.mask {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(0, 0, 0, 0.35);z-index: -1;
}

注意点：

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

到现在为止，静态页面已经布局完毕。

二、页面动态部分

为了后期的维护，我们需要单独为每个类型功能封装到一个js文件中。

其中QQ音乐的关于播放的功能都封装到了player.js的文件中，进度条的功能都封装到了progress.js中，关于歌词的显示部分封装到了lyric.js 中，其他逻辑部分封装到index.js中。

1、index.js

$(function () {// 0.自定义滚动条$(".content-list").mCustomScrollbar();var $audio = $("audio");var player = new Player($audio);var progress, voiceProgressvar lyric//加载歌曲列表getPlayerList();function getPlayerList() {// 解析json文件$.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);$musicList.append($item)})// 调用歌曲信息函数initMusicInfo(data[0])// 调用歌词信息函数initMusicLyric(data[0])},error: function (e) {console.log(e)}})}//初始化歌曲信息function initMusicInfo(music) {// 获取元素var $musicImage = $('.song-info-pic img')var $musicName = $('.song-info-name a')var $musicSinger = $('.song-info-singer a')var $musicAlbum = $('.song-info-album a')var $musicProgressName = $('.music-progress-name')var $musicProgressTime = $('.music-progress-time')var $musicBg = $('.mask-bg')// 给获取到的元素赋值$musicImage.attr('src', music.cover)$musicName.text(music.name)$musicSinger.text(music.singer)$musicAlbum.text(music.album)$musicProgressName.text(music.name + ' / ' + music.singer)$musicProgressTime.text('00:00 / ' + music.time)$musicBg.css("background","url('"+music.cover+"')")}//初始化歌词信息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)})})}//初始化进度条initProgress()function initProgress() {var $progressBar = $(".music-progress-bar")var $progressLine = $(".music-progress-line")var $progressDot = $(".music-progress-dot")progress = Progress($progressBar, $progressLine, $progressDot)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)})}//初始化事件监听initEvents()function initEvents() {// 1.监听歌曲的移入移出事件$(".content-list").delegate(".list-music", "mouseenter", function () {// 显示子菜单$(this).find('.list-menu').stop().fadeIn(100)$(this).find('.list-time a').stop().fadeIn(100)//隐藏时长$(this).find('.list-time span').stop().fadeOut(100)})$(".content-list").delegate(".list-music", "mouseleave", function () {// 隐藏子菜单$(this).find('.list-menu').stop().fadeOut(100)$(this).find('.list-time a').stop().fadeOut(100)//显示时长$(this).find('.list-time span').stop().fadeIn(100)})// 2.监听复选框的点击事件$(".content-list").delegate(".list-check", "click", function () {$(this).toggleClass("list-checked")})// 3.添加子菜单播放按钮的监听var $musicPlay = $(".music-play")$(".content-list").delegate(".list-menu-play", "click", function () {var $item = $(this).parents(".list-music")// 3.1切换播放图图标$(this).toggleClass("list-menu-play2")// 3.2.复原其他的播放图标$item.siblings().find(".list-menu-play").removeClass("list-menu-play2")// 3.3同步底部播放按钮if ($(this).attr("class").indexOf("list-menu-play2") != -1) {//当前子菜单的播放按钮是播放状态$musicPlay.addClass("music-play2")//让文字高亮$item.find("div").css("color", "#fff")$item.siblings().find("div").css("color", "rgba(255,255,255,0.5)")} else {// 当前子菜单的播放按钮不是播放状态$musicPlay.removeClass("music-play2")//让文字不高亮$item.find("div").css("color", "rgba(255,255,255,0.5)")}// 3.4切换序号的状态$item.find(".list-number").toggleClass("list-number2")$item.siblings().find(".list-number").removeClass("list-number2")// 3.5播放音乐player.playMusic($item.get(0).index, $item.get(0).music)// 3.6切换歌曲信息initMusicInfo($item.get(0).music)// 3.7切换歌词的信息initMusicLyric($item.get(0).music)})// 4、监听底部控制区域播放按钮点击$musicPlay.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')}})// 5、监听底部控制区域上一首播放按钮点击$(".music-pre").click(function () {$('.list-music').eq(player.preIndex()).find('.list-menu-play').trigger('click')})// 6、监听底部控制区域下一首播放按钮点击$(".music-next").click(function () {$('.list-music').eq(player.nextIndex()).find('.list-menu-play').trigger('click')})// 7、监听删除按钮的点击$('.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)})})// 8、监听播放的进度player.musicTimeUpdate(function (currentTime, duration, timeStr) {// 同步时间$('.music-progress-time').text(timeStr)// 同步进度条// 计算播放比例var value = currentTime / duration * 100progress.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 +4) * 30) })})// 9、监听声音按钮点击$('.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)}})// 10、监听模式按钮的点击$('.music-mode').click(function () {// 模式切换$(this).toggleClass('music-mode2')$(this).toggleClass('music-mode3')// $(this).toggleClass('music-mode4')})// 11、监听纯净模式的点击$('.music-only').click(function () {// 按钮切换$(this).toggleClass('music-only2')})}// 定义一个方法创建一条音乐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 + "" +"     <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$item.get(0).music = musicreturn $item}})

2、player.js

(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, // 4  3playMusic: 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 = thisthis.$audio.on('timeupdate', function () {// console.log(player.getMusicDuration(), player.getMusicCurrentTime())var duration = $this.audio.durationvar currentTime = $this.audio.currentTimevar timeStr = $this.formatDate(currentTime, duration)callBack(currentTime, duration, timeStr)})},formatDate: function (currentTime, duration) {var endMin = parseInt(duration / 60)var endSec = parseInt(duration % 60)if (endMin < 10) {endMin = "0" + endMin}if (endSec < 10) {endSec = "0" + endSec}var startMin = parseInt(currentTime / 60)var 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;this.audio.volume = value}}Player.prototype.init.prototype = Player.prototype;window.Player = Player;
})(window);

3、progress.js

// 操作进度条
(function (window) {function Progress($progressBar, $progressLine, $progressDot) {return new Progress.prototype.init($progressBar, $progressLine, $progressDot);}Progress.prototype = {constructor: Progress,init: function ($progressBar, $progressLine, $progressDot) {this.$progressBar = $progressBarthis.$progressLine = $progressLinethis.$progressDot = $progressDot},isMove : false,// 进度条前景的点击方法progressClick: function (callBack) {var $this = this //this是progressthis.$progressBar.click(function (event) {// 获取背景距离窗口默认位置var normalLeft = $(this).offset().left// 获取点击的位置距离窗口的位置var eventLeft = event.pageX// 设置前景的宽度$this.$progressLine.css('width', eventLeft - normalLeft)$this.$progressDot.css('left', eventLeft - normalLeft)// 计算进度条的比例var value = (eventLeft - normalLeft) / $(this).width()callBack(value)})},// 进度条原点的拖动方法progressMove: function (callBack) {var $this = this// 获取背景距离窗口默认位置var normalLeft = this.$progressBar.offset().leftvar eventLeftvar barWidth = this.$progressBar.width()// 1、监听鼠标的按下事件this.$progressBar.mousedown(function () {$this.isMove = true// 2、监听鼠标的拖动事件$(document).mousemove(function () {// 获取点击的位置距离窗口的位置eventLeft = event.pageX// 判断进度条的长度是否合法var offset = eventLeft - normalLeftif (offset >= 0 && offset <= barWidth) {// 设置前景的宽度$this.$progressLine.css('width', eventLeft - normalLeft)$this.$progressDot.css('left', eventLeft - normalLeft)}})})// 3、监听鼠标的抬起事件$(document).mouseup(function () {// 移出拖动事件$(document).off('mousemove')$this.isMove = false// 计算进度条的比例var value = (eventLeft - normalLeft) / $this.$progressBar.width()callBack(value)})},setProgress: function (value) {if(this.isMove) return 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);

4、lyric.js

(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) {$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')// 利用正则匹配时间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]var res2 = timeStr.split(':')var min = parseInt(res2[0]) * 60var sec = parseFloat(res2[1])var time = parseFloat(Number(min + sec).toFixed(2))// console.log(typeof time)$this.times.push(time)})// console.log($this.times)// console.log($this.lyrics)},currentIndex: function (currentTime) {// console.log(currentTime)if (currentTime >= this.times[0]) {this.index++this.times.shift()  //删除数组最前面的一个元素} return this.index}}Lyric.prototype.init.prototype = Lyric.prototype;window.Lyric = Lyric;
})(window);

5、注意点

写jQuery代码你首先导入jQuery库,一个js文件。js文件的导入是有顺序的，在一个js文件中会用到其他的js文件中的方法，导入顺序必须有先后

<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>

从零玩转jQuery之项目开发（QQ音乐播放器）相关推荐

.net vue漂亮登录界面_基于 electron-vue 开发的音乐播放器「实践」
作者:XiaoTuGou 转发链接:https://github.com/SmallRuralDog 前言基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐. 技术栈electron ...
微信PHP开发《音乐播放器》
文章目录前言一.简介二.引入Vant框架 1.引入库 2.需要用到的知识三.页面编写,以及js的实现 1.首页 2.搜索页 3.获取搜索歌曲 4.播放页 5.榜单列表页 6.对应页面的json ...
[附源码]计算机毕业设计Python+uniapp基于微信小程序平台开发的音乐播放器f0rrr(程序+lw+远程部署)
[附源码]计算机毕业设计Python+uniapp基于微信小程序平台开发的音乐播放器f0rrr(程序+lw+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置 ...
Android应用开发--MP3音乐播放器Service实现
Android应用开发--MP3音乐播放器Service实现 2013年5月29日简.美音乐播放器开发记录让网友们久等啦,关于简.美音乐播放器的开发,最重要的Service类总算是要发博了.关于An ...
Android应用开发 MP3音乐播放器滚动歌词实现
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Andr ...
Android应用开发--MP3音乐播放器滚动歌词实现
Android应用开发--MP3音乐播放器滚动歌词实现 2013年6月2日简.美音乐播放器开发记录 -----前话有网友给我博客评论说,让我借鉴好的Android代码,代码贴出来的时候最好整体先 ...
iOS开发：音乐播放器
/****************** iOS开发:音乐播放器 *****************/ 要求:给button一个触发事件,点击一下播放歌曲,显示暂停提示: 再点击一下 ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
使用树莓派3B+开发智能音乐播放器
使用树莓派3B+开发智能音乐播放器 2018年07月03日 21:25:13 qq_42044484 阅读数:2397 一.功能描述对麦克风说出歌名后,树莓派自动下载对应歌曲的MP3,默认播放搜索到 ...

从零玩转jQuery之项目开发（QQ音乐播放器）

QQ音乐播放器项目

一、页面布局

1、首先来看下HTML大体结构：

2、完成页面头部

3、完成内容区的菜单部分

4、完成歌曲列表布局

5、自定义歌曲列表滚动条

6、右边的歌曲信息与歌词布局

7、底部播放按钮部分

8、高斯模糊背景设置

二、页面动态部分

1、index.js

2、player.js

3、progress.js

4、lyric.js

5、注意点

从零玩转jQuery之项目开发（QQ音乐播放器）相关推荐

最新文章

热门文章