時間：2023-07-23 07:24:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-07-23 07:24:01 來源：網(wǎng)站運(yùn)營
自學(xué)前端出入門，我的自制HTML音樂播放器：本人學(xué)的機(jī)械，工作中無聊所致，偶爾碼碼代碼，不懂什么算法，不懂什么數(shù)據(jù)結(jié)構(gòu)，更分不清面向?qū)ο笠约邦惡秃瘮?shù)編程的區(qū)別和意義，因為讀大學(xué)那陣子學(xué)的c語言，沒接觸過什么面向?qū)ο蠛皖惥幊獭？樟舜a碼代碼，心血來潮看看HTML+JS+CSS搞了個半成品音樂播放器，css部分幾乎沒有美化，屬于處處處處處處處處處級入門，請大神勿噴，若看得起小的，給點講解，我定當(dāng)萬分感謝，下面直接上丑陋代碼！這篇文僅僅作為學(xué)習(xí)中的記錄用，說不定永遠(yuǎn)不更新！
在線咨詢
<!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部分控制網(wǎng)頁操作var playedflag = 0 //全局變量判斷音樂是否在播放var dotmoved //全局變量判斷進(jìn)度條是否移動，返回值為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' } }}//用來改變字體顏色的函數(shù)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事件，監(jiān)聽時長改變?nèi)缓螳@取整段時間 var str = decodeURIComponent(document.getElementById('audio').currentSrc) //decodeURIComponent()用來解碼中文字 musicListColorChange() // console.log(str) }) //為什么一定要放到這個時間改變的監(jiān)聽函數(shù)才能改變到正確的音樂播放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) //按照分秒格式化后的正在播放的時間，用于顯示在網(wǎng)頁上 document.getElementsByClassName('time')[0].innerHTML = musiccurrenttime //顯示整段音樂正在播放的時間 sliderdot.style.left = 99 * movecurrenttime / movetime + '%' //iconfont-slider用了1%的大小所以整段長度不是100%用99%就夠了，否則會超出整長}function musicPlay() { if (playedflag > 0) { return //如果已經(jīng)播放再按播放按鍵無效 } else { document.getElementById('audio').play() document.getElementById('audio').addEventListener('timeupdate', move) document.getElementsByClassName('time')[1].innerHTML = convertMsicTime(document.getElementById('audio').duration) //顯示整段音樂的時間,按照分秒格式化后的時間，用于顯示在網(wǎng)頁上 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所謂的美化，其實啥也沒干！待后續(xù).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;}關(guān)鍵詞：音樂,入門,自學(xué)
客戶&案例
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
