每天看一片代码系列（三）：codepen上一个音乐播放器的实现

今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子，效果还是很赞的： codePen地址

HTML部分

首先我们要思考一下，一个播放器主要包含哪些元素。首先要有播放的进度信息，还有播放/暂停或者上一首下一首等必要的按钮，同时还要显示一些当前播放的音乐名称等信息。播放多首歌曲时，要显示播放列表。。。因此，从语义上可以构造出基本的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部分

接下来看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

JS部分

最后我们要看的是交互部分。交互主要包括：

1. 换歌：在列表中高亮当前播放的歌曲，切换背景图片，播放
2. 播放：播放声音，调整进度条，显示正确的按钮背景
3. 上一条/下一条：=换歌，但还要考虑到第一首和最后一首的特殊情况
4. 暂停/恢复：暂停/恢复音频的播放，显示正确的按钮背景
5. 进度条点击：更新当前播放的时间点

总之，包含的有：currentAudio, isPlaying, audioPosition这几个状态信息。

比如点击了下一首，它会做这么几个交互上的改变：

1. 按钮背景有一个状态按下的效果
2. 停止当前歌曲的播放
3. 重置进度条的位置
4. 歌曲列表当前项显示有更新
5. 顶部的封面有更新
6. 如果当前isPlaying为true，则播放歌曲，更新进度条

    //
    if(this.classList[0] !== "shadow")
          {
            for(var x = 0; x < audioControls.children.length; x++)
            {
              audioControls.children[x].classList.remove("shadow");
            }

            this.classList.add("shadow");
          }

    //
    audio.currentTime = 0;
    clearInterval(timer);

     //
     updateProgressBarPosition()

    //
    updateActiveTrack(currentTrack);

    //
     changeBackgroundImage(artwork, artworkSrc);

    //
    audio.play();
    audioState = "play";
    changeBackgroundImage(play, iconsFolder + "pause.png");

    // Update the time
    timer = setInterval(
      function()
      {
        updateTime();
      },
      100
    );