web前端学习教程,html5小型网页,mp3音乐播放器开发「终于解决」

web前端学习教程,html5小型网页,mp3音乐播放器开发「终于解决」 Tracks used in this music/audio player application are free to use. I

欢迎大家来到IT世界,在知识的湖畔探索吧!

一款UI界面非常简洁美观的html5小型网页mp3音乐播放器开发,暂停播放、歌曲切换、进度条等基本功能都有。

web前端学习教程,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="img/1.jpg" class="active" id="_1">
 <img src="img/2.jpg" id="_2">
 <img src="img/3.jpg" id="_3">
 <img src="img/4.jpg" id="_4">
 <img src="img/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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

源码运行效果截图:

web前端学习教程,html5小型网页,mp3音乐播放器开发「终于解决」

大家需要这个项目css代码,js,图片做练习的可以找我免费领取,如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字 找我领取 24小时在线!

web前端学习教程,html5小型网页,mp3音乐播放器开发「终于解决」

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/17906.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信