jquery + ajax + 面向对象实现YYM音乐播放器
自己偶然看电视看到的一个音乐FM播放器,满屏(大屏页面),感兴趣就写了这个项目,可以在不同大屏幕上播放,PC端布局,比例协调
- 页面的响应式
- 音乐的播放 暂停 下一曲
- 不同音乐类型数据的获取,数据过多,切换下一页
- 歌词的处理
问题一: PC页面的响应式
因为要实现不仅宽度上随页面的变化而比例协调,高度充满,也是响应式,所以 px 单位就不太合适了,使用新出的单位 vh 更合适,不仅高度上10vh 随着页面高度变化,而且font-size大小也可以随着屏幕变化而变化,比百分比的效果更好一点,
总结上,宽度上加一些响应式, 高度满屏,需要高度上使用vh单位
- 设置 @media 宽度上响应
.layout {
margin: 0 auto;
width: 600px;
}
@media (min-width: 700px) {
.layout {
width: 600px;
}
}
...
@media (min-width: 1200px) {
.layout {
width: 1100px;
}
}
<figure>图片不设置src,为了更好的适配,设置background
问题二: 音乐的播放 暂停
- Audio API的使用
//创建audio标签
this.audio = new Audio()
autoplay = true // 自动播放
play() // 播放事件
pause() // 暂停事件
currentTime // 设置或返回音频/视频播放的当前位置
duration // 获取音乐长度，单位为秒。
onended // 在视频/音频（audio/video）播放结束时触发。
问题三: 音乐类型过多,左右切换问题
点击左右按钮ul滚动距离和滚的最后不能再滚动了,由于经验不足,逻辑有些地方思考不太清晰,在这里遇到了问题,解决:
R.on('click',function(){
$ul.animate({
left: '-=' + $box.width() //移动的box宽度,但图片会出现一半一半的情况
解决1: left: '-=' + rowCount*itemWidth // box里面li的个数 * 每个li的宽度,解决了出现一半一半的问题
})
})
问题2:点击到最后一个类型,再次点击没有效果,不知道判断条件
解决: 判断box的宽度 + 滚动距离左边的距离 是否 > ul 的宽度,如果大于,条件不成立
this.isToEnd = false //判断您点击轮播是不是到最后了
this.isToStart = true
if(!this.isToEnd){
this.isToStart = false //设置往右滚动状态为false
//条件成立,设置状态为true
if(parseFloat(_this.$box.width()) - parseFloat(_this.$ul.css('left')) >= parseFloat(_this.$ul.css('width')) ){
_this.isToEnd = true
}
}
L.on('click',function(){
if (!_this.isToStart) { // 当点击右图片向左滚动时, toStart为false
_this.$ul.animate({
left: '+=' + rowCount*itemWidth
},400,function(){
_this.isToEnd = false // toEnd为false, 可以点击向右滚动
//如果盒子的宽度+ 往左偏移的宽度 >= ul的宽度
if(parseFloat(_this.$ul.css('left')) >= 0){
_this.isToStart = true // 设为true,禁止再往右滚动
}
})
}
})
问题3: 当点击过快时,会出现动画不连续问题
解决: 加一个状态锁
问题四: 歌词的处理
- 如何解析歌词与时间对应
[00:56.00][02:36.00]我在怀疑该不该躲避 该不该躲这场雨
var arr = lyric.split('\n') // 得到一个数组
arr.forEach // 遍历数组
var times = line.match(/\d{2}:\d{2}/g) // 匹配时间
var str = line.replace(/\[.+?\]/g, '') // 匹配歌词
// 判断数组time是否是数组存在
if (Array.isArray(times)) {
times.forEach(function(time){
lyricobj[time] = str
})
}
- 如何写一个jquery插件
$.fn.functionName = function() {} // 插件写法
$('element').functionName() // 使用
# 用了Animata.css, 让歌词变得不那么平淡
$.fn.boomText = function(type){
type = type || 'rollIn' // animate.min.css 动画库
this.html(function(){
var arr = $(this).text()
.split('').map(function(word){
return '<span class="boomText">'+ word + '</span>'
})
return arr.join('')
}) // 把html里面的东西分割,变成一个字符
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)
}
- 使用gulp打造前端工作流，打包、压缩、合并
- 创建
gulpfile.js
var gulp = require('gulp')
var htmlmin = require('gulp-htmlmin') // html压缩
var concat = require('gulp-concat') // 合并文件
var rename = require('gulp-rename') // 重命名
var minifycss = require('gulp-minify-css') // CSS压缩
var jshint = require('gulp-jshint') //js代码规范性检查
var uglify = require('gulp-uglify') // js压缩
var imagemin = require('gulp-imagemin') //图片压缩
var clean = require('gulp-clean') //清空文件夹
gulp.task('html', function(){
return gulp.src('src/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
})
gulp.task('css', function(){
return gulp.src('src/css/*.css')
.pipe(concat('merge.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css/'))
})
gulp.task('js', function(argument) {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
});
gulp.task('img', function(argument){
gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'));
});
gulp.task('clear', function(){
gulp.src('dist/*',{read: false})
.pipe(clean());
});
gulp.task('build', ['html', 'css', 'js', 'img']);