一,思路

1,先利用div布局，将盒子整体布局出来
2,然后对当中的每一个按钮进行事件绑定
3,调试代码，将代码完善

二,效果图

目录标签

三,HTML代码

代码因为写了很多注释，有点长

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"><style>body {margin: 0;height: 100vh;display: flex;justify-content: center;align-items: center;}.player {width: 1000px;}.music-item {width: 100%;height: 60px;color: #fff;font-weight: bolder;background-color: #333333;display: flex;align-items: center;}.music-item>div:nth-child(1) {width: 300px;padding-left: 30px;}.music-item>div:nth-child(2) {width: 200px;color: #656565;}.music-item:nth-child(2n) {background-color: #2d2d2d;}.player-controls {height: 100px;background-color: #222222;display: flex;align-items: center;}.btns {width: 150px;height: 100%;display: flex;align-items: center;justify-content: space-evenly;}.btns>img {height: 24px;}.btns>img:nth-child(2) {height: 30px;}.cover>.img {width: 80px;height: 80px;background-image: url('./img/cover/山根ミチル - Beginning(アイテムBGM1・悪魔城伝説より) [VAMPIRE KILLER (MD) ].jpg');background-size: cover;background-position: center;}.name-row {height: 40px;padding-left: 20px;display: flex;justify-content: space-between;align-items: center;}.left {display: flex;}.left>div {width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.tool-bar {height: 40px;width: 150px;display: flex;align-items: center;justify-content: space-around;}.tool-bar img {width: 25px;height: 25px;}.progress-bar {height: 40px;display: flex;align-items: center;/* justify-content: center; */padding-left: 20px;}.progress-bar span {color: #757575;padding-left: 10px;}</style>
</head><body><div class="player"><!-- 播放列表 --><div class="music-list"><!-- 列表项 --><div class="music-item"><div>知足</div><div>五月天</div><div>热门华语85</div></div><div class="music-item"><div>知足</div><div>五月天</div><div>热门华语85</div></div><div class="music-item"><div>知足</div><div>五月天</div><div>热门华语85</div></div><div class="music-item"><div>知足</div><div>五月天</div><div>热门华语85</div></div><div class="music-item"><div>知足</div><div>五月天</div><div>热门华语85</div></div></div><!-- 播放器 --><div class="player-controls"><!-- 播放按钮组合 --><div class="btns"><img src="./img/bg-backward.svg" id="backward" /><img src="./img/play.svg" id="pause" /><img src="./img/bg-forward.svg" id="forward" /></div><!-- 专辑封面图 --><div class="cover"><div class="img"></div></div><div style="flex-grow: 1"><!-- 歌名行 --><div class="name-row"><!-- 左侧 --><div class="left"><div style="color: #fff">此生不换</div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6b6b6c">青鸟飞鱼</span>&nbsp;&nbsp;&nbsp;&nbsp;<img style="width: 24px;" src="./img/link.svg" alt=""></div><!-- 右侧工具栏 --><div class="tool-bar"><img src="./img/save.svg"><img src="./img/random.svg"><img src="./img/list.svg"></div></div><!-- 进度条行 --><div class="progress-bar"><input type="range" min="0" max="265" value="0" class="first"><span class="time1">00:00</span><span>/</span><span class="time2">00:00</span><img class="listen" style="width: 24px; padding-left: 10px;" src="./img/listen.svg"><input type="range" value="0" min="0" max="100" class="seconde" style="padding-left: 10px;"></div></div></div><audio src="./青鸟飞鱼 - 此生不换.mp3"></audio></div><script>//定义一个对象来储存歌曲源，播放器中的歌曲从对象中获取let music = {1: './青鸟飞鱼 - 此生不换.mp3',2: './吴雨霏 - 生生世世爱.mp3',3: './许嵩 - 多余的解释.mp3',4: './许嵩 - 昨夜书 (Live).mp3',5: './许嵩 - 昨夜书 (Live).mp3'}//定义一个对象来储存歌曲名称let musicname = {1: '此生不换',2: '生生世世爱',3: '多余的解释',4: '昨夜书',5: '昨夜书'}//定义一个对象来储存歌曲的作者let author = {1: '青鸟飞鱼',2: '吴雨霏',3: '许嵩',4: '许嵩',5: '许嵩'}// console.log(Object.values(music));//获取暂停键let pause = document.querySelector('#pause')//获取播放器audiolet audio = document.querySelector('audio')//定义一个flag来作为判断依据，判断当前状态到底是播放还是暂停状态let flag = true//定义计时器的时间let timer//获取左侧歌名行，其中包括了歌曲姓名，作者let left = document.querySelector('.left')// console.log(left.firstElementChild);//获取第一个进度条，即歌曲播放的进度条let first = document.querySelector('.first')//设置歌曲播放的进度条为0，first.value = 0//获取第二个进度条，即歌曲播放声音的进度条let second = document.querySelector('.seconde')  second.value = 100//获取音量的图标，方便后面点击使用let listen = document.querySelector('.listen')//获取当前的播放时间let currentTime = document.querySelector('.time1')//获取总的播放时间，即歌曲的时间长度let totalTime = document.querySelector('.time2')//为暂停键按钮添加点击事件，即点击之后根据flag的值判断到底是暂停还是播放pause.addEventListener('click', () => {if (flag) {audio.play() //播放音乐pause.src = './img/pause.svg' //修改pause按钮为停止按钮time1() //调用time1函数，可以根据计时器来进行每一秒钟的变化，即当前播放时间的变化time2() //调用time2函数，获取到歌曲播放的总时间} else {audio.pause();pause.src = './img/play.svg' //修改pause按钮为播放按钮clearInterval(timer) //将计时器暂停，这样歌曲播放的进度条就不会移动}//修改flag的值，方便之后再次点击的时候使用flag = !flag})//获取到上一首歌的点击按钮let backward = document.querySelector('#backward')let temp = 0//添加点击事件backward.addEventListener('click', () => {if (temp == 0) {// console.log(Object.values(music)[0]);//Object.values(music)是获取到music对象中的内容，返回的是一个数组，可以采用数组的方法操作他audio.src = Object.values(music)[Object.values(music).length - 1] //然后就是将audio下面的src，也就是歌曲，更换为其他的歌曲temp = Object.values(music).length - 1 //temp=0时，就将temp的值赋为数组长度-1} else {audio.src = Object.values(music)[temp - 1] //temp不为0时，就直接将当前src的上一个src更换到当前就可以了temp = temp - 1//更新temp}clearInterval(timer)//上一首歌曲的计时器结束，防止两个计时器重叠time1()//audio.play().then()的含义是audio.play加载完成之后再执行time2函数，否则的话因为异步的原因，他会在audio还未加载完的时候就执行time2，//这样会导致time2当中的以audio为基础的数据得不到，为NAN值audio.play().then(() => {time2(temp)})flag = falsepause.src = './img/pause.svg'})//获取下一首的歌曲的点击按钮，原理与上一首差不多，let forward = document.querySelector('#forward')forward.addEventListener('click', () => {// debuggerif (temp == Object.values(music).length - 1) {// console.log(Object.values(music)[0]);audio.src = Object.values(music)[0]temp = 0} else {audio.src = Object.values(music)[temp + 1]temp = temp + 1}clearInterval(timer)time1()audio.play().then(() => {time2(temp)})flag = falsepause.src = './img/pause.svg'})//获取整个歌曲列表let list = document.querySelectorAll('.music-item')//将歌曲列表的第一项，即歌曲名依次赋为musicname当中的值for (let i = 0; i < list.length; i++) {list[i].firstElementChild.innerHTML = Object.values(musicname)[i]}//将歌曲列表的第二项，即歌曲名依次赋为author当中的值for (let i = 0; i < list.length; i++) {list[i].firstElementChild.nextElementSibling.innerHTML = Object.values(author)[i]}//获取所有的歌曲，对获取到的歌曲进行操作let musicItem = document.querySelectorAll('.music-item')for (let i = 0; i < Object.values(musicItem).length; i++) {// 为每一首歌添加点击事件，点击之后的原理和上面差不多musicItem[i].addEventListener('click', () => {// console.log(Object.values(music)[0]);audio.src = Object.values(music)[i]clearInterval(timer)temp = itime1()audio.play().then(() => {time2(temp)})flag = falsepause.src = './img/pause.svg'})}//获取歌曲的总时间function time2() {first.min = 0//修改value的最大值，这样他就会根据每一首歌的时间长短而变化first.max = Math.floor(audio.duration)//将时间转化为00:00的形式let time2Minute = Math.floor(audio.duration / 60)let time2Second = Math.floor(audio.duration % 60)//将时间修改为获取到的时间totalTime.textContent = '0' + time2Minute + ':' + time2Second//修改当前播放的歌曲和作者名字left.firstElementChild.innerHTML = Object.values(musicname)[temp]left.firstElementChild.nextElementSibling.innerHTML = Object.values(author)[temp]// console.log(audio.duration);}function time1() {first.value = 0timer = setInterval(() => {//当前的时间函数，获取当前歌曲播放的时间let firstValue = parseInt(first.value)let time1Minute = Math.floor(audio.currentTime / 60)let time1Second = Math.floor(audio.currentTime % 60)if (time1Second < 10) {//判断是一位数还是两位数，若是一位数，则在前面加一个0，让他保持00:00的形式currentTime.textContent = '0' + time1Minute + ':0' + time1Second} else {currentTime.textContent = '0' + time1Minute + ':' + time1Second}firstValue += 1first.value = firstValue// console.log(firstValue);}, 1000)}let down = false//拉动进度条//判断鼠标左键是否按下first.addEventListener('mousedown', () => {down = !down})first.addEventListener('mousemove', () => {//鼠标按下并且移动的时候，将当前时间赋值为你鼠标滑动到的地方if (down) {audio.currentTime = Math.floor(parseInt(first.value))}down = !down})let down2 = false//原理与上面相同second.addEventListener('mousedown', () => {down2 = !down2console.log(down2);})second.addEventListener('mousemove', () => {if (down2) {// console.log(typeof(second.value));audio.volume = (parseInt(second.value)) / 100if (audio.volume == 0) {listen.src = "./img/client.svg"audio.muted = true} else {listen.src = "./img/listen.svg"audio.muted = false}}})//点击音量按钮时，判断当前音量来进行是否静音等操作listen.addEventListener('click', () => {audio.muted = !audio.mutedif (audio.muted) {listen.src = "./img/client.svg"} else {listen.src = "./img/listen.svg"}})</script>
</body></html>

四,CSS代码

只有一个css文件，还是我嫌写到html中太难检查代码了，就重新写了一个css文件

 input[type=range].first {width: 500px;margin: 3.3px 0;background-color: transparent;-webkit-appearance: none;
}input[type=range].first:focus {outline: none;
}input[type=range].first::-webkit-slider-runnable-track {background: #111111;border: 0.2px solid #010101;border-radius: 1.3px;width: 100%;height: 8.4px;cursor: pointer;
}input[type=range].first::-webkit-slider-thumb {margin-top: -3.5px;width: 15px;height: 15px;background: #535353;border: 1px solid #000000;border-radius: 50px;cursor: pointer;-webkit-appearance: none;
}input[type=range].first:focus::-webkit-slider-runnable-track {background: #1e1e1e;
}input[type=range].first::-moz-range-track {background: #111111;border: 0.2px solid #010101;border-radius: 1.3px;width: 100%;height: 8.4px;cursor: pointer;
}input[type=range].first::-moz-range-thumb {width: 15px;height: 15px;background: #535353;border: 1px solid #000000;border-radius: 50px;cursor: pointer;
}input[type=range].first::-ms-track {background: transparent;border-color: transparent;border-width: 4.3px 0;color: transparent;width: 100%;height: 8.4px;cursor: pointer;
}input[type=range].first::-ms-fill-lower {background: #040404;border: 0.2px solid #010101;border-radius: 2.6px;
}input[type=range].first::-ms-fill-upper {background: #111111;border: 0.2px solid #010101;border-radius: 2.6px;
}input[type=range].first::-ms-thumb {width: 15px;height: 15px;background: #535353;border: 1px solid #000000;border-radius: 50px;cursor: pointer;margin-top: 0px;/*Needed to keep the Edge thumb centred*/
}input[type=range].first:focus::-ms-fill-lower {background: #111111;
}input[type=range].first:focus::-ms-fill-upper {background: #1e1e1e;
}/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure outhow to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */input[type=range].first {margin: 0;/*Edge starts the margin from the thumb, not the track as other browsers do*/}
}input[type=range].seconde {width: 80px;margin: 3.3px 0;background-color: transparent;-webkit-appearance: none;
}input[type=range].seconde:focus {outline: none;
}input[type=range].seconde::-webkit-slider-runnable-track {background: #111111;border: 0.2px solid #010101;border-radius: 1.3px;width: 100%;height: 8.4px;cursor: pointer;
}input[type=range].seconde::-webkit-slider-thumb {margin-top: -3.5px;width: 15px;height: 15px;background: #535353;border: 1px solid #000000;border-radius: 50px;cursor: pointer;-webkit-appearance: none;
}input[type=range].seconde:focus::-webkit-slider-runnable-track {background: #1e1e1e;
}input[type=range].seconde::-moz-range-track {background: #111111;border: 0.2px solid #010101;border-radius: 1.3px;width: 100%;height: 8.4px;cursor: pointer;
}input[type=range].seconde::-moz-range-thumb {width: 15px;height: 15px;background: #535353;border: 1px solid #000000;border-radius: 50px;cursor: pointer;
}input[type=range].seconde::-ms-track {background: transparent;border-color: transparent;border-width: 4.3px 0;color: transparent;width: 100%;height: 8.4px;cursor: pointer;
}input[type=range].seconde::-ms-fill-lower {background: #040404;border: 0.2px solid #010101;border-radius: 2.6px;
}input[type=range].seconde::-ms-fill-upper {background: #111111;border: 0.2px solid #010101;border-radius: 2.6px;
}input[type=range].seconde::-ms-thumb {width: 15px;height: 15px;background: #535353;border: 1px solid #000000;border-radius: 50px;cursor: pointer;margin-top: 0px;/*Needed to keep the Edge thumb centred*/
}input[type=range].seconde:focus::-ms-fill-lower {background: #111111;
}input[type=range].seconde:focus::-ms-fill-upper {background: #1e1e1e;
}/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure outhow to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */input[type=range].seconde {margin: 0;/*Edge starts the margin from the thumb, not the track as other browsers do*/}
}

这个css文件只包括了input[type=range]的样式

五,程序源码

https://github.com/3125709207/music

六,牢骚

做完写到11点多，人都给我写麻瓜了，但是bug都还没调完，淦，难受啊，不过最后结果是好的，该改的都改完了，还好还好

利用input[type=range]制作一个简易的音乐播放器相关推荐

【Python案例】——制作一个简易的音乐播放器【轻松入门】
目录
使用python加PyQt5，利用QMediaPlayer写一个简易的音乐播放器（进度条拖动，音量改变，播放停止切换，歌曲列表））
当你学习了python之后,总想着利用它去做些什么,无论是制作小工具还是小游戏,都是一种锻炼. 那么,利用python加上PyQt5写一个简单的音乐播放器,可能会是一个有趣的体验. 下面我会分享一下如 ...
Python：通过网络爬虫实现一个简易控制台音乐播放器
hello,大家好,我是wangzirui32,今天我们来学习如何通过网络爬虫实现一个简易控制台音乐播放器,开始学习吧! 1. 项目结构及库准备 app.py为项目入口程序,download.py为音 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
用html制作一个音乐排行榜,使用原生JavaScript制作一个漂亮的音乐播放器
简单介绍起初在简书上发现了这篇博客--[html.css.jq]制作一个简洁的音乐播放器.这是一个用jQuery库实现的音乐播放器,界面简约大气. 我在这个基础上,反其道而行,使用原生JavaScr ...
Python制作一个多功能音乐播放器
文章目录一.制作播放器的思路二.制作播放器知识点和所需模块三.播放器的代码展示一.制作播放器的思路制作一个多功能音乐播放器的思路确定播放器的需求和功能,例如支持哪些音频格式.播放列表管理. ...
Swift - 制作一个在线流媒体音乐播放器（使用StreamingKit库）
在之前的文章中,我介绍了如何使用 AVPlayer 制作一个简单的音乐播放器( 点击查看1. 点击查看2).虽然这个播放器也可以播放网络音频,但其实际上是将音频文件下载到本地后再播放的. 本文演示如 ...
使用Android Studio开发一个简易的音乐播放器
系统运行界面展示: 第一步要先把歌曲导进模拟器,导入模拟器的时候要先获取权限: 首先,要获得虚拟设备Root权限. 命令行工具,切换到『sdk目录』/platform-tools/ (或者将上述目录加 ...
单片机做的音乐盒c语言程序,简单音乐盒，利用单片机所学DIY一个满意的音乐播放器！...
这是毕业设计作品,老师要求可以做一个音乐盒或者汉字点阵就免考,虽然考试也很简单,但是我还是决定做一个实物,显得"高大上",本人大一的时候就学会了C语言对单片机的编程,这次课程设计当 ...
前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）
具体的操作流程(实现步骤): 1.歌曲搜索 2.歌曲播放 3.歌曲评论 4.播放歌曲的MV(有的歌曲没有MV) 代码编写过程: 1.创建一个Vue项目(前提是安装好了node.js.npm.vue) ...

利用input[type=range]制作一个简易的音乐播放器

可小阿木