效果图
gif
gif
gif
GitHub地址即项目搭建本地说明
需要使用网易云的接口 所以先克隆接口
https://github.com/Binaryify/NeteaseCloudMusicApi
npm install 下载全部依赖包
node app.js node启动项目
仿网易云Project地址
https://github.com/LanHai1/palyer
npm run serve 开启服务 <根据终端提示开启网页即可>
/* 项目中有很详细的注视 供参考 */
项目总结
- 使用到的插件有
axios<接口资源请求>
iscroll<滚动插件>
- VUE在methods方法中调用filters里的过滤器的方法
this.$options.filters.过滤器名字
- VUE父组件调用子组件中的方法
父组件里面需要给子组件设置ref
再通过父组件的方法中使用 this.$refs.(ref的值).(子组件的方法名)()
- VUE全局导入包
/*mian.js 导入 axios*/
import axios from "axios";
/*全局配置axios*/
Vue.prototype.$axios = axios;
/*组件中直接this.$axios 使用即可*/
- 根据回车切割成数组
string.split(/\n/)
- 按空格和换行切割
string.split(/[\s\n]/)
- 删除字符串的最后一个字符
string.substr(0, str.length - 1)
- 将时间戳转换为日期时间
translateDate: function(current_date) {
let date = new Date(current_date);
let datetime =
date.getFullYear() +
"-" +
(date.getMonth() + 1 >= 10
? date.getMonth() + 1
: "0" + (date.getMonth() + 1)) +
"-" +
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
" " +
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
":" +
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
return datetime;
}
- 视频或音频
var audio = document.getElementById("bgMusic");
//播放(继续播放)
audio.play();
//暂停
audio.pause();
//停止
audio.pause();
audio.currentTime = 0;
//重新播放
audio.currentTime = 0;
audio.play();
- 文本溢出隐藏 省略号显示
/*需要为这个元素设置宽度*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 时长处理(歌曲)
formatTime(time) {
// 分钟
const minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
// 秒
const seconds =
Math.ceil((time % (1000 * 60)) / 1000) == 10
? Math.ceil((time % (1000 * 60)) / 1000)
: Math.ceil((time % (1000 * 60)) / 1000) > 10
? Math.ceil((time % (1000 * 60)) / 1000)
: "0" + Math.ceil((time % (1000 * 60)) / 1000);
return minutes + ":" + seconds;
}
- 多个歌手名数据拼接处理
formatSinger(singer) {
let allSinger = "";
singer.forEach(val => {
allSinger += val.name + "/";
});
// 删除字符串的最后一个字符
return allSinger.substr(0, allSinger.length - 1);
}
- 解析LRC歌词
formatLyric(val) {
// 从尾部查找
if (val.lastIndexOf("]") != "-1") {
// 返回索引位置到字符串的结尾
return val.slice(val.lastIndexOf("]") + 1);
} else {
return val;
}
}
