标签：
今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子，效果还是很赞的： codePen地址
首先我们要思考一下，一个播放器主要包含哪些元素。首先要有播放的进度信息，还有播放/暂停或者上一首下一首等必要的按钮，同时还要显示一些当前播放的音乐名称等信息。播放多首歌曲时，要显示播放列表。。。因此，从语义上可以构造出基本的HTML结构：
// 背景区块，用于显示当前播放音乐的图片 <div class=‘background‘ id=‘background‘></div> // 播放器区块 <div id=‘player‘> <audio id=‘mytrack‘ src=‘‘></audio> //顶部区域，只显示一幅画 <div id=‘artwork‘></div> // 播放列表 <div id=‘tracks‘> <div trackartist=‘Tobu & Syndec‘ trackname=‘Dusk‘ trackartwork=‘01.jpg‘></div> <div trackartist=‘Disfigure‘ trackname=‘Blank‘ trackartwork=‘02.jpg‘></div> <div trackartist=‘Alan Walker‘ trackname=‘Fade‘ trackartwork=‘03.jpg‘></div> </div> //播放器的UI部分 <div id=‘ui‘> //播放器已播放时间和总的时间 <div id="time"> <span id=‘elapsedtime‘>00:00</span> <span id=‘totaltime‘>00:00</span> </div> //进度条 <div id=‘progressbar‘> <div> <span id=‘pointer‘></span> </div> </div> // 播放器控件 <div id=‘controls‘> <button id=‘prev‘ class=‘control‘></button> <button id=‘play‘ class=‘control‘></button> <button id=‘stop‘ class=‘control‘></button> <button id=‘next‘ class=‘control‘></button> </div> </div> </div>
接下来看css部分。首先将player区块进行了居中，并添加了背景和阴影：
#player
width: 300px
position: absolute
left: 50%
top: 50%
box-shadow: 0px 5px 10px #000
background-color: $color4
transform: translate(-50%, -50%)
-o-transform: translate(-50%, -50%)
-moz-transform: translate(-50%, -50%)
-webkit-transform: translate(-50%, -50%)
对于顶部的图像区块，设置充满宽度，并设置图像水平和垂直方向都居中，当图像切换时，增加了1s的过渡效果。
#artwork
width: 100%
height: 0
padding-bottom: 100%
display: block
position: relative
overflow: hidden
background-image: url("../artworks/01.jpg")
background-repeat: no-repeat
background-size: cover
background-position: center center
transition: background 1s ease 0s
-o-transition: background 1s ease 0s
-moz-transition: background 1s ease 0s
-webkit-transition: background 1s ease 0s
这里将height设置为0，然后padding-bottom设置为100%(相对与父元素的宽度)，由于它的宽和父元素的宽相同，结果就是将它的宽和高设成相同，即300px * 300px。
播放列表区块首先是一个列表，因此我们直观地想到了用ul/li来实现，但是这里用的是将父元素设置display：table，然后每项的图片和名字设置为display: table-cell的形式:
#tracks
width: 100%
display: block
overflow: hidden
background-color: #fff
div
width: 100%
display: table
background-color: #fff
transition: all 0.5s ease 0s
-o-transition: all 0.5s ease 0s
-moz-transition: all 0.5s ease 0s
-webkit-transition: all 0.5s ease 0s
cursor: pointer
span
margin-right: 10px
display: table-cell
padding: 0px 10px
height: 50px
line-height: 50px
font-size: 1.2em
color: #aaa
artwork
text-align: center
display: table-cell
width: 50px
background-repeat: no-repeat
background-size: cover
background-position: center center
UI区块是重点，主要包括时间、进度条和控件三个部分。时间按理来说在布局上比较简单，但这里它又用到了我们想不到的display:list-item来实现（相当于ul，其实我觉得这里没有写这些），然后又用了css3中的first-of-type伪类用来匹配该类型的第一个元素等。
进度条主要是通过将div的宽度逐渐增大并进行过渡。还有一个pointer，通过将它的背景设置为发亮，表明当前播放的位置。
#progressbar
width: 100%
display: block
overflow: hidden
height: $progressHeight
background-color: $color4 - 10
cursor: pointer
div
width: 0%
height: $progressHeight
display: block
float: left
background-color: $color3 - 40
transition: width 0.1s ease 0s
-o-transition: width 0.1s ease 0s
-moz-transition: width 0.1s ease 0s
-webkit-transition: width 0.1s ease 0s
#pointer
width: 4px
height: $progressHeight
display: block
float: right
background-color: $color3
transform: translate(100%,0)
最后是控件部分。每个控件的宽度设为25%向左浮动，并再次用到了display:list-item
.control
width: 25%
height: 50px
float: left
display: list-item
list-style: none
background-repeat: no-repeat
background-color: transparent
background-size: 20px
background-position: center center
transition: background 0.1s ease 0s
-o-transition: background 0.1s ease 0s
-moz-transition: background 0.1s ease 0s
-webkit-transition: background 0.1s ease 0s
&:hover
cursor: pointer
最后我们要看的是交互部分。交互主要包括：
总之，包含的有：currentAudio, isPlaying, audioPosition这几个状态信息。
比如点击了下一首，它会做这么几个交互上的改变：
// 1 if(this.classList[0] !== "shadow") { for(var x = 0; x < audioControls.children.length; x++) { audioControls.children[x].classList.remove("shadow"); } this.classList.add("shadow"); } // 2 audio.currentTime = 0; clearInterval(timer); // 3 updateProgressBarPosition() // 4 updateActiveTrack(currentTrack); // 5 changeBackgroundImage(artwork, artworkSrc); // 6 audio.play(); audioState = "play"; changeBackgroundImage(play, iconsFolder + "pause.png"); // Update the time timer = setInterval( function() { updateTime(); }, 100 );
每天看一片代码系列（三）：codepen上一个音乐播放器的实现
标签：
原文地址：http://www.cnblogs.com/cubika/p/4440159.html
