html/css/jq 简单的音乐播放器

原创已于 2024-01-31 17:20:00 修改 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #jquery

于 2021-11-10 10:07:09 首次发布

本文介绍了一个使用HTML、CSS和jQuery编写的简单音乐播放器。通过点击不同的歌曲列表项，播放器会切换背景图片、显示歌曲信息并播放相应音乐。此外，还实现了播放/暂停、上一首/下一首、播放器隐藏/显示等功能，并使用CSS动画进行图片旋转效果。

html/css/jq 简单的音乐播放器

一：准备工作：安装jq
一：.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐播放器</title>
		<link rel="stylesheet" type="text/css" href="./css/music.css" />
	</head>
	<body>
		<div id="" class="banner">
			<ul>
				<li class="m1" datasrc="img/mp3/mp3-1.mp3" title="龙卷风-邓紫棋">
					<img src="img/imgs/img1.jpg" width="65">
				</li>
				<li class="m2" datasrc="img/mp3/mp3-2.mp3" title="Sober-bigbang">
					<img src="img/imgs/img2.jpg" width="90">
				</li>
				<li class="m3" datasrc="img/mp3/mp3-3.mp3" title="绅士-薛之谦">
					<img src="img/imgs/img3.jpg" width="119">
				</li>
				<li class="m4" datasrc="img/mp3/mp3-4.mp3" title="杀手-林俊杰">
					<img src="img/imgs/img4.jpg" width="90">
				</li>
				<li class="m5" datasrc="img/mp3/mp3-2.mp3" title="baby-just">
					<img src="img/imgs/img5.jpg" width="65">
				</li>
			</ul>
		</div>
		<div id="" class="music">
			<div id="" class="m_img">
				<img src="img/imgs/img1.jpg" width="90">
			</div>
			<div id="" class="m_text">龙卷风-邓紫棋</div>
			<div id="" class="m_btn">
				<a href="#" class="m_prev" title="上一首"></a>
				<a href="#" class="m_play" title="播放"></a>
				<a href="#" class="m_next" title="下一首"></a>
			</div>
			<div id="" class="m_close ">

			</div>
			<audio src="img/mp3/mp3-1.mp3" class="m_mp3">
				当前浏览器不支持audio
			</audio>
		</div>
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script src="js/music.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

二：.css文件

@charset "utf-8";
body{
	background: url(../img/imgs/img1.jpg) no-repeat;
	background-size: cover;
}
/* 设置横幅 start*/
.banner{
	width: 960px;
	height: 250px;
	margin: 80px;
	background-color: pink;
	opacity: 0.8;
	box-shadow: 10px 15px 15px black;
	position: relative;
}
.banner ul li{
	list-style: none;
	display: inline-block;
	position: absolute;
   border-radius: 2px;
   padding: 1px;
	box-shadow: 10px 15px 15px black;
	
}
.banner ul li img{
	border-radius: 50%;
	cursor: pointer;
	display: block
	
}
.m1{
	top:30px;left: 90px;
}
.m2{
	top:140px;left: 160px;
}

.m3{
	top:67px;left: 308px;
}
.m4{
	top:50px;left: 500px;
}
.m5{
	top:160px;left: 580px;
}
/* 设置横幅 end */
/* 播放器start */
.music{
	width: 550px;
	height: 105px;
	background: black;
	position: fixed;
	left: 0;
	bottom: 50px;
	opacity: 0.8;
	box-shadow:10px 15px 15px black;
}
.music .m_img{
	margin-top: 15px;
	margin-left: 10px;
	float: left;
}
.music .m_text{
	float: left;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	margin-top: 50px;
	margin-left: 20px;
}
.music .m_btn{
	position: absolute;
	left: 335px;
}
.music .m_btn a{
	float: left;
	width: 33px;
	height: 33px;
	background: url(../img/imgs/bg-img.png);
	margin-top: 50px;
	margin-left: 20px;
}
.music .m_btn .m_prev{
	background-position: -67px -5px;
}
.music .m_btn .m_prev:hover{
	background-position: -67px -32px;
}
.music .m_btn .m_play{
	background-position: -98px -8px;
}
.music .m_btn .m_play:hover{
	background-position: -98px -46px;
}
.music .m_btn .m_next{
	background-position: -136px -5px;
}
.music .m_btn .m_next:hover{
	background-position: -136px -32px;
}
.music .m_close{
	background-image:url(../img/imgs/bg-img.png);
	float: right;
	width: 19px;
	height: 105px;
	cursor: pointer;
	background-position:-24px -4px;
}
/* 图片旋转的动画 */
@keyframes img_rotate{
	from{
		transform: rotate(0deg);
	}to{
		transform: rotate(360deg);
	}
}

.banner .img_rotate{
	animation: img_rotate 2s infinite linear;
}

/* 播放器end*/

/* 编写js时要更换的样式 */
/* 更换播放按钮 */
.music .m_btn .m_pause{
	background-position:-269px -88px;
}
.music .m_btn .m_pause:hover{
	background-position:-306px -88px;
}
.music .m_open{
	background-position: -45px -4px;
}

三：.js文件

 // 要实现的效果：
	//  1.获取li里面的index()
	//  2.更换背景图片
	//  3.更换播放器图片、文本
	//  4.更换播放按钮及title为暂停
	//  5.图片旋转
	//  6.歌曲播放
	//  7.暂停/播放
	//  8.上一首/下一首
	//  9.播放可以显示与隐藏

// 手机数据
var index=0;//li初始索引
var li=$(".banner ul li");//所有li元素
var img=$(".music .m_img img");//播放器img元素
var text=$(".music .m_text");//播放器的文本
var prev=$(".music .m_btn .m_prev");//播放器上一首
var play=$(".music .m_btn .m_play");//播放器播放
var next=$(".music .m_btn .m_next");//播放器下一首
var mp3=$(".music .m_mp3")//媒体元素
var flag=false;//歌曲播放状态
var close=true;//播放器显示/隐藏状态

// 获取点击的li索引
li.click(function(){
	// console.log($(this).index())
	index=$(this).index()
	// 播放歌曲
	show(index)
})
// 更换背景图片
function show(index){
	change_bg(index+1);
	change_img_text(index+1);
	change_btn_title()
	img_rotate(index)
	play_mp3()
}
// 更换背景
function change_bg(index){
	console.log(index,888)
	$("body").css({
		"background": `url(img/imgs/img${index}.jpg) no-repeat`,
		"background-size": "cover"
	});
}
// 更换播放器的图片和文本
function change_img_text(index){
	img.attr("src","img/imgs/img"+index+".jpg")//更换播放器图片
	text.html(li.eq(index-1).attr("title"))//获取到li的title属性后替换文本
}
// 更换播放按钮及title为暂停
function change_btn_title(){
	play.removeClass("m_play");
	play.addClass("m_pause");
	play.attr("title","暂停")
}
// 图片旋转
function img_rotate(){
	// 移除所有img图片旋转样式
	li.children().removeClass("img_rotate");
	li.eq(index).children().addClass("img_rotate");
}
// 播放歌曲
function play_mp3(){
	mp3.attr("src",li.eq(index).attr("datasrc"));
	mp3.get(0).play();//播放歌曲
	flag=true;
}
// 暂停歌曲
play.click(function(){
	if(flag){
		mp3.get(0).pause();//暂停歌曲
		li.eq(index).children().removeClass("img_rotate");//图片停止旋转
		play.removeClass("m_pause").addClass("m_play").attr("title","播放");
		flag=false;
	}else{
		mp3.get(0).play();
		li.eq(index).children().addClass("img_rotate");
		play.removeClass("m_play").addClass("m_pause").attr("title","暂停")
	    flag=true;
		// 第一次进入页面直接点击播放按钮时的背景处理
		change_bg(index+1);
	}
})
// 上一首
prev.click(function(){
	index--;
	if(0>index){
		index=li.length-1;
	}
	// 播放歌曲
	show(index);
})
// 下一首
next.click(function(){
	index++;
	if(li.length-1<index){
		index=0;
	}
	show(index)
})
// 隐藏或者显示播放器
$(".m_close").click(function(){
	console.log(888)
	// 如果显示，则隐藏
	if(close){
		console.log(999)
		$(this).addClass("m_open");
		$(".music").animate({"left":"-520px"},1000)
	     close=false
	}else{
		console.log(777)
		$(this).removeClass("m_open");
		$(".music").animate({"left":"0px"},1000)
		close=true
	}
})

四：效果展示
在这里插入图片描述

五.技术重点：
1.a标签上放背景图片，背景图片给background-position移动精灵图。
2.$(this).index()：查看当前元素的索引。
3.get()函数不是ajax中的get而是将jq获取的元素转成js原生的元素；用get()的时候里面必须加0。
4.编写代码之前先把逻辑思路理清楚方便后面行动。
5.用到$(selector).attr(attribute,value)：设置被选元素的属性和值。
6.eq(index)：eq() 方法将匹配元素集缩减值指定 index 上的一个。
如：$("body").find("div").eq(2).addClass("blue")：通过为 index 为 2 的 div 添加适当的类，将其变为蓝色。
7.css的animate动画，true/false标记状态值。