时间：2023-07-23 07:24:01 | 来源：网站运营
时间：2023-07-23 07:24:01 来源：网站运营
自学前端出入门，我的自制HTML音乐播放器：本人学的机械，工作中无聊所致，偶尔码码代码，不懂什么算法，不懂什么数据结构，更分不清面向对象以及类和函数编程的区别和意义，因为读大学那阵子学的c语言，没接触过什么面向对象和类编程。空了码码代码，心血来潮看看HTML+JS+CSS搞了个半成品音乐播放器，css部分几乎没有美化，属于处处处处处处处处处级入门，请大神勿喷，若看得起小的，给点讲解，我定当万分感谢，下面直接上丑陋代码！这篇文仅仅作为学习中的记录用，说不定永远不更新！
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/music.css"> <script src=" js/music.js"></script></head><body> <div class="musicplayer"> <div class="cover"> cover </div> <div class="slider"> <!-- <span class="iconfont-slider"></span> --> <div class="time">00.00</div> <div id="sliderwidth" onclick="sliderPositon(event)"> <img src="icon/sliderdot.png" alt="nopic" id="iconfont-slider"></img> </div> <div class="time">00.00</div> </div> <div class="press"> <img src="icon/musicplay.png" alt="nopic" onclick="musicPlay()"> <img src="icon/musicpause.png" alt="nopic" onclick="musicPause()"> <img src="icon/musicpre.png" alt="nopic" onclick="musicPre()"> <img src="icon/musicnext.png" alt="nopic" onclick="musicNext()"> <!-- <span class="iconfont-press" onclick="musicPlay()"></span> <span class="iconfont-press" onclick="musicPause()"></span> <span class="iconfont-press" onclick="musicPre()"></span> <span class="iconfont-press" onclick="musicNext()"></span> --> </div> <div class="list"> <ol class="listol" onmouseover="musicSrc()"> <!-- <ol class="listol" > --> <li>intro</li> <li>horse</li> <li>夏恋</li> <li>Hear Me Now</li> <li>in the end</li> <li>Pluto (Drop Tower Remix)</li> <li>Puppy</li> </ol> </div> <div class="lrc">song lrc</div> <audio id="audio"> <source src="music/夏恋.mp3" type="audio/mpeg"> </audio> </div></body></html>js部分控制网页操作var playedflag = 0 //全局变量判断音乐是否在播放var dotmoved //全局变量判断进度条是否移动，返回值为setInterval的ID值，可用于取消定时器function musicListColorChange() { var str = decodeURIComponent(document.getElementById('audio').currentSrc) //decodeURIComponent()用来解码中文字 // console.log('changec:',str) var reg = /music//(.*).mp3/ musicname = str.match(reg)[1] var list = document.getElementsByClassName('listol')[0].children for (var i = 0; i < list.length; i++) { if (musicname === list[i].innerHTML) { list[i].style.color = 'red' } else { list[i].style.color = 'black' } }}//用来改变字体颜色的函数function musicPlaySrcChanged() { document.getElementById('audio').load() document.getElementById('audio').play() document.getElementById('audio').addEventListener('timeupdate', move) document.getElementById('audio').addEventListener('durationchange', function () { document.getElementsByClassName('time')[1].innerHTML = convertMsicTime(document.getElementById('audio').duration) //durationchange事件，监听时长改变然后获取整段时间 var str = decodeURIComponent(document.getElementById('audio').currentSrc) //decodeURIComponent()用来解码中文字 musicListColorChange() // console.log(str) }) //为什么一定要放到这个时间改变的监听函数才能改变到正确的音乐播放src？？？？}function musicSrc() { var list = document.getElementsByClassName('listol')[0].children // console.log(list) for (let i = 0; i < list.length; i++) { list[i].onclick = function changeSrc() { document.getElementById('audio').src = 'music/' + list[i].innerHTML + '.mp3' //拼接播放连接 musicPlaySrcChanged() //播放地址更改后的操作 } }}function convertMsicTime(converttime) { var sec, min, showtime sec = parseInt(converttime % 60) min = parseInt(converttime / 60) if (min === 0) { if (sec < 10) { showtime = '00' + ':' + '0' + sec } else { showtime = '00' + ':' + sec } } else if (min > 0 && min < 10) { if (sec < 10) { showtime = '0' + min + ':' + '0' + sec } else { showtime = '0' + min + ':' + sec } } else { if (sec < 10) { showtime = min + ':' + '0' + sec } else { showtime = min + ':' + sec } } return showtime //按照分秒格式化时间}function sliderPositon(e) { var mouseposition = e.offsetX var sliderwidth = document.getElementById('sliderwidth').offsetWidth document.getElementById('iconfont-slider').style.left = 99 * mouseposition / sliderwidth + '%' document.getElementById('audio').currentTime = (mouseposition / sliderwidth) * document.getElementById('audio').duration document.getElementsByClassName('time')[0].innerHTML = convertMsicTime(mouseposition / sliderwidth * document.getElementById('audio').duration) // document.getElementById('audio').play()} //移动滑块之后播放音乐function move() { var sliderdot = document.getElementById('iconfont-slider') var movetime = document.getElementById('audio').duration //按照秒为单位的总时间 var movecurrenttime = document.getElementById('audio').currentTime //按照秒为单位的正在播放的时间 var musiccurrenttime = convertMsicTime(document.getElementById('audio').currentTime) //按照分秒格式化后的正在播放的时间，用于显示在网页上 document.getElementsByClassName('time')[0].innerHTML = musiccurrenttime //显示整段音乐正在播放的时间 sliderdot.style.left = 99 * movecurrenttime / movetime + '%' //iconfont-slider用了1%的大小所以整段长度不是100%用99%就够了，否则会超出整长}function musicPlay() { if (playedflag > 0) { return //如果已经播放再按播放按键无效 } else { document.getElementById('audio').play() document.getElementById('audio').addEventListener('timeupdate', move) document.getElementsByClassName('time')[1].innerHTML = convertMsicTime(document.getElementById('audio').duration) //显示整段音乐的时间,按照分秒格式化后的时间，用于显示在网页上 musicListColorChange() playedflag = 1 }}function musicPause() { document.getElementById('audio').pause() clearInterval(dotmoved) playedflag = 0}function musicPre() { var str = decodeURIComponent(document.getElementById('audio').currentSrc) //decodeURIComponent()用来解码中文字 var reg = /music//(.*).mp3/ musicname = str.match(reg)[1] var list = document.getElementsByClassName('listol')[0].children for (var i = 0; i < list.length; i++) { if (musicname === list[i].innerHTML) { if (i > 0) { document.getElementById('audio').src = 'music/' + list[i - 1].innerHTML + '.mp3' //拼接播放连接 } else { document.getElementById('audio').src = 'music/' + list[list.length - 1].innerHTML + '.mp3' //拼接播放连接 ，如果是第一首那就从最后一首开始 } } } musicPlaySrcChanged() //播放地址更改后的操作}function musicNext() { var str = decodeURIComponent(document.getElementById('audio').currentSrc) //decodeURIComponent()用来解码中文字 var reg = /music//(.*).mp3/ musicname = str.match(reg)[1] var list = document.getElementsByClassName('listol')[0].children for (var i = 0; i < list.length; i++) { // list[i].style.color='black' if (musicname === list[i].innerHTML) { if (i < list.length - 1) { document.getElementById('audio').src = 'music/' + list[i + 1].innerHTML + '.mp3' //拼接播放连接 } else { document.getElementById('audio').src = 'music/' + list[0].innerHTML + '.mp3' //拼接播放连接 ，如果是最后一首那就从头开始 } } } musicPlaySrcChanged() //播放地址更改后的操作}最后CSS所谓的美化，其实啥也没干！待后续.press{ display: flex; }.press>img{ width: 50px; /* border: 1px solid black; */ cursor: pointer; }.press>img:hover{ /* width: 50px; */ /* border: 1px solid black; */ cursor: pointer; background-color: darkgrey; }#iconfont-slider{ width: 1%; cursor: pointer; /* border: 1px solid black; */ height: 1%; position: relative; /* left: 99%; */}body{ display: flex; justify-content: center;}.musicplayer{ width: 80%; height: auto; border: 1px solid black; display: flex; justify-content: center; align-items: center; flex-direction: column}.cover{ border: 1px solid black;}.slider{ display: flex; width: 100%; height: auto; border: 1px solid black; justify-content: space-between; align-items: baseline; }.slider>div:nth-child(1){ /* border: 1px solid black; */ flex-grow: 1;}.slider>div:nth-child(2){ border-left: 1px solid black; border-right: 1px solid black; flex-grow: 100; }.slider>div:nth-child(3){ /* border: 1px solid black; */ flex-grow: 1;}.time{ font-size: 14px; text-align: center; position: relative;}/* .press{ border: 1px solid black;} */.list{ border: 1px solid black; width: 100%; cursor: pointer;}.listol>li:hover{ background-color: darkgrey;}.lrc{ border: 1px solid black;}关键词：音乐,入门,自学
