演示
对于兴迷的我来说,怎么能不制作一个有关偶像的音乐歌单呢,下面直接附代码。
(1)HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业三——制作音乐播放器</title>
<link rel="stylesheet" href="css/iconfont/iconfont.css">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/third_work.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="player">
<!-- 歌曲信息卡片 -->
<div class="player_info">
<div class="info">
<div class="name">梦不落雨林</div>
<div class="singer-album">张艺兴 - Lay</div>
<!-- 进度条 -->
<div class="music_progress">
<div class="music_progress_top">
<span class="current-time">00:00</span>
<span class="time">03:28</span>
</div>
<div class="music_progress_bar">
<div class="music_progress_line"></div>
</div>
</div>
</div>
</div>
<!-- 音乐控制器 -->
<div class="player_control">
<!-- 封面唱片 -->
<div class="cover">
<img src="img/music.webp" >
</div>
<!-- 控制按钮 -->
<div class="control">
<i id="prevBtn" class="iconfont icon-anniu_jiantouxiangzuo_o"></i>
<i id="playBtn" class="iconfont icon-bofang_o"></i>
<i id="nextBtn" class="iconfont icon-anniu-jiantouxiangyou_o"></i>
<i id="openModal" class="iconfont icon-gengduo-2"></i>
</div>
</div>
</div>
<!-- 页面背景 -->
<div class="mask_bg"></div>
<!-- 页面背景 end-->
<!-- 音乐列表 -->
<div class="modal">
<div class="modal-box">
<div class="modal-box-top">
<div class="modal-title">音乐列表</div>
<div class="modal-close"><img src="img/closebtn.png" ></div>
</div>
<div class="modal-wrapper">
<ul class="music-list">
<li >
<span>01.梦不落雨林 - 张艺兴</span>
<span><i class="iconfont icon-bofang_o"></i></span>
</li>
</ul>
</div>
</div>
</div>
<!-- 音乐列表 end-->
<audio src="" ></audio>
<script src="js/second_work.js"></script>
</body>
</html>
(2)css部分
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #333;
}
.player{
position: relative;
}
.player_control{
width: 360px;
height: 80px;
padding: 20px 30px;
background: #fFF;
border-radius: 15px;
display: flex;
justify-content: space-between;
align-items: center;
/* z-index: 10; */
}
.cover{
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
margin-top: -80px;
padding: 60px;
position: relative;
animation: zhuan 5s infinite linear;
animation-play-state: paused;
}
.cover::before{
content: "";
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #44CC00;
}
.cover img{
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
position: relative;
border-radius: 50%;
}
@keyframes zhuan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.control{
width: 60%;
display: flex;
align-items: center;
justify-content: space-between;
}
.control i{
font-size: 25px;
cursor: pointer;
transition: all 0.4s;
}
.control i:hover{
border-radius: 6px;
background: rgba(71,70,70,0.2);
color: #fff;
}
/* .leftbtn>img
,.rightbtn>img{
width: 40px;
height: 40px;
cursor: pointer;
} */
.player_info{
width: 90%;
position: absolute;
/* top: -110%; */
top: 0;
left: 50%;
padding: 10px;
transform: translate(-50%);
z-index: -1;
background: rgba(255,255,255,0.65);
box-shadow: 0 5px 32px 0 rgba(31,38,135,0.37);
backdrop-filter: blur(3.5px);
-webkit-backdrop-filter: blur(3.5px);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.18);
display: flex;
justify-content: flex-end;
opacity: 0;
}
.info{
width: 60%;
font-size: 10px;
}
.name{
font-size: 14px;
font-weight: bold;
}
.singer-album{
color: #757474;
line-height: 20px;
}
.music_progress{
width: 100%;
}
.music_progress_top{
display: flex;
justify-content: space-between;
color: #F2709b;
line-height: 20px;
}
.music_progress_bar{
width: 100%;
height: 3px;
background: #cccaca;
border-radius: 10px;
margin-top: 3px;
}
.music_progress_line{
width: 0%;
height: 100%;
background: #F2709B;
}
.mask_bg{
position: absolute;
top: 0;
left: 0;
z-index: -2;
width: 100%;
height: 100%;
background: url(../img/mask_bg.jpg) no-repeat center center;
background-size: cover;
filter: blur(15px);
transition: all 1s;
}
.modal{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left: 0;
display: none;
}
.modal-box{
width: 30%;
height: 100%;
padding: 20px;
background: #fff;
position: absolute;
top: 0;
right: 0;
}
.modal-box-top{
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-close>img{
cursor: pointer;
transition: transform 0.4s;
width: 16px;
height: 16px;
}
.modal-close>img:hover{
transform: rotate(180deg);
}
.modal-wrapper{
width: 100%;
height: calc(100% - 40px);
overflow-y: auto;
}
.music-list li{
padding: 10px 0;
border-bottom: 1px solid rgb(186,182,182);
display: flex;
justify-content: space-between;
align-items: center;
}
.playing{
color: #f80;
}
(3)jQuery部分
//保存音乐列表信息
var musicList=[];
var currentIndex=0;//声明变量,保存当前播放的是哪一首歌曲
//加载音乐列表信息
$.ajax({
type:"GET",
url:"./third_work.json",
dataType:"json",
success:function(data){
musicList=data;
console.log(data);
render(musicList[currentIndex]);
renderMusicList(musicList);
},
})
//设置播放按钮的点击事件
$("#playBtn").on("click",function(){
// console.log(111);
if($("audio").get(0).paused){
$(this).removeClass("iconfont icon-bofang_o").addClass("iconfont icon-zanting");
$(".player_info").animate({
top:"-110%",
opacity:1,
},'slow');
$(".cover").css({
"animation-play-state":"running",
});
$("audio").get(0).play();
}else{
$(this).removeClass("iconfont icon-zanting").addClass("iconfont icon-bofang_o ");
$(".player_info").animate({
top:"0%",
opacity:0,
},'slow');
$(".cover").css({
"animation-play-state":"paused",
});
$("audio").get(0).pause();
}
});
//给上一首按钮绑定点击事件
$("#prevBtn").on("click",function(){
if(currentIndex > 0){
currentIndex--;
}else{
currentIndex=musicList.length-1;
}
render(musicList[currentIndex]);
$("#playBtn").trigger("click");
});
//给下一首按钮绑定点击事件
$("#nextBtn").on("click",function(){
if(currentIndex < musicList.length-1){
currentIndex++;
}else{
currentIndex=0;
}
render(musicList[currentIndex]);
$("#playBtn").trigger("click");
});
//给音乐列表按钮绑定点击事件
$("#openModal").on("click",function(){
$(".modal").css({
display:"block",
});
renderMusicList(musicList);
$(".modal-close").on("click",function(){
$(".modal").css({
display:"none",
});
})
});
//监听audio标签
$("audio").on("timeupdate",function(){
var currentTime=$("audio").get(0).currentTime || 0;
var duration=$("audio").get(0).duration || 0;
console.log(formatTime(currentTime),formatTime(duration));
//设置当前播放时间
$(".current-time").text(formatTime(currentTime));
var value=(currentTime/duration)*100;
$(".music_progress_line").css({
width:value + '%',
});
});
function formatTime(time){
var min=parseInt(time/60);
var sec=parseInt(time%60);
min=min<10?"0"+min:min;
sec=sec<10?"0"+sec:sec;
return `${min}:${sec}`;
}
//根据信息,设置页面对应标签的内容
function render(data){
// console.log(data);
$(".name").text(data.name);
$(".singer-album").text(`${data.singer} - ${data.album}`);
$(".time").text(data.time);
$(".cover img").attr("src",data.cover);
$("audio").attr("src",data.audio_url);
}
function renderMusicList(list){
$(".music-list").empty();
$.each(list,function(index,item){
var $li=$(`
<li class="${index==currentIndex?'playing':''}">
<span>0${index+1}.${item.name}-${item.singer}</span>
<span><i class="iconfont icon-bofang_o"></i></span>
</li>
`);
$(".music-list").append($li);
});
}
(4)json部分
[
{
"name":"梦不落雨林",
"audio_url":"http://sp.sycdn.kuwo.cn/08d4b77c8e568653bd852ef98f2e450c/641ab4ec/resource/n1/37/6/1572303815.mp3?src=kwplayer_ar",
"singer":"张艺兴",
"album":"Lay",
"cover":"https://y.qq.com/music/photo_new/T002R300x300M000001T7G8z0o9FlF_1.jpg?max_age=2592000",
"time":"03:28"
},
{
"name":"面纱",
"audio_url":"https://lr-sycdn.kuwo.cn/74ab3b3d86dd88edfa747d21b1083b38/641ab179/resource/n1/57/8/2454589885.mp3",
"singer":"张艺兴",
"album":"Lay",
"cover":"https://y.qq.com/music/photo_new/T002R300x300M000004Vibp80ZlFw0_2.jpg?max_age=2592000",
"time":"03:06"
},
{
"name":"羊",
"audio_url":"https://other-web-nf01-sycdn.kuwo.cn/973b6684fa396cbbe8aa0c010c275d29/641ab522/resource/n2/53/90/236376289.mp3",
"singer":"张艺兴",
"album":"Sheep",
"cover":"https://y.qq.com/music/photo_new/T002R300x300M000002w9v2U1QksRz_1.jpg?max_age=2592000",
"time":"02:59"
},
{
"name":"飞天 ",
"audio_url":"https://cn-sycdn.kuwo.cn/0e3c30faafe4d9fc64e776880d3846a1/641aafc5/resource/n1/58/27/2339915810.mp3",
"singer":"张艺兴",
"album":"Lay",
"cover":"https://img1.kuwo.cn/star/albumcover/1000/84/28/93694984.jpg",
"time":"04:01"
},
{
"name":"莲 (Lit) ",
"audio_url":"https://ew-sycdn.kuwo.cn/f4e6a34b9984edaa0c805fe5e90abd9b/641ab4aa/resource/n1/22/32/2964665157.mp3",
"singer":"张艺兴",
"album":"Lay",
"cover":"https://y.qq.com/music/photo_new/T002R300x300M000003XzNlG3eSgRq_2.jpg?max_age=2592000",
"time":"03:01"
}
]
以上内容里面涉及到的图片可自行选择自己的喜欢的图片,赶快动起小手试试吧。我们看看效果展示。