在网易云的歌曲页中, 我们看到有一个封面. 当音乐播放时, 封面转动.
首页让我们更新下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()
})