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" /><title>云音乐</title><!-- 引入font-awesome字体图标库 --><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- 引入样式文件 --><link rel="stylesheet" href="./css/index.css"><!-- 引入jQuery脚本文件 --><script src="../js/jquery-1.11.3.js"></script></head><body><div id="app" class="column"><img class="music-img" src="img/06.jpg" alt="专辑封面"><div class="head center">不谓侠</div><!-- 歌曲列表的结构区域 --><div class="list"><div class="item row"><div class="item-icon center"><span class="fa fa-music"></span></div><div class="item-name">不谓侠</div><div class="item-size">4.5MB</div></div>   </div><!-- 底部歌曲播放状态显示以及控制区域 --><div class="foot column"><!-- 进度条可触发区域 --><div class="progress-box center"><!-- 进度条轨道 --><div class="progress-bg"><!-- 当前进度 --><div class="progress"> <div class="dot"></div></div></div></div><!-- 歌曲播放时间显示:当前时间，总时长--><div class="time-box row"><div class="time-now">01:12</div><div class="time-total">04:05</div></div><!-- 歌曲播放控制按钮 --><div class="btn-box row"><button class="btn-play-type"><span class="fa fa-list"></span></button><button class="btn-play-prov"><span class="fa fa-fast-backward fa-2x"></span></button><button class="btn-play-pause"><span class="fa fa-play-circle-o fa-4x"></span></button><button class="btn-play-next"><span class="fa fa-fast-forward fa-2x"></span></button><button></button></div></div></div><span id="toast" class="center">提示文本</span><!-- 引入脚本文件 --><script src="./js/music.js"></script></body>
</html>

css样式文件

/* 重置样式 */
*{margin:0;padding:0;
}/*css中常用的绝对单位和相对单位有哪些:绝对单位:px,cm,mm,in,pt,pc相对单位:%,em,rem
*/
#app{width: 100vw;height: 100vh;
}/*主轴为水平方向的弹性布局*/
.row{/*设置弹性布局*/display: flex;/*主轴从左往右*/flex-direction: row;
}
/*主轴为垂直方向的弹性布局*/
.column{/*设置弹性布局*/display: flex;/*主轴从上往下*/flex-direction: column;
}/*设置元素中内容在水平和垂直方向同时居中*/
.center{display: flex;justify-content: center;align-items: center;
}.head{flex:1;font-size: 1.1rem;  /*设置文字大小*/color:#eee;         /*设置文本颜色*/letter-spacing: 2px; /*设置字符间距*/border-bottom: 1px solid rgba(255,255,255,0.1); /*设置底部边框*/
}
.list{flex:6;max-height:70vh;  /*列表区域最大高度*/overflow-y: scroll; /*当内容(y轴)超出时显示滚动条*/
}
.foot{flex:2;
}
/*歌曲专辑封面，作为背景毛玻璃效果*/
.music-img{position: fixed;left: 0;top: 0;height: 100%;z-index: -1;filter:blur(50px); /*图片模糊*/object-fit: cover;
}/**********歌曲列表区域样式******/
.item{padding: 0 10px;  /*元素内部内容与左右保持10px距离*/height: 50px;line-height: 50px; color:#eee;border-bottom:1px dotted rgba(0,0,0,0.1);
}
.item-icon{position:relative;flex: 1;animation: jump 1s linear infinite paused;
}
/*正在播放的歌曲图标动画执行*/
.playing{animation-play-state: running;
}
/*正在播放的歌曲项高亮显示*/
.playing-item{color:#e74c3c;
}
.item:hover{background: rgba(255,255,255,0.5);color:#333;
}.item-name{flex:5;
}
.item-size{flex:1;
}/*自定义动画：音符跳动效果*/
@keyframes jump{30%{top:-5px;}60%{top:0px;}90%{top:5px;}
}/***********歌曲播放状态以及控制样式************/
.progress-box{padding:0 20px;flex: 2;
}
.time-box{padding:0 10px;flex: 1;color:#ddd;font-size: .8rem;
}
.btn-box{flex:5;
}
/* 进度条轨道样式 */
.progress-bg{width: 100%;height: 1px;background: rgba(255,255,255,0.1);
}
/* 当前进度样式 */
.progress{position: relative;width: 30%;height: 100%;background: #fff;
}
/*进度条圆点指示器*/
.dot{position:absolute;right:-5px;top:-5px;width: 10px;height: 10px;background: #fff;border-radius:50%;box-shadow: 0 0 20px #ff0;
}/**时间样式**/
.time-now,
.time-total{flex:1;
}
.time-total{text-align: right;
}
/**按钮样式**/
.btn-box>button{flex: 1;background: transparent; /*背景透明*/border:0; /*去除边框*/outline: none; /*去除浏览器自带外边线效果*/color:#fff;
}
.btn-play-pause{flex:2 !important;
}#toast{position:fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 9999;display: inline-block;padding:10px 30px;border-radius: 5px;visibility: hidden;color:#eee;background: rgba(0,0,0,0.6);
}

music.js文件，绑定时间，连接服务器

$(function () {//声明云服务器访问地址(此处为需要连接的服务器地址)let baseUrl = "xxxxxxxxxxxxxxxxxxxxxxxxxxxx";
//声明数组，存储获取的所有数据let musics = [];
//初始化当前正在播放的歌曲索引let nowIndex = 0;
//创建一个播放器对象let player = $('<audio>')[0];
//当前播放时间let now = 0;
//总播放时长let total = 0;
//标记播放方式 0:列表循环 1:随机播放 2:单曲循环let playType = 0;
//播放器是否正在播放let isplay = false;// 1.获取服务器数据$.getJSON(baseUrl + 'list', function (data) {// console.log(data);musics = data;// 2.将歌曲绑定到列表中let html = '';$(data).each(function (i, e) {html += `<div class="item row">  <div class="item-icon center"><span class="fa fa-music"></span></div><div class="item-name">${e.name}</div><div class="item-size">${(e.size / 1024 / 1024).toFixed(1)}MB</div></div>`;})$('.list').html(html)// 3.为歌曲列表项绑定点击事件，歌曲播放$('.item').each(function (i, e) {//为每个元素绑定点击事件$(e).on('click', function () {//判断当前正在播放的歌曲是否恰好是点击的歌曲项，如果是则不进行播放if (nowIndex == i) {return;}//还原上一首歌曲列表项的样式$($('.item')[nowIndex]).prop('class','item row')//还原上一首歌曲列表项的图标跳动动画$($('.item-icon')[nowIndex]).prop('class','item-icon center')//将点击项的索引记录为当前需要播放的歌曲索引nowIndex = i;//设置播放源player.src = baseUrl + musics[nowIndex].path;// 开始播放startPlay();// console.log(musics)})})// 开始播放function startPlay() {isplay = true;//（使用定时器，定时检测准备状态）let flag = setInterval(function () {//当播放器有足够播放源时播放歌曲if (player != null && player.readyState >= 2) {//开始播放player.play();//清理定时器clearInterval(flag);}}, 50);//将歌曲列表项文本高亮显示$($('.item')[nowIndex]).addClass('playing-item');//将歌曲列表项的图标执行跳动动画$($('.item-icon')[nowIndex]).addClass('playing');//将歌曲名称显示到头部$($('.head')).text(data[nowIndex].name);//设置图标为暂停图标$('.btn-play-pause>span').addClass('fa fa-pause-circle-o fa-4x')}// 4.歌曲播放状态实时更新相关位置（进度，时间，状态）//为播放器对象绑定数据加载事件$(player).on('loadeddata', function () {//获取歌曲的总播放时长（秒）// console.log(11111)total = this.duration;//将总时长在页面的指定区域显示$($('.time-total')).text(fmtTime(total));})//为播放器绑定播放进度更新事件$(player).on('timeupdate', function () {//实时获取当前进度now = this.currentTime;//将实时的歌曲播放时间显示到指定区域$($('.time-now')).text(fmtTime(now));//实时改变进度条宽度//计算进度条宽度let w = `${now / total * 100}%`;$($('.progress')).width(w);})function fmtTime(time) {//根据提供的歌曲播放时间包装为一个Date对象time = new Date(time * 1000);//获取date中的分和秒let m = time.getMinutes();let s = time.getSeconds();//设置分秒至少显示两位m = m < 10 ? `0${m}` : m;s = s < 10 ? `0${s}` : s;return `${m}:${s}`;}//为进度条的可触发区域绑定点击事件(实现歌曲进度控制)$('.progress-box').on('click', function (e) {//获取当前点击的位置与左边缘的距离let x = e.offsetX;//获取屏幕宽度let w = window.innerWidth;//计算比例now = x / w * total;//将播放器的当前进度设置到计算的位置player.currentTime = now;})//设置歌曲播放完成之后的事件监听（切歌）$(player).on('ended', function () {//下一曲next();})// 5.对按钮绑定点击事件，操作歌曲的播放******///思考://1. 点击按钮实现歌曲播放方式切换$('.btn-play-type').on('click',function(){// console.log(111)if(playType === 0){playType = 1;toast('随机播放');$('.btn-play-type span').prop('class','fa fa-random');}else if(playType === 1){playType = 2;toast('单曲循环');$('.btn-play-type span').prop('class','fa fa-history');}else{playType = 0;toast('列表循环');$('.btn-play-type span').prop('class','fa fa-list');}})// 下一曲function next(){$('.item').each(function (i, e) {//还原上一首歌曲列表项的样式$($('.item')[nowIndex]).prop('class', 'item row')//还原上一首歌曲列表项的图标跳动动画$($('.item-icon')[nowIndex]).prop('class', 'item-icon center')})//判断循环方式  笔试题：== 和 === 区别？   0 == "0" true   0 === "0" falseif(playType === 0){//列表nowIndex = ++nowIndex % $(musics).length;}else if(playType === 1){//随机（随机数）:随机一个需要播放的歌曲索引 20首歌曲，索引范围：0~19（0~length-1）nowIndex = parseInt(Math.random() * $(musics).length);}else{//单曲// nowIndex = nowIndex;}//为播放器对象重新设置需要播放的歌曲地址player.src = baseUrl + $(musics)[nowIndex].path;//开始播放startPlay();}//上一曲function prev(){$('.item').each(function (i, e) {//还原上一首歌曲列表项的样式$($('.item')[nowIndex]).prop('class', 'item row')//还原上一首歌曲列表项的图标跳动动画$($('.item-icon')[nowIndex]).prop('class', 'item-icon center')})if(playType === 0){//列表nowIndex = Math.abs(--nowIndex % musics.length);}else if(playType === 1){//随机（随机数）:随机一个需要播放的歌曲索引 20首歌曲，索引范围：0~19（0~length-1）nowIndex = parseInt(Math.random() * $(musics).length);}else{//单曲// nowIndex = nowIndex;}//为播放器对象重新设置需要播放的歌曲地址(上一曲地址)player.src = baseUrl + musics[nowIndex].path;//开始播放startPlay();}//2. 上一曲，下一曲切换(考虑播放方式)//上一曲$('.btn-play-prov').on('click',function(){toast('上一曲');prev();})//下一曲$('.btn-play-next').on('click',function(){toast('下一曲');next();})//3. 播放/暂停控制(play()/pause())$('.btn-play-pause').on('click',function(){if(isplay){toast('暂停');isplay = false;player.pause();//设置图标为暂停图标$('.btn-play-pause>span').prop('class','fa fa-play-circle-o fa-4x') ;}else{toast('播放');startPlay();}})//消息提示框function toast(msg){//设置文本为指定内容$('#toast').text(msg);//显示消息提示框$('#toast').css('visibility','visible');//1秒之后隐藏消息提示框let flag = setTimeout(function(){//隐藏提示框$('#toast').css('visibility','hidden')//清除定时器，防止内存泄露clearTimeout(flag);},1000);}})
})

使用css、jquery实现一个云音乐播放器相关推荐

用python写的一个简易的云音乐播放器
本人最近在学习python,在看了一些教程后,用python写了一个简单的云音乐播放器,下面把主要代码贴上来,其中用到了github上他人写的一个汉字转拼音的库,大家可以在github上找到. #co ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档）
计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 本源码技术栈 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目 ...
python实现播放音乐_python实现简易云音乐播放器
本人最近在学习python,在看了一些教程后,用python写了一个简单的云音乐播放器,下面把主要代码贴上来,其中用到了github上他人写的一个汉字转拼音的库,大家可以在github上找到. #co ...
html中加入音乐播放器,4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 => 界面: skPlay ...
给自己的博客园添加网抑云音乐播放器
1. 申请权限首先给自己的博客园设置,申请js权限,这个教程可以去搜. 2. 打开网页版网抑云音乐点击一首你喜欢的歌进入 , 然后点击生成外链播放器然后复制代码: 进入到自己的博客园设置页面我 ...

使用css、jquery实现一个云音乐播放器

index.html文件

css样式文件

music.js文件，绑定时间，连接服务器

使用css、jquery实现一个云音乐播放器相关推荐

最新文章

热门文章