效果展示

总结

音乐播放的功能基本实现了
播放器最小化充分利用了弹性盒子,很好用
专辑图像的旋转是使用CSS实现的,暂停的使用会有些接僵硬.改善的话可以用JavaScript定时器实现.
其他都还好,最重要的JavaScript写代码的思路要清晰,有条理,很关键
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) {//获取点击专辑的IDlet 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()//获取当前正在播放歌曲的IDlet musicID = getMusicID()//开启头像转动rotateFace(musicID)}})$(".player .playBtn .prev").on("click", function() {//获取当前正在播放歌曲的IDlet 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() {//获取当前正在播放歌曲的IDlet 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 = nullif (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" + albumIDlet 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 = mp3srcmusic.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)
}

JavaScript CSS jQuery 网页音乐播放器相关推荐

【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1
文章目录纯html+css构造网页音乐播放器 html代码: CSS代码: 纯html+css构造网页音乐播放器此处参照各大音乐播放器这个页面使用了1天的时间进行构造,由于对各语法还不是很熟悉, ...
10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
【小河今学 | JavaScript + JQuery】音乐播放器4-音量调整、单曲循环、全部循环
08.18今天来完善音乐播放器的音量调整.单曲循环和全部循环功能. 本篇基于上一篇[小河今学 | JavaScript + JQuery]音乐播放器3-歌词轮播和进度条跳转功能实现一.音量调整首先 ...
用JavaScript实现简易的网页音乐播放器
用JavaScript实现简易的网页音乐播放器最近疫情在家,利用这段时间开始自学HTML等内容,目前在写自己的个人主页,想用音乐来给自己的主页增添点特色. 一开始单纯用audio标签添加音乐,带上a ...
HTML5之audio实战，网页音乐播放器开发
今天我们就基于 HTML5 audio 来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的新元素,我们终于可以脱离 Flash ,来开发音频.视频播 ...
HTML：给自己设计一个简单的专属网页音乐播放器
Hello,大家好,我是wangzirui32,今天我们来学习如何给自己设计一个简单的网页音乐播放器. 开始学习吧! 学习目录 1. 项目架构 2. player.html 编写 3. style.c ...
仿照网易云界面做的Flask网页音乐播放器（豪华版）
一个基于Flask的网页音乐播放器,前端用了h5,css,jq,ajax,hash,数据库是mysql,前端到后端,全都有.管理员有上传音乐的功能,一定要先注册一个账户名为Admin的账户. 主要功能 ...
网页音乐播放器开发实战
网页音乐播放器布局****功能 ** 功能代码块 ** ** 1.音乐播放器侧边栏的缩放以及展开 ** ** 2.图片旋转以及对应的图片文字更改功能,实现音乐播放 ** ** 实现播放按钮切换歌曲 ...
使用HTML5实现网页音乐播放器
转自http://www.php.cn/html5-tutorial-402849.html 本篇文章主要介绍了HTML5网页音乐播放器的示例代码,内容挺不错的,现在分享给大家,也给大家做个参考. 本 ...

JavaScript CSS jQuery 网页音乐播放器

目录

效果展示

总结

index.html

index.css

index.js

JavaScript CSS jQuery 网页音乐播放器相关推荐

最新文章

热门文章