简单音乐播放器的制作

最新推荐文章于 2024-05-07 11:27:35 发布

℡52Hz★

最新推荐文章于 2024-05-07 11:27:35 发布

阅读量190

点赞数 1

分类专栏：案例分享文章标签： css html dreamweaver javascript 前端

本文链接：https://blog.csdn.net/qq_53541336/article/details/129713979

版权

案例分享专栏收录该内容

15 篇文章 0 订阅

订阅专栏

演示

对于兴迷的我来说，怎么能不制作一个有关偶像的音乐歌单呢，下面直接附代码。

（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"
	}
]

以上内容里面涉及到的图片可自行选择自己的喜欢的图片，赶快动起小手试试吧。我们看看效果展示。