难点
1.歌词实现
/*歌词处理*/
loadLyric: function() {
var _this = this
$.getJSON('//jirenguapi.applinzi.com/fm/getLyric.php', {sid: this.song.sid}).done(function(ret){
var lyric = ret.lyric
var lyricObj = {}
/*吧歌词变成key-value的形式 */
lyric.split('\n').forEach(function(line){
//[01:20:20][01:30:25] hello
var times = line.match(/\d{2}:\d{2}/g)
//times == ['01:20:20','01:30:25']
var str = line.replace(/\[.+?\]/g, '')
if(Array.isArray(times)){ //有些时段没有歌词，所以有个时间匹配，否则出现undefined
times.forEach(function(time){
lyricObj[time] = str
})
}
})
_this.lyricObj = lyricObj
//console.log(lyricObj)
})
}
/*状态更新*/
updataStatus(){
/*歌曲的时间*/
var duration = this.formateTime(this.audio.duration)
var current = this.formateTime(this.audio.currentTime)
this.$container.find('.current-time').text(this.formateTime(this.audio.currentTime))
this.$container.find('.duration-time').text(duration)
/*进度条*/
this.$container.find('.bar-progress').css('width', this.audio.currentTime/this.audio.duration*100 +'%')
/*对应时间展示对应歌词*/
var line = this.lyricObj['0'+current]
if(line){
this.$container.find('.lyric p').text(line).boomText()
}
}
2. 事件交互
- 自定义事件
//自定义事件（事件中心）所有模块都与这个事件中心进交互。
var EventCenter = {
on: function (type, handler) {
$(document).on(type, handler)
},
fire: function (type, data) {
$(document).trigger(type, data)
}
}
/* 监听hello这个事件，然后执行后面的函数*/
// EventCenter.on('hello', function(e, data){
// console.log(data)
// })
/*自定义一个hello的事件*/
// EventCenter.fire('hello','你好')
先fire一个自定义事件，然后两个板块通过监听这个自定义事件进行交互，减少耦合。
this.$footer.on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
/*自定义select-albumn事件，获取并发送里面的自定义属性{data-channel-id，data-channel-name}，之后歌曲切换需要*/
EventCenter.fire('select-albumn', {
channelId: $(this).attr('data-channel-id'),
channelName: $(this).attr('data-channel-name')
})
})
/*监听自定义事件和事件发过来的对象数据*/
EventCenter.on('select-albumn', function(e, channelObj){
_this.channelId = channelObj.channelId
_this.channelName = channelObj.channelName
_this.loadMusic()
})
自定义事件的作用主要是让，后台知道用户点了那个歌单，然后加载对应歌单的音乐。
3. JQuery插件开发项目歌词的炫酷效果
例子：
$.fn.boomText = function(){
var str = this.text()
this.text(str.split('').reverse().join(''))
}
写一个插件，$.fn.函数名 = function(){}
用法：$（选择元素）.函数名（）
<body>
<p>欢迎来到饥人谷</p>
<div class="hello">hello</div>
</body>
<script>
$.fn.boomText = function(type){
//css3的语法动画
type = type || 'rollIn'
//给每个字都裹上一个`span`再赋值给原来的html，通过操作每个字实现歌词动画
this.html(function(){
var arr = $(this).text()
.split('').map(function(word){
return '<span class="boomText" style="display:inline-block">'+ word + '</span>'
})
return arr.join('')
})
//每隔300毫秒给每个字加上一个标签`'animated ' + type`， 使它有对应的动画效果。
var index = 0
var $boomTexts = $(this).find('span')
var clock = setInterval(function(){
$boomTexts.eq(index).addClass('animated ' + type)
index++
if(index >= $boomTexts.length){
clearInterval(clock)
}
}, 300)
}
$('p').boomText('zoomIn')
$('.hello').boomText()
</script>
效果展示·
网友评论