JavaScript CSS jQuery 网页音乐播放器

已于 2022-03-01 14:10:58 修改
阅读量333 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： jquery css js html
于 2021-05-27 21:57:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuoss/article/details/117338624
版权

目录

效果展示

在这里插入图片描述

总结

  1. 音乐播放的功能基本实现了
  2. 播放器最小化充分利用了弹性盒子,很好用
  3. 专辑图像的旋转是使用CSS实现的,暂停的使用会有些接僵硬.改善的话可以用JavaScript定时器实现.
  4. 其他都还好,最重要的JavaScript写代码的思路要清晰,有条理,很关键
  5. C币大佬:https://download.csdn.net/download/zhuoss/19135697

index.html

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="index.css" />
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="banner" id="banner" data-id="0">
				<div class="album1" data-id="1"></div>
				<div class="album2" data-id="2"></div>
				<div class="album3" data-id="3"></div>
				<div class="album4" data-id="4"></div>
				<div class="album5" data-id="5"></div>
			</div>
			<div class="player">
				<div class="mini">
					
				</div>
				<div class="picture">
			
				</div>
				<div class="title">
				龙卷风-邓紫棋
				</div>
				<div class="playBtn">
				
					<div class="prev">
					
					</div>
					<div class="play">
						<audio src="../mp3/1.mp3" data-id="1">
						</audio>
					</div>
					<div class="next">
						
					</div>
				</div>
				
				<div class="miniBtn">
				
				</div>
			</div>
		</div>


		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

index.css

* {
	margin: 0;
	padding: 0;
}

/* div {
	margin: 0;
	outline: solid white 1px;
} */

/* .banner div {
	outline: none;
} */

/* .player div{
	border: none;
} */

html,
body {
	height: 100%;
	overflow: hidden;
}

.container {
	height: 100%;
	background-image: url(../img/0_bg.gif);
	background-repeat: no-repeat;
	background-size: cover;
}

.banner {
	background-image: url(../img/m_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 1000px;
	height: 250px;
	position: relative;
	top: 100px;
}

.banner div {
	width: 100px;
	height: 100px;
	position: absolute;
	border-radius: 100px;
}

.banner .album3 {
	width: 125px;
	height: 125px;
	position: absolute;
	border-radius: 125px;
	top: 70px;
	left: 320px;
	background-image: url(../img/3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.banner .album1 {
	width: 80px;
	height: 80px;
	top: 10px;
	left: 90px;
	position: absolute;
	background-image: url(../img/1.jpg);
	background-repeat: no-repeat;
	background-size: cover;

}

.rotate {
	transform: rotate(360deg);
	animation: rotation 8s linear infinite;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
	transform: rotate(360deg);
	}
}



.banner .album2 {
	width: 100px;
	height: 100px;
	top: 130px;
	left: 160px;
	background-image: url(../img/2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}



.banner .album4 {
	width: 100px;
	height: 100px;
	top: 15px;
	left: 500px;
	background-image: url(../img/4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.banner .album5 {
	width: 90px;
	height: 90px;
	top: 130px;
	left: 600px;
	background-image: url(../img/2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}




.player {
	
	height: 100px;
	position: absolute;
	bottom: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(0, 0, 0, 1);
}

.player .picture {
	background-image: url(../img/1.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100px;
	height: 100px;

}

.player .title {
	width: 200px;
	height: 100px;
	font-size: 25px;
	color: white;
	text-align: center;
	line-height: 100px;
}

.player .playBtn {
	width: 200px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.player .miniBtn {
	width: 20px;
	height: 100px;
	background-image: url(../img/player_bg.png);
	background-repeat: no-repeat;
	background-position: -2px -5px;
}

.player .miniBtn:hover {
	filter: brightness(2)
}

.player .playBtn .prev {
	width: 40px;
	height: 40px;
	background-image: url(../img/player_bg.png);
	background-repeat: no-repeat;
	background-position: -70px 4px;
}

.player .playBtn .prev:hover {
	background-image: url(../img/player_bg.png);
	background-repeat: no-repeat;
	background-position: -70px -26px;
}

.player .playBtn .play {
	width: 40px;
	height: 40px;
	background-image: url(../img/player_bg.png);
	background-repeat: no-repeat;
	background-position: -105px 0px;
}

.player .playBtn .play:hover {
	background-image: url(../img/player_bg.png);
	background-repeat: no-repeat;
	background-position: -105px -43px;
}

.player .playBtn .next {
	width: 40px;
	height: 40px;
	background-image: url(../img/player_bg.png);
	background-repeat: no-repeat;
	background-position: -146px 5px;
}

.player .playBtn .next:hover {
	background-image: url(../img/player_bg.png);
	background-repeat: no-repeat;
	background-position: -146px -25px;
}

index.js

//获取audio标签
const music = $(".player .playBtn .play audio")[0]
let playFlag = false
$(".banner").on("click", function(e) {
	//获取点击专辑的ID
	let albumID = $(e.target).data("id");
	//切换背景图片
	switchBg(albumID)
	//头像转动
	rotateFace(albumID)
	//播放器头像切换
	switchPlayFace(albumID)
	//播放器歌曲名字修改
	swichPlayTitle(albumID)
	//播放器按钮图标变化
	swichPlayBtn(albumID)
	//播放歌曲
	playSong(albumID)
})

$(".player .playBtn .play").on("click", function() {
	if (playFlag == true) {
		//音乐暂停
		music.pause()
		playFlag = false
		//头像停止转动
		stopRotateFace()
		//播放按钮变成暂停状态
		togglePlayButton()
	} else {
		//音乐暂停
		music.play()
		playFlag = true
		//播放按钮变成暂停状态
		togglePlayButton()
		//获取当前正在播放歌曲的ID
		let musicID = getMusicID()
		//开启头像转动
		rotateFace(musicID)
	}

})


$(".player .playBtn .prev").on("click", function() {
	//获取当前正在播放歌曲的ID
	let musicID = getMusicID()
	if (musicID == 1) {
		musicID = 5
	} else {
		musicID--
	}
	//切换背景图片
	switchBg(musicID)
	//头像转动
	rotateFace(musicID)
	//播放器头像切换
	switchPlayFace(musicID)
	//播放器歌曲名字修改
	swichPlayTitle(musicID)
	//播放器按钮图标变化
	swichPlayBtn(musicID)
	//播放歌曲
	playSong(musicID)
})


$(".player .playBtn .next").on("click", function() {
	//获取当前正在播放歌曲的ID
	let musicID = getMusicID()
	if (musicID == 5) {
		musicID = 1
	} else {
		musicID++
	}
	//切换背景图片
	switchBg(musicID)
	//头像转动
	rotateFace(musicID)
	//播放器头像切换
	switchPlayFace(musicID)
	//播放器歌曲名字修改
	swichPlayTitle(musicID)
	//播放器按钮图标变化
	swichPlayBtn(musicID)
	//播放歌曲
	playSong(musicID)
})


$(".player .miniBtn").on("click", function() {
	//这里就是体现了弹性盒子的优势了
	//播放器最小化
	$(".player .picture").toggle(1000)
	$(".player .title").toggle(1000)
	$(".player .playBtn").toggle(1000)
	$(".player .miniBtn").css("background-position", "-48px -5px")
})






function switchBg(albumID) {
	// console.log(albumID);
	let bgUrl = null
	if (albumID != 0) {
		bgUrl = "url(../img/" + albumID + "_bg.jpg)"
	}
	$(".container").css("background-image", bgUrl)
}

function rotateFace(albumID) {
	if (albumID != 0) {
		//去掉所有的rotate属性,然后再给特定的专辑加上rotate属性
		$(".banner").children().removeClass("rotate")
		let albumClass = ".album" + albumID
		$(albumClass).addClass("rotate")
	}
}


function switchPlayFace(albumID) {
	if (albumID != 0) {
		//获取类名
		let albumClass = "album" + albumID
		let picUrl = "url(../img/" + albumID + ".jpg)"
		//获取头像元素and修改对应元素css属性
		$(".player .picture").css("background-image", picUrl)
	}
}

function swichPlayTitle(albumID) {
	if (albumID != 0) {
		let songTitle = "歌曲名称" + albumID
		//获取播放器标题元素并切换歌曲名称
		$(".player .title").text(songTitle)
	}
}

function swichPlayBtn(albumID) {
	$(".player .playBtn .play").css("background-position", "-335px -90px")
}


function playSong(albumID) {
	//拼接mp3文件路径
	let mp3src = "../mp3/" + albumID + ".mp3"

	//设置audio标签的src属性
	music.src = mp3src
	music.setAttribute("data-id", albumID)
	//播放歌曲
	music.play()
	playFlag = true
}


function stopRotateFace() {
	//去掉所有的rotate属性,然后再给特定的专辑加上rotate属性
	$(".banner").children().removeClass("rotate")
}

function togglePlayButton() {
	if (playFlag == true) {
		$(".player .playBtn .play").css("background-position", "-335px -90px")
	} else {
		$(".player .playBtn .play").css("background-position", "-105px 0px")
	}
}


function getMusicID() {
	return Number($(".player audio")[0].dataset.id)
}
宇宙无敌饼干小怪兽
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用css、jquery实现一个云音乐播放器
weixin_52132674的博客
01-03 240
index.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 设置移动端应用必备 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t
js控制网页音乐播放器和网页播放器参数含义
asp、.net专栏
07-23 2717
                   media player控制               player.controls.play(); 播放               player.controls.stop(); 停止               player.controls.pause(); 暂停               player.controls.currentPosit
最全使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)，字节面试编程题
最新发布
2401_84537540的博客
05-13 711
别在网上瞎学了，我最近也做了一些资源的更新，只要你是我的粉丝，这期福利你都可拿走。我先来介绍一下这些东西怎么用，文末抱走。这是我花了几天的时间去把Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。最近我才对这些路线做了一下新的更新，知识体系更全面了。
JS编写 简易网页音乐播放器
sinat_38678369的博客
10-11 552
简易网页音乐播放器 作业，怕丢，大家不用复制，有图片和音乐不在里面，用不了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> #div1{/*大背景*/ border: 0px solid red; width: 100%; height: 600px; backgr
CSS+Jquery 实现音乐播放功能
两点水
08-15 1037
一直没有接触过音乐播放这个功能，趁着这两天时间，写了一个练练。以后有用到的直接借鉴。 一开始就是打算嵌在页面右下角的，虽然也是这么写的。先上最后的样式看下效果。（凑合看吧！） 页面显示状态，看着简陋点哈。这个是在没状态的情况下。 鼠标移入效果 播放效果，就是换了已给背景图片 音量大小调节，有点丑，颜色目前还不知道，后面改改。鼠标移出自动隐藏 <div class="music"> <!-- 播放暂停 --> ...
js音乐播放器
05-03
月光FM 查看演示 http://lunax.info/fm/ 希望大家在修改代码时能给本站留一个链接，谢谢
jQuery网页mp3音乐播放器代码
06-10
【jQuery网页mp3音乐播放器代码】是一种基于JavaScript库jQuery实现的网页音乐播放器解决方案，它为用户提供了丰富的功能，包括音乐的播放、暂停、收藏、下载以及分享等。这样的设计使得网页上的音频体验更加互动和...
jquery音乐播放器
08-03
jQuery音乐播放器是一种基于JavaScript库jQuery实现的网页音频播放解决方案，它提供了丰富的交互功能，如播放、暂停、音量调节、进度控制以及歌词同步。这款播放器适合那些希望在网站上集成高质量音乐播放功能的...
jquery网页视频播放器jqplayer网页音乐播放器特效代码
03-20
jQuery作为一款强大的JavaScript库，为开发者提供了丰富的功能，用于创建交互式的网页视频和音乐播放器。本篇文章将围绕“jQuery网页视频播放器jqplayer”这一主题，深入探讨其背后的代码实现和特效应用。 一、...
jquery+CSS3迷你音乐播放器效果
06-12
**jQuery + CSS3 迷你音乐播放器效果详解** 在当今网页设计中，音乐播放器已经成为网站增强用户体验的重要元素之一。本项目利用 jQuery 和 CSS3 技术实现了一个小巧而功能丰富的迷你音乐播放器，旨在为用户提供简洁...
实现音乐播放器的代码（html5+css3+jquery）
10-23
主要讲实现音乐播放器的代码（html5+css3+jquery），需要的朋友可以参考下
jQuery带播放列表音乐播放器 可底部展开
08-23
今天要给大家介绍一款功能十分强大的jQuery音乐播放器，它几乎涵盖了所有音乐播放器应该有的功能，除了通用的播放暂停、音量控制、播放进度控制，还支持多音乐播放，可以在播放列表中切换播放的音乐。同时也支持歌词的现实与隐藏。这个jQuery音乐播放器最大的特点是可以悬浮在页面底部，点击可以展开和隐藏播放器，非常适合在个人博客页面中使用。
jQuery音频可视化音乐播放特效代码
03-20
jQuery音频可视化音乐播放代码是一款html5 mp3音乐播放演示特效。
js音频可视化
06-01
超炫酷粒子隧道音频可视化，可自行加载本地音乐
使用html+jquery+本地的音乐文件实现了基本的网页音乐播放器
小仙女说：但行好事，不问前程
06-06 5062
在学习前端的路上，跟着教程做了一个不需要什么js的web端音乐播放器代码结构如下：点我下载jquery-3.3.1.js&lt;!-- demo.html --&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Music&lt;/title&gt; &lt;style type="text/css"&
HTML右下角音乐播放器,利用HTML5实现网页底部音乐播放器代码
weixin_36463088的博客
06-03 1536
特效描述：利用HTML5实现 网页底部音乐 播放器代码。利用HTML5实现网页底部音乐播放器代码代码结构1. 引入JS2. HTML代码浏览器不支持此格式00:0000:00//底部显示区域总宽度var footerW = $('.myaudio').width();//中央显示区域的宽度var audioW = $('.myaudio-center').width();//alert(foote...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值