2023年7月11日发(作者：)

⽤JavaScript在⽹页编写⼀个播放器今天是教师节，我先祝各位⽼师节⽇快乐今天我和⼤家分享⽤JavaScript在⽹页编写⼀个播放器。对于播放器，⼤家都不陌⽣，那么要怎么样才能实现它呢？下⾯是我做的⼀个播放器的图

⾸先我们从上向下看看这个播放器，它的最上⾯是标题（head）：我的⾳乐；中间是内容（body）:歌曲；最下⾯（foot）:控制⾳乐播放的控件。标题部分就只有标题：我的⾳乐，⽽中间内容部分是歌单，每个歌曲都有⼀个播放图标（⾳乐播放时才有）和歌曲的信息，底部部分有⼀些控制播放的图标、当前播放歌曲名、歌曲播放进度还有歌曲播放时长。布局这块我们要保存结构与样式分离，结构⽤HTML写，样式⽤CSS写。⽹页结构布局：我的歌曲不是直接写上去的，是加载json对象的。所以这⾥我写的内容部分的歌曲只是⼀个格式。上⼀⾸/播放、暂停/下⼀⾸的图标，我是⽤a标签写的，图标加在a标签背景上。歌曲播放的进度这块我是⽤两个div实现的，⾥⾯的⼀个div显⽰灰⾊当作总进度，上⾯的⼀个div显⽰⽩⾊当作当前歌曲播放进度。

⽹页样式布局：⼤家可以⾃⼰设置好看的字体、颜⾊样式。另外在设置background: url("../imgs/") no-repeat;时注意：url⾥⾯的路径要写两个点表⽰退出当前⽬录，到根⽬录。还有背景要设置no-repeat（不平铺）。在⽤绝对定位时要遵守⼦绝⽗相原则还要注意设置z-index属性。/*去除标签中⾃带的内外边距*/* { margin: 0; padding: 0;}/*设置整个播放器样式：布局是弹性盒，布局是弹性盒，⽔平居中，宽度和⾼度，带边框，设置弹性盒⼦的弹性⽅向：column（垂直的竖向）*/.music-list { display: flex; margin: 0 auto; height: 600px; width: 400px; border: 1px solid #ccc; flex-direction: column;}/*设置标题部分*/.head{ flex: 1; background: #3498db; color: #fff; font: 24px "华⽂⾏楷"; display: flex; /*横轴居中*/ justify-content: center; /*纵轴居中*/ align-items: center; border-bottom: 1px solid white; box-sizing: border-box;}/*设置内容部分*/.body { flex: 7; /*超出部分隐藏*/ overflow-x: hidden;}/*设置底部部分*/.foot { flex: 2; display: flex; background: #3498db; color: #fff; font-size: 14px; border-top: 1px solid white; box-sizing: border-box;}/*设置每⼀⾸歌曲的格式*/.item { display: flex; height: 50px; line-height: 50px; background: #3498db; color: #fff; font-size: 14px; cursor: pointer; transition: all .5s;}/*除了最后⼀⾸歌曲其他歌曲都显⽰下边框*/.item:not(:last-child) { border-bottom: 1px solid white;}/*设置歌曲播放时的⼩图标的背景颜⾊*/.box11 { background: #f0f0f0;}/*设置歌曲信息*/.item-name { flex: 6; flex: 6; /*不挨着边框写*/ padding: 0 10px;}/*⿏标悬停的效果*/.item:hover { background: #2980b9;}/*⿏标点击的效果*/.item:active { /*点击事件想要⽴体效果可以加盒⼦阴影，相对定位*/ position: relative; top: 2px; left: 2px; box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);}/*设置上⼀⾸/播放、暂停/下⼀⾸的图标的占据⼤⼩*/.box1 { flex: 3; display: inline-block;}/*设置歌曲播放的当前时间的占据⼤⼩*/.box2 { flex: 1; display: inline-block; padding: 50px 0; text-align: left;}/*设置歌曲播放的进度和歌曲名的占据⼤⼩*/.box3 { flex: 5; display: inline-block; position: relative; padding: 35px 0;}/*设置歌曲播放的总时间的占据⼤⼩*/.box4 { flex: 1; display: inline-block; padding: 50px 0; text-align: right;}/*分配上⼀⾸/播放、暂停/下⼀⾸的图标⼤⼩*/.box1 a { display: inline-block; margin: 50px 0; width: 30%; height: 50%;}/*设置上⼀⾸的图标*/.btn-pre { background: url("../imgs/") no-repeat; cursor: pointer;}/*设置上⼀⾸的图标⿏标悬停效果*/.btn-pre:hover { background: url("../imgs/") no-repeat;}/*设置播放的图标*/.btn-play { background: url("../imgs/") no-repeat; cursor: pointer;}/*设置播放的图标⿏标悬停效果*/.btn-play:hover { background: url("../imgs/") no-repeat; background: url("../imgs/") no-repeat;}/*设置暂停的图标*/.btn-pause { background: url("../imgs/") no-repeat; cursor: pointer;}/*设置暂停的图标⿏标悬停效果*/.btn-pause:hover { background: url("../imgs/") no-repeat;}/*设置下⼀⾸的图标*/.btn-next { background: url("../imgs/") no-repeat; cursor: pointer;}/*设置下⼀⾸的图标⿏标悬停效果*/.btn-next:hover { background: url("../imgs/") no-repeat;}/*设置歌曲名的字体*/.m-name { font: 20px "楷体";}/*设置歌曲播放总进度*/.box31 { position: absolute; width: 100%; height: 2px; background: #cacaca; z-index: 1;}/*设置歌曲播放当前进度*/.box32 { position: absolute; width: 20%; height: 2px; background: white; z-index: 2;}/*跟着歌曲播放当前进度⼀起动的⼩圆点*/.dot { position: absolute; display: inline-block; right: 0; top: -2px; height: 5px; width: 5px; border-radius: 2.5px; background: #fff;}JavaScript代码：因为播放图标和暂停图标点击要交替变化，⽽且这些图标是当作背景显⽰的，我们可以只改变a标签的背景就⾏，就是点击时换⼀个背景（换背景的⽅法是换⼀个class）。设置歌曲播放进度时可以看⼀下audio中的⼀些事件loadeddata、timeupdate、ended；⽤ended可以实现：⾃动播放下⼀⾸歌曲的功能。在设置前进和后退的功能时注意要获取⿏标点击的位置（就是距离开始的距离）。通过给 tTime设置值可以改变歌曲进度。// 创建⼀个播放器dom对象var player = Element('audio');//设置⼀个值保存当前播放歌曲的索引var currentIndex = 0;//设置⼀个标记判断歌曲是否播放var isPlay = false;//动态加载歌曲(function () { //设置⼀个值保存所有歌曲dom对象 var html = ''; //获取所有歌曲的dom对象 for (var i = 0; i < ; i++) { var m = musics[i]; //设置每⼀⾸歌曲的格式 html += `` } //添加所有歌曲 mentById('tbody').innerHTML = html; //给播放器⼀个默认的播放地址 = musics[currentIndex].path;})();//为每⼀⾸歌曲设置点击事件var trs = electorAll('.item')for (let i = 0; i < ; i++) { trs[i].addEventListener('click', function () { //清除上⼀⾸歌曲的播放状态 clearStatus(); //获取歌曲索引 var index = ; currentIndex = index; var msc = musics[index]; //给播放器设置的播放地址 = ; //开始播放 startPlayer(); })}//函数：开始播放function startPlayer() { //设置播放标记 isPlay = true; // 播放歌曲 (); trs[currentIndex].ound = '#2980b9'; // 添加播放歌曲的⼩图标 trs[currentIndex].querySelector('.item-logo').innerHTML = ''; //设置图标为播放状态 elector('#btnPlay').className = 'btn-pause'; //设置歌曲名 elector('#playingNmae').innerText = `${musics[currentIndex].name} - ${musics[currentIndex].artist}`;}//函数：清除上⼀⾸歌曲的播放状态function clearStatus() { trs[currentIndex].ound = ''; trs[currentIndex].querySelector('.item-logo').innerHTML = '';}//函数：暂停播放function pausePlay() { //暂停播放 (); //设置播放标记 isPlay = false; //设置图标为暂停状态 mentById('btnPlay').className = 'btn-play';}//函数：实现上⼀⾸歌曲功能的点击事件elector('.btn-pre').addEventListener('click', function () {elector('.btn-pre').addEventListener('click', function () { //暂停播放 pausePlay(); //清除上⼀⾸歌曲的播放状态 clearStatus(); //实现上⼀⾸歌曲功能 if (currentIndex == 0) { currentIndex = - 1; } else { --currentIndex; } (currentIndex) //给播放器设置的播放地址 = musics[currentIndex].path; startPlayer();})//函数：实现播放歌曲功能的点击事件mentById('btnPlay').addEventListener('click', function () { //通过判断播放标志 if (isPlay) { pausePlay(); } else { startPlayer(); }})//函数：实现下⼀⾸歌曲功能的点击事件elector('.btn-next').addEventListener('click', function () { pausePlay(); clearStatus(); if (currentIndex == - 1) { currentIndex = 0; } else { ++currentIndex; } (currentIndex) = musics[currentIndex].path; startPlayer();})//设置歌曲播放进度var now = 0;var total = 0;//歌曲数据加载完后的事件ntListener('loadeddata', function () { // 歌曲当前的进度（时间） now = tTime; // 歌曲总的进度（时间） total = on; //把歌曲进度（时间）显⽰到播放器上 elector('.play-current').innerText = fmtTime(now); elector('.play-duration').innerText = fmtTime(total);})//当currentTime（歌曲当前进度时间）更新时会触发timeupdate事件ntListener('timeupdate', function () { //获取歌曲当前的进度（时间） now = tTime; // 歌曲当前的进度 var p = now / total * 100 + '%'; //把歌曲当前的进度同步到进度条上 elector('.box32'). = p; elector('.play-current').innerText = fmtTime(now);})//歌曲结束事件（⾃动播放下⼀⾸歌曲的功能）ntListener('ended', function () { //清除上⼀⾸歌曲的播放状态 //清除上⼀⾸歌曲的播放状态 clearStatus(); //播放下⼀⾸歌曲 currentIndex++; if (currentIndex >= ) { currentIndex = 0; } = musics[currentIndex].path; startPlayer();})//前进歌曲事件elector('.box31').addEventListener('click', function (e) { //获取⿏标点击的位置 let right = X; // 设置进度条到⿏标点击的位置 elector('.box32'). = right; //计算⿏标点击的位置歌曲的进度 let seekTo = right/200*total; //设置歌曲的进度 tTime=seekTo; })//后退歌曲事件elector('.box32').addEventListener('click', function (e) { let left = X; elector('.box32'). = left; let seekTo = left/200*total; tTime=seekTo;})//函数：格式化时间function fmtTime(time) { time *= 1000; time = new Date(time); var m = utes(); var s = onds(); m = m < 10 ? '0' + m : m; s = s < 10 ? '0' + s : s; return m + ':' + s;}musics:var musics = [ { artist: "GALA ", id: 1, name: "追梦⾚⼦⼼", path: "musics/3" }, { artist: "筷⼦兄弟", id: 2, name: "⽗亲", path: "musics/3" }, { artist: "丁当", id: 3, name: "⼿掌⼼", path: "musics/3" }, { artist: "佐々⽊李⼦", id: 4, name: "Good Night", path: "musics/3" }, { artist: "张韶涵", id: 5, name: "隐形的翅膀", path: "musics/3", }, { artist: "杨丞琳", id: 6, name: "⾬爱", path: "musics/3", }, { artist: "耀乐团", id: 7, name: "流星", path: "musics/3", }, { artist: "逃跑计划", id: 8, name: "再飞⾏ (MV版)", path: "musics/3", }, { artist: "⾦贵晟", id: 9, name: "虹之间", path: "musics/3", }] ⼤家学了jQuery和⼀些框架之后上⾯的⼀些东西就可以⽤jQuery和框架来写，那样⽐较⽅便。