今天再带着大家利用 1 小时
,码个定制版的音乐播放器出来,想想都刺激。
废话不多说,老规矩,先上一张效果图:
开发一个定制版的音乐播放器,首先你需要知道音乐播放器的逻辑,实现原理。
开发技术
实现思路
素材
核心逻辑
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ音乐播放器 - 极客江南</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>
</ul>
</div>
</div>
<div class="content_right">
<div class="song_info">
<a href="https://mp.weixin.qq.com/s/sb9n8dFe96XR6pRxEpZx0Q" class="song_info_pic">
<img src="images/4.png" 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>
CSS代码
*{
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 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{
display: inline-block;
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: 200px;
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;
}
JS核心代码
$(function () {
// 0.自定义滚动条
$(".content_list").mCustomScrollbar();
var $audio = $("audio");
var player = new Player($audio);
var progress;
var voiceProgress;
var lyric;
// 1.加载歌曲列表
getPlayerList();
function getPlayerList() {
$.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);
}
});
}
// 2.初始化歌曲信息
function initMusicInfo(music){
// 获取对应的元素
var $musicImage = $(".song_info_pic images");
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 $musicBg = $(".mask_bg");
// 给获取到的元素赋值
$musicImage.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);
$musicBg.css("background", "url('"+music.cover+"')");
}
// 3.初始化歌词信息
function initMusicLyric(music){
lyric = new Lyric(music.link_lrc);
var $lryicContainer = $(".song_lyric");
// 清空上一首音乐的歌词
$lryicContainer.html("");
lyric.loadLyric(function () {
// 创建歌词列表
$.each(lyric.lyrics, function (index, ele) {
var $item = $("<li>"+ele+"</li>");
$lryicContainer.append($item);
});
});
}
// 4.初始化进度条
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);
});
}
// 5.初始化事件监听
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");
// console.log($item.get(0).index);
// console.log($item.get(0).music);
// 3.1切换播放图标
$(this).toggleClass("list_menu_play2");
// 3.2复原其它的播放图标
$item.siblings().find(".list_menu_play").removeClass("list_menu_play2");
// 3.3同步底部播放按钮
if($(this).hasClass("list_menu_play2")){
// 当前子菜单的播放按钮是播放状态
$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.5切换歌曲信息
initMusicInfo($item.get(0).music);
// 3.6切换歌词信息
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 * 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
});
});
// 9.监听声音按钮的点击
$(".music_voice_icon").click(function () {
// 图标切换
$(this).toggleClass("music_voice_icon2");
// 声音切换
if($(this).hasClass("music_voice_icon2")){
// 变为没有声音
player.musicVoiceSeekTo(0);
}else{
// 变为有声音
player.musicVoiceSeekTo(1);
}
});
}
// 定义一个方法创建一条音乐
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 = music;
return $item;
}
});
最后在上一张切换歌曲的效果图:
大家记得收藏前,先点个赞哦!好的文章值得被更多人看到。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。