web前端学习教程，html5小型网页，mp3音乐播

web前端学习教程，html5小型网页，mp3音乐播放器开发

款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="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>

源码运行效果截图：

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

下来我们开始制作播放按钮：

默认图标的颜色是黑色，而且字体很小，我们需要对这个图标进行css样式美化和绝对定位。

接下来，我们给这个播放按钮添加一个点击事件，点击之后就播放一首歌曲。

然后，在body区域随便添加一个audio标签，用于播放音乐。

在项目根目录新建一个mp3文件夹，专门用来存放歌曲：

现在编写playMusic方法，去播放01.MP3。

接下来做一个音乐播放时候的旋转效果，用css3中的keyframes来做。

当点击播放按钮的时候，就给当前对象（i标签）添加一个旋转的class。

完成！

者：vipbic

转发链接：https://segmentfault.com/a/1190000022980992

在线咨询

上一篇：父组件如何在子组件上绑定事件，.native的用法
下一篇：JavaAPI开发（2）JavaMail-如何用Ja

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端学习教程，html5小型网页，mp3音乐播

项目源码分享：

源码运行效果截图：

您的项目需求