对齐-项目：居中；
边框-底部：1px纯白；
框大小：边框-框；
}
/*设置内容部分*/。正文{
flex:7；
/*超出部分隐藏*/
溢出-x:隐藏；
}
/*设置底部部分*/。脚{
flex:2；
显示器：flex
背景：# 3498db
颜色：# fff
字体大小：14px
边框顶部：1px纯白；
框大小：边框-框；
}
/*设置每一首歌曲的格式*/。项目{
显示器：flex
高度：50px
行高：50px
背景：# 3498db
颜色：# fff
字体大小：14px
光标：指针；
过渡：全。5s；
}
/*除了最后一首歌曲其他歌曲都显示下边框*/。item:not(:last-child) {
边框-底部：1px纯白；
}
/*设置歌曲播放时的小图标的背景颜色*/。方框11 {
背景：# f0f0f0
}
/*设置歌曲信息*/。项目名称{
flex:6；
/*不挨着边框写*/
填充：0 10px
}
/*鼠标悬停的效果*/。项目：悬停{
背景：# 2980b9
}
/*鼠标点击的效果*/。项目：活动{
/*点击事件想要立体效果可以加盒子阴影，相对定位*/
位置：相对；
top:2px；
左：2px
方框阴影：5px 5px 10px rgba(0，0，0，5);
}
/*设置上一首/播放、暂停/下一首的图标的占据大小*/。方框1 {
flex:3；
显示：内嵌-块；
}
/*设置歌曲播放的当前时间的占据大小*/。方框2 {
flex:1；
显示：内嵌-块；
填充：50px 0；
文本对齐：左对齐；
}
/*设置歌曲播放的进度和歌曲名的占据大小*/。方框3 {
flex:5；
显示：内嵌-块；
位置：相对；
填充：35px 0；
}
/*设置歌曲播放的总时间的占据大小*/。方框4 {
flex:1；
显示：内嵌-块；
填充：50px 0；
文本对齐：右对齐；
}
/*分配上一首/播放、暂停/下一首的图标大小*/。方框1 a {
显示：内嵌-块；
边距：50px 0；
宽度：30%;
身高：50%;
}
/*设置上一首的图标*/。btn-pre {
背景：url('./imgs/pre-default.png ')不重复；
光标：指针；
}
/*设置上一首的图标鼠标悬停效果*/。BTN-前：悬停{
背景：url('./imgs/pre-active.png ')不重复；
}
/*设置播放的图标*/。BTN-播放{
背景：url('./imgs/play-default.png ')不重复；
光标：指针；
}
/*设置播放的图标鼠标悬停效果*/。BTN-播放：悬停{
背景：url('./imgs/play-active.png ')不重复；
}
/*设置暂停的图标*/。BTN-暂停
背景：url('./imgs/pause-default.png ')不重复；
光标：指针；
}
/*设置暂停的图标鼠标悬停效果*/。暂停：悬停{
背景：url('./imgs/pause-active。png’)不重复；
}
/*设置下一首的图标*/。BTN-下一个{
背景：url('./imgs/next-default.png ')不重复；
光标：指针；
}
/*设置下一首的图标鼠标悬停效果*/。BTN-下一个：悬停{
背景：url('./imgs/next-active.png ')不重复；
}
/*设置歌曲名的字体*/。m-name {
字体：20px '楷体；
}
/*设置歌曲播放总进度*/。方框31 {
位置：绝对；
宽度：100%;
高度：2px
背景：#卡卡卡
z指数：1;
}
/*设置歌曲播放当前进度*/。方框32 {
位置：绝对；
宽度：20%;
高度：2px
背景：白色；
z指数：2;
}
/*跟着歌曲播放当前进度一起动的小圆点*/。点{
位置：绝对；
显示：内嵌-块；
右：0;
top:-2px；
高度：5px
宽度：5px
边框半径：2.5像素；
背景：# fff
}
网页结构布局：因为播放图标和暂停图标点击要交替变化，而且这些图标是当作背景显示的，我们可以只改变a标签的背景就行，就是点击时换一个背景（换背景的方法是换一个类).设置歌曲播放进度时可以看一下声音的中的一些事件已加载数据，时间更新，已结束.用结束可以实现：自动播放下一首歌曲的功能。在设置前进和后退的功能时注意要获取鼠标点击的位置（就是距离开始的距离)。通过给player.currentTime设置值可以改变歌曲进度。
//创建一个播放器数字正射影像图对象
var player=文档。createelement(' audio ')；
//设置一个值保存当前播放歌曲的索引
var当前指数=0；
//设置一个标记判断歌曲是否播放
var isPlay=false
//动态加载歌曲
（函数(){
//设置一个值保存所有歌曲数字正射影像图对象
var html=
//获取所有歌曲的数字正射影像图对象
for(var I=0；音乐长度；i ) {
var m=musics[I]；
//设置每一首歌曲的格式
html=' div class=' item ' data-index=' $ { I } '
div class='item-logo box11'/div
div class=' item-name ' $ { m . name }-$ { m . artist }/div
/div ` 1
}
//添加所有歌曲
document.getElementById('tbody ').innerHTML=html
//给播放器一个默认的播放地址
玩家。src=musics[当前索引]。路径；
})();
//为每一首歌曲设置点击事件
var TRS=文档。查询选择器全部(.项目)
对于(设I=0；长度{
trs[i].addEventListener('click '，function () {
//清除上一首歌曲的播放状态
清除状态()；
//获取歌曲索引
var指数=这个。数据集。指数；
当前索引=索引；
var MSC=musics[index]；
//给播放器设置的播放地址
玩家。src=MSC。路径；
//开始播放
启动播放器()；
})
}
//函数：开始播放
函数startPlayer() {
//设置播放标记
isPlay=true
//播放歌曲
玩家。play()；
TRS[当前索引]。风格。background=' # 2980 B9
//添加播放歌曲的小图标
当前索引querySelector(.项目标志).innerHTML=' img src=' imgs/playing。gif '；
//设置图标为播放状态
文档。查询选择器(“BTN播放”).'暂停；
//设置歌曲名
文档。查询选择器(# playing Mae).innerText=` $ { musics[当前索引].name} - ${musics[currentIndex].艺术家} `;
}
//函数：清除上一首歌曲的播放状态
函数clearStatus() {
TRS[当前索引]。风格。背景=“”；
当前索引querySelector(.项目标志).innerHTML=
}
//函数：暂停播放
函数pausePlay() {
//暂停播放
玩家。pause()；
//设置播放标记
isPlay=false
//设置图标为暂停状态
文档。getelementbyid(“BTN戏”).'播放；
}
//函数：实现上一首歌曲功能的点击事件
document.querySelector(' .BTN大学预科).addEventListener('click '，function () {
//暂停播放
暂停播放()；
//清除上一首歌曲的播放状态
清除状态()；
//实现上一首歌曲功能
if (currentIndex==0) {
当前索引=音乐。长度-1；
}否则{
-当前索引；
}
console.log(currentIndex)
//给播放器设置的播放地址
玩家。src=musics[当前索引]。路径；
启动播放器()；
})
//函数：实现播放歌曲功能的点击事件
文档。getelementbyid(“BTN戏”).addEventListener('click '，function () {
//通过判断播放标志
if (isPlay) {
暂停播放()；
}否则{
启动播放器()；
}
})
//函数：实现下一首歌曲功能的点击事件
document.querySelector(' .BTN——下一个’).addEventListener('click '，function () {
暂停播放()；
清除状态()；
if(当前索引==音乐。长度-1){
当前索引=0；
}否则{
currentIndex
}
console.log(currentIndex)
玩家。src=musics[当前索引]。路径；
启动播放器()；
})
//设置歌曲播放进度
定义变量现在=0;
var total=0；
//歌曲数据加载完后的事件
玩家。addevent侦听器(' loaded data '，function () {
//歌曲当前的进度（时间)
现在=player.currentTime
//歌曲总的进度（时间)
总计=玩家.持续时间
//把歌曲进度（时间)显示到播放器上
document.querySelector(' .播放-当前)。innerText=fmtTime(现在);
document.querySelector(' .播放持续时间)。innerText=fmtTime(总计);
})
//当当前时间（歌曲当前进度时间)更新时会触发时间更新事件
玩家。addevent侦听器('时间更新'，函数(){
//获取歌曲当前的进度（时间)
现在=player.currentTime
//歌曲当前的进度
var p=现在/总计* 100% ';
//把歌曲当前的进度同步到进度条上
文档。查询选择器('。方框32’)。风格。宽度=p；
document.querySelector(' .播放-当前)。innerText=fmtTime(现在);
})
//歌曲结束事件（自动播放下一首歌曲的功能)
player.addEventListener('ended '，function () {
//清除上一首歌曲的播放状态
清除状态()；
//播放下一首歌曲
currentIndex
if(当前索引=音乐。长度){
当前索引=0；
}
玩家。src=musics[当前索引]。路径；
启动播放器()；
})
//前进歌曲事件
document.querySelector('.box31 ').addEventListener('click '，函数(e) {
//获取鼠标点击的位置
let right=e.offsetX
//设置进度条到鼠标点击的位置
文档。查询选择器('。方框32’)。风格。宽度=右；
//计算鼠标点击的位置歌曲的进度
设seek to=right/200 * total；
//设置歌曲的进度
玩家。当前时间=寻道时间；
})
//后退歌曲事件
document.querySelector('.box32 ').addEventListener('click '，函数(e) {
left=e.offsetX
文档。查询选择器('。方框32’)。风格。宽度=左；
设寻道=左/200 *总计；
玩家。当前时间=寻道时间；
})
//函数：格式化时间
函数fmtTime(时间){
时间*=1000;
时间=新日期（时间);
var m=时间。get minutes()；
var s=时间获取秒数()；
m=m 10？0 ' m:m；
s=s 10？0的：s；
返回m ':' s；
}
音乐：
var musics=[
{
艺人：“联欢晚会”，
id: 1，
名称： '追梦赤子心，
路径：" musics/1.mp3 "
},
{
'艺术家： '筷子兄弟，
id: 2，
名称： '父亲，
路径：" musics/2.mp3 "
},
{
'艺术家： '丁当，
id: 3，
名称： '手掌心，
路径："音乐/3.mp3 "
},
{
'艺术家： '佐木李子，
id: 4，
姓名："晚安",
路径："音乐/4.mp3 "
},
{
'艺术家： '张韶涵，
id: 5，
名称： '隐形的翅膀，
路径：“musics/5.mp3”，
},
{
'艺术家： '杨丞琳，
id: 6，
名称： '雨爱，
路径：' musics/6.mp3 '，
},
{
'艺术家： '耀乐团，
id: 7，
名称： '流星，
路径：“musics/7.mp3”，
},
{
'艺术家： '逃跑计划，
id: 8，
名称： '再飞行(MV版)',
路径：' musics/8.mp3 '，
},
{
'艺术家： '金贵晟，
id: 9，
名称： '虹之间，
路径：' musics/9.mp3 '，
}
]
大家学了jQuery和一些框架之后上面的一些东西就可以用jQuery和框架来写，那样比较方便。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。