html简易音乐播放器带列表（web前端学习教程html5小型网页）
一款UI界面非常简洁美观的html5小型网页mp3音乐播放器开发，暂停播放、歌曲切换、进度条等基本功能都有。
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Music Player | Audio Player </title> <!--字体图标样式--> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/solid.css'> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css'> <!--布局样式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- Tracks used in this music/audio player application are free to use. I downloaded them from Soundcloud and NCS websites. I am not the owner of these tracks. Please don't create new pen by just copying and pasting code from this pen ( as I have seen some of them ), if you do that then don't forget to link back to this original pen. If you want to copy this pen then simply use the Fork button. Thank you --> <div id="app-cover"> <div id="bg-artwork"></div> <div id="bg-layer"></div> <div id="player"> <div id="player-track"> <div id="album-name"></div> <div id="track-name"></div> <div id="track-time"> <div id="current-time"></div> <div id="track-length"></div> </div> <div id="s-area"> <div id="ins-time"></div> <div id="s-hover"></div> <div id="seek-bar"></div> </div> </div> <div id="player-content"> <div id="album-art"> <img src="http://img.studyofnet.comimg/1.jpg" class="active" id="_1"> <img src="http://img.studyofnet.comimg/2.jpg" id="_2"> <img src="http://img.studyofnet.comimg/3.jpg" id="_3"> <img src="http://img.studyofnet.comimg/4.jpg" id="_4"> <img src="http://img.studyofnet.comimg/5.jpg" id="_5"> <div id="buffer-box">缓冲…</div> </div> <div id="player-controls"> <div class="control"> <div class="button" id="play-previous"> <i class="fas fa-backward"></i> </div> </div> <div class="control"> <div class="button" id="play-pause-button"> <i class="fas fa-play"></i> </div> </div> <div class="control"> <div class="button" id="play-next"> <i class="fas fa-forward"></i> </div> </div> </div> </div> </div> </div> </body> </html>
源码运行效果截图：
大家需要这个项目css代码，js，图片做练习的可以找我免费领取，如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字 找我领取 24小时在线！
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
