效果圖
gif
gif
gif
GitHub地址即項(xiàng)目搭建本地說(shuō)明
需要使用網(wǎng)易云的接口 所以先克隆接口
https://github.com/Binaryify/NeteaseCloudMusicApi
npm install 下載全部依賴(lài)包
node app.js node啟動(dòng)項(xiàng)目
仿網(wǎng)易云Project地址
https://github.com/LanHai1/palyer
npm run serve 開(kāi)啟服務(wù) <根據(jù)終端提示開(kāi)啟網(wǎng)頁(yè)即可>
/* 項(xiàng)目中有很詳細(xì)的注視 供參考 */
項(xiàng)目總結(jié)
- 使用到的插件有
axios<接口資源請(qǐng)求>
iscroll<滾動(dòng)插件>
- VUE在methods方法中調(diào)用filters里的過(guò)濾器的方法
this.$options.filters.過(guò)濾器名字
- VUE父組件調(diào)用子組件中的方法
父組件里面需要給子組件設(shè)置ref
再通過(guò)父組件的方法中使用 this.$refs.(ref的值).(子組件的方法名)()
- VUE全局導(dǎo)入包
/*mian.js 導(dǎo)入 axios*/
import axios from "axios";
/*全局配置axios*/
Vue.prototype.$axios = axios;
/*組件中直接this.$axios 使用即可*/
- 根據(jù)回車(chē)切割成數(shù)組
string.split(/\n/)
- 按空格和換行切割
string.split(/[\s\n]/)
- 刪除字符串的最后一個(gè)字符
string.substr(0, str.length - 1)
- 將時(shí)間戳轉(zhuǎn)換為日期時(shí)間
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");
//播放(繼續(xù)播放)
audio.play();
//暫停
audio.pause();
//停止
audio.pause();
audio.currentTime = 0;
//重新播放
audio.currentTime = 0;
audio.play();
- 文本溢出隱藏 省略號(hào)顯示
/*需要為這個(gè)元素設(shè)置寬度*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- 時(shí)長(zhǎng)處理(歌曲)
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;
}
- 多個(gè)歌手名數(shù)據(jù)拼接處理
formatSinger(singer) {
let allSinger = "";
singer.forEach(val => {
allSinger += val.name + "/";
});
// 刪除字符串的最后一個(gè)字符
return allSinger.substr(0, allSinger.length - 1);
}
- 解析LRC歌詞
formatLyric(val) {
// 從尾部查找
if (val.lastIndexOf("]") != "-1") {
// 返回索引位置到字符串的結(jié)尾
return val.slice(val.lastIndexOf("]") + 1);
} else {
return val;
}
}
