时间：2023-07-22 09:24:01 | 来源：网站运营
时间：2023-07-22 09:24:01 来源：网站运营
手把手教你用HTML/CSS/JS写一个属于自己的音乐播放器：温馨提示：阅读本篇文章需要一定的HTML/CSS/JS基础，没有应该也能看（看得看不懂就不知道了）首先，梳理一下我们要实现哪些功能：在码代码之前先整一下文件夹安排
1.对应显示歌曲列表和歌词
2.单击播放|暂停、上下首时实现对应功能，歌词也要对应改变，上一首歌曲播完后自动切换下一首（核心）
3.让标题，各部分，结尾显示在相应的地方
4.背景图片根据屏幕大小等比例缩放显示
5.显示歌曲播放进度条，单击进度条某一位置时，歌曲就播到此位置 //TODO
在线咨询
<!DOCTYPE html><html> <head> <title>网页标题</title> <link rel="stylesheet" type="text/css" href="css/css文件.css"> </head> <body> <!--功能实现--> <script src="js/js文件.js" type="text/javascript"></script> </body></html>下面咱们一个一个实现相应功能。color: white; -webkit-text-stroke: 2px black;border-color: bisque; /*陶坯黃*/border-width: 10px;border-radius: 5%;border-style: ridge; 滚动条就更简单了，只需要overflow-y:scroll;overflow-x:hidden;下面来进行第二步var song_list=["song1","song2","song3"...];var lyrics_list=["lyrics1","lyrics2","lyrics3"...];var i = 0; //初始默认第一首歌曲温馨提示：歌词里面需要加<br>来实现换行哦<a href="#" onclick="fire()">Fire -Gavin DeGraw</a>然后在JS中，创建一个fire()函数，实现单击时改变歌词，播放歌曲function fire(){ i=0; var FilePath=FilePath1+song_list[i]+FilePath2; obj.setAttribute('src',FilePath); //这里实现播放音乐 document.getElementById("lyrics").innerHTML=lyrics_list[i];}至此，第一小步完成<img src="./image/next.png" onmousedown="next()" alt="next"><img src="./image/stop.png" onmousedown="play()" alt="user" id="musicImg"><img src="./image/previous.png" onmousedown="previous()" alt="previous">基本原来就是：当单击图片时，如果音乐正在播放，那么暂停；如果暂停，那么播放function play() { if (obj.paused) { //如果暂停 obj.play(); //播放音乐 document.getElementById('musicImg').src="./image/playing.png"; //改变图片 }else{ //如果播放（如果不是暂停） audio.pause(); //暂停音乐 //audio.currentTime = 0; 这句可以让音乐从头播放 document.getElementById('musicImg').src="./image/stop.png"; //改变图片 }}这样play()函数就基本完成了function next(){ if(i<2){ //这里我为了省事就直接写了2，也就是三首 i+=1; } else{ i=0; } //后面一样 var FilePath=FilePath1+song_list[i]+FilePath2; obj.setAttribute('src',FilePath); document.getElementById('musicImg').src="./image/playing.png"; //别忘了改变图片哦 document.getElementById("lyrics").innerHTML=lyrics_list[i];}previous()也一样，这里就不再细说了h2.lyrics{ position:relative; left:68%; top: 30%;}等等等等<body background="背景图片路径" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment: fixed;"></body>挺管用，就直接拿了用了关键词：音乐,把手
