丰富歌曲页页面

在网易云的歌曲页中, 我们看到有一个封面. 当音乐播放时, 封面转动.

首页让我们更新下song.html的页面结构:

<div class="page" id="app">
        <audio src="#"></audio>
        <div class="disc-container">
            <img class="pointer" src="" alt=""><!--链接略-->
            <div class="disc">
                <div class="icon-wrapper">
                    <svg class="icon icon-play">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <svg class="icon icon-pause">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                </div>
                <img class="ring" src="" alt=""><!--链接略-->
                <img class="light" src="" alt=""><!--链接略-->
                <img class="cover" src="" alt=""><!--通过song/app.js获取封面-->
            </div>
        </div>
        <div class="song-description">
            <h1>{{name}}</h1><!--通过song/app.js获取歌名-->
            <div class="lyric">
                <div class="lines">
                    <!--通过song/app.js获取歌词-->
                </div>
            </div>
        </div>
        <div class="links">
            <a href="#">打开</a>
            <a class="main" href="#">下载</a>
        </div>
    </div>

这一节我们先不获取歌词. 现将封面做好. 在song.html中引入css. 我们先看最后的结果如图:

可以看到, 封面上有一个播放/暂停按钮, 那是通过svg实现的. 下方是一个歌名(歌名下还有个歌词, 下一节做). 封面后面还有一个背景图片. 而且在播放时, 封面转动, 暂停时, 封面停止转动.

在前面的几节中, 并没有考虑封面, 不过这不用担心, 我们在前面的代码中加上即可. 本节不讨论.

render(data) {
    let {song, status} = data
    //渲染页面
      $(this.el).css('background-image', `url(${song.cover})`)//添加背景
      $(this.el).find('img.cover').attr('src', song.cover)//添加封面
      $(this.el).find('.song-description > h1')[0].innerText = song.name//添加歌名

      if ($(this.el).find('audio').attr('src') !== song.url) {
       $(this.el).find('audio').attr('src', song.url)
        }
        //控制封面转动
      if (status === 'playing') {
          $(this.el).find('.disc-container').addClass('playing')
      } else {
          $(this.el).find('.disc-container').removeClass('playing')
      }
}

render(data)用于渲染页面.
封面根据是否播放来转动. 我们需要监听click事件.

 $(this.view.el).on('click', '.icon-play', ()=>{
      this.model.data.status = 'playing'
      this.view.render(this.model.data)
      this.view.play()
  })
  $(this.view.el).on('click', '.icon-pause', ()=>{
      this.model.data.status = 'pasued'
      this.view.render(this.model.data)
      this.view.pause()
  })