音乐播放主要用到HTML5元素中的audio属性
接下来我们开始写:
先布好局
<div class="music">
<div class="musicL">
<i class="iconfont icon-shangyishou"></i>
<span class="play" id="play">
<i class="iconfont icon-bofang"></i>
</span>
<i class="iconfont icon-xiayishou"></i>
</div>
<div class="progress">
<span class="start_time" id="start_time">00:00</span>
<div class="load" id="load">
<div class="circle" id="circle">
<div class="round" id="round">
</div>
</div>
</div>
<span class="total_time" id="total_time">00:00</span>
</div>
</div>
<audio id="audio" autoplay="autoplay"></audio>
<div class="music_list">
<ul>
<li class="title"><span><b>歌曲列表</b></span></li>
</ul>
</div>
加上样式
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.music {
width: 500px;
height: 40px;
background: #242424;
margin: 20px auto;
line-height: 40px;
}
.musicL {