+
+
+
+ 网抑云
+ 是由yigencong开源的一款在线音乐播放器，具有音乐搜索、播放、歌词显示、播放历史、查看歌曲评论、网易云用户歌单播放同步等功能
+
+
+
+
diff --git a/public/prompt.html b/public/prompt.html
new file mode 100644
index 0000000..1b52844
--- /dev/null
+++ b/public/prompt.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/screenshots/1.jpg b/screenshots/1.jpg
new file mode 100644
index 0000000..0453940
Binary files /dev/null and b/screenshots/1.jpg differ
diff --git a/screenshots/2.jpg b/screenshots/2.jpg
new file mode 100644
index 0000000..6d02c13
Binary files /dev/null and b/screenshots/2.jpg differ
diff --git a/screenshots/3.jpg b/screenshots/3.jpg
new file mode 100644
index 0000000..67e7cf5
Binary files /dev/null and b/screenshots/3.jpg differ
diff --git a/screenshots/4.jpg b/screenshots/4.jpg
new file mode 100644
index 0000000..7134285
Binary files /dev/null and b/screenshots/4.jpg differ
diff --git a/screenshots/5.jpg b/screenshots/5.jpg
new file mode 100644
index 0000000..5559f00
Binary files /dev/null and b/screenshots/5.jpg differ
diff --git a/screenshots/6.jpg b/screenshots/6.jpg
new file mode 100644
index 0000000..f0017ef
Binary files /dev/null and b/screenshots/6.jpg differ
diff --git a/screenshots/7.jpg b/screenshots/7.jpg
new file mode 100644
index 0000000..3d9b9f7
Binary files /dev/null and b/screenshots/7.jpg differ
diff --git a/screenshots/8.jpg b/screenshots/8.jpg
new file mode 100644
index 0000000..ac58378
Binary files /dev/null and b/screenshots/8.jpg differ
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..9c463a9
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,109 @@
+
+  |
+ wangyiyun | 温馨提示 | +
| 很抱歉！为了更好的体验，本站限制以下浏览器访问： | |
| IE浏览器和使用IE内核的浏览器 | |
| 解决办法：下载其他主流浏览器或者切换浏览器内核为极速内核 |
+
+
+
+
+
+
+
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..9886416
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,119 @@
+import axios from '@/utils/axios'
+import { DEFAULT_LIMIT } from '@/config'
+import { formatSongs } from '@/utils/song'
+
+// 排行榜列表
+export function getToplistDetail() {
+ return axios.get('/toplist/detail')
+}
+
+// 推荐歌单
+export function getPersonalized() {
+ return axios.get('/personalized')
+}
+
+// 歌单详情
+export function getPlaylistDetail(id) {
+ return new Promise((resolve, reject) => {
+ axios
+ .get('/playlist/detail', {
+ params: { id },
+ })
+ .then(({ playlist }) => playlist || {})
+ .then((playlist) => {
+ const { trackIds, tracks } = playlist
+ if (!Array.isArray(trackIds)) {
+ reject(new Error('获取歌单详情失败'))
+ return
+ }
+ // 过滤完整歌单 如排行榜
+ if (tracks.length === trackIds.length) {
+ playlist.tracks = formatSongs(playlist.tracks)
+ resolve(playlist)
+ return
+ }
+ // 限制歌单详情最大 500
+ const ids = trackIds
+ .slice(0, 500)
+ .map((v) => v.id)
+ .toString()
+ getMusicDetail(ids).then(({ songs }) => {
+ playlist.tracks = formatSongs(songs)
+ resolve(playlist)
+ })
+ })
+ })
+}
+
+// 搜索
+export function search(keywords, page = 0, limit = DEFAULT_LIMIT) {
+ return axios.get('/search', {
+ params: {
+ offset: page * limit,
+ limit: limit,
+ keywords,
+ },
+ })
+}
+
+// 热搜
+export function searchHot() {
+ return axios.get('/search/hot')
+}
+
+// 获取用户歌单详情
+export function getUserPlaylist(uid) {
+ return axios.get('/user/playlist', {
+ params: {
+ uid,
+ },
+ })
+}
+
+// 获取歌曲详情
+export function getMusicDetail(ids) {
+ return axios.get('/song/detail', {
+ params: {
+ ids,
+ },
+ })
+}
+
+// 获取音乐是否可以用
+export function getCheckMusic(id) {
+ return axios.get('/check/music', {
+ params: {
+ id,
+ },
+ })
+}
+
+// 获取音乐地址
+export function getMusicUrl(id) {
+ return axios.get('/song/url', {
+ params: {
+ id,
+ },
+ })
+}
+
+// 获取歌词
+export function getLyric(id) {
+ const url = '/lyric'
+ return axios.get(url, {
+ params: {
+ id,
+ },
+ })
+}
+
+// 获取音乐评论
+export function getComment(id, page, limit = DEFAULT_LIMIT) {
+ return axios.get('/comment/music', {
+ params: {
+ offset: page * limit,
+ limit: limit,
+ id,
+ },
+ })
+}
diff --git a/src/assets/background/bg-1.jpg b/src/assets/background/bg-1.jpg
new file mode 100644
index 0000000..2508097
Binary files /dev/null and b/src/assets/background/bg-1.jpg differ
diff --git a/src/assets/background/bg-2.jpg b/src/assets/background/bg-2.jpg
new file mode 100644
index 0000000..ad48da9
Binary files /dev/null and b/src/assets/background/bg-2.jpg differ
diff --git a/src/assets/background/bg-3.jpg b/src/assets/background/bg-3.jpg
new file mode 100644
index 0000000..4bc45f5
Binary files /dev/null and b/src/assets/background/bg-3.jpg differ
diff --git a/src/assets/img/album_cover_player.png b/src/assets/img/album_cover_player.png
new file mode 100644
index 0000000..4fa7cae
Binary files /dev/null and b/src/assets/img/album_cover_player.png differ
diff --git a/src/assets/img/default.png b/src/assets/img/default.png
new file mode 100644
index 0000000..0940ef5
Binary files /dev/null and b/src/assets/img/default.png differ
diff --git a/src/assets/img/player_cover.png b/src/assets/img/player_cover.png
new file mode 100644
index 0000000..5bf2690
Binary files /dev/null and b/src/assets/img/player_cover.png differ
diff --git a/src/assets/img/wave.gif b/src/assets/img/wave.gif
new file mode 100644
index 0000000..aebed01
Binary files /dev/null and b/src/assets/img/wave.gif differ
diff --git a/src/base/wyy-dialog/wyy-dialog.vue b/src/base/wyy-dialog/wyy-dialog.vue
new file mode 100644
index 0000000..63218f3
--- /dev/null
+++ b/src/base/wyy-dialog/wyy-dialog.vue
@@ -0,0 +1,224 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/base/wyy-no-result/wyy-no-result.vue b/src/base/wyy-no-result/wyy-no-result.vue
new file mode 100644
index 0000000..8d0f415
--- /dev/null
+++ b/src/base/wyy-no-result/wyy-no-result.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/base/wyy-progress/wyy-progress.vue b/src/base/wyy-progress/wyy-progress.vue
new file mode 100644
index 0000000..5aba8c0
--- /dev/null
+++ b/src/base/wyy-progress/wyy-progress.vue
@@ -0,0 +1,174 @@
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
diff --git a/src/base/wyy-toast/index.js b/src/base/wyy-toast/index.js
new file mode 100644
index 0000000..88a8b39
--- /dev/null
+++ b/src/base/wyy-toast/index.js
@@ -0,0 +1,39 @@
+import TempToast from './wyy-toast.vue'
+
+let instance
+let showToast = false
+let time // 存储toast显示状态
+const wyyToast = {
+ install(Vue, options = {}) {
+ let opt = TempToast.data() // 获取组件中的默认配置
+ Object.assign(opt, options) // 合并配置
+ Vue.prototype.$wyyToast = (message, position) => {
+ if (showToast) {
+ clearTimeout(time)
+ instance.vm.visible = showToast = false
+ document.body.removeChild(instance.vm.$el)
+ // return;// 如果toast还在，则不再执行
+ }
+ if (message) {
+ opt.message = message // 如果有传message，则使用所传的message
+ }
+ if (position) {
+ opt.position = position // 如果有传type，则使用所传的type
+ }
+ let TempToastConstructor = Vue.extend(TempToast)
+ instance = new TempToastConstructor({
+ data: opt,
+ })
+ instance.vm = instance.$mount()
+ document.body.appendChild(instance.vm.$el)
+ instance.vm.visible = showToast = true
+
+ time = setTimeout(function () {
+ instance.vm.visible = showToast = false
+ document.body.removeChild(instance.vm.$el)
+ }, opt.duration)
+ }
+ },
+}
+
+export default wyyToast
diff --git a/src/base/wyy-toast/wyy-toast.vue b/src/base/wyy-toast/wyy-toast.vue
new file mode 100644
index 0000000..9ea0e2f
--- /dev/null
+++ b/src/base/wyy-toast/wyy-toast.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+ {{ message }}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/music-btn/music-btn.vue b/src/components/music-btn/music-btn.vue
new file mode 100644
index 0000000..7c234b8
--- /dev/null
+++ b/src/components/music-btn/music-btn.vue
@@ -0,0 +1,67 @@
+
+
+ -
+
-
+
+
+
+ - 歌曲名：{{ currentMusic.name }} +
- 歌手名：{{ currentMusic.singer }} +
- 专辑名：{{ currentMusic.album }} + + +
- 网抑云在线音乐播放器 +
-
+
+
+ yigencong + +
+
+
+
+
+
+ 还没有播放音乐哦！
+暂无歌词！
+ ++ {{ item.text }} +
+ +歌词加载失败！
+
+ 正在播放
+ 推荐
+ 搜索
+ 我的歌单
+ 歌词
+ 我听过的
+
+
+
+
+
+
diff --git a/src/components/music-list/music-list.vue b/src/components/music-list/music-list.vue
new file mode 100644
index 0000000..41550b7
--- /dev/null
+++ b/src/components/music-list/music-list.vue
@@ -0,0 +1,379 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/volume/volume.vue b/src/components/volume/volume.vue
new file mode 100644
index 0000000..036da82
--- /dev/null
+++ b/src/components/volume/volume.vue
@@ -0,0 +1,83 @@
+
+
+
+ 歌曲
+ 歌手
+ 时长
+ 专辑
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+ {{ item.singer }}
+
+ {{ item.duration % 3600 | format }}
+
+
+
+
+
+
+
diff --git a/src/components/wyy-header/wyy-header.vue b/src/components/wyy-header/wyy-header.vue
new file mode 100644
index 0000000..a8f8176
--- /dev/null
+++ b/src/components/wyy-header/wyy-header.vue
@@ -0,0 +1,247 @@
+
+
+
+
+
+
+ 网抑云 在线音乐播放器
+
+ ![累计访问数]()
+
+ -
+
+
- 退出 + +
- 登录 +
+
+
+ 帮助
+
+
+ + 1、 + 点我(https://music.163.com) + 打开网易云音乐官网 +
+2、点击页面右上角的“登录”
+3、点击您的头像，进入我的主页
+4、复制浏览器地址栏 /user/home?id= 后面的数字（网易云 UID）
+
+
+
+
+
+
+
diff --git a/src/pages/details/details.vue b/src/pages/details/details.vue
new file mode 100644
index 0000000..e5e22ab
--- /dev/null
+++ b/src/pages/details/details.vue
@@ -0,0 +1,59 @@
+
+
+ -
+
- 最新评论（{{ total }}） +
-
+
+
+ +
+ + {{ item.user.nickname }} + +
+{{ item.content }}
++ + {{ beReplied.user.nickname }} + + ：{{ beReplied.content }} +++ {{ item.time | format }} + +++ {{ item.likedCount }} + +
+
+
+
+
+
+
+
diff --git a/src/pages/historyList/historyList.vue b/src/pages/historyList/historyList.vue
new file mode 100644
index 0000000..09eed0c
--- /dev/null
+++ b/src/pages/historyList/historyList.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/music.vue b/src/pages/music.vue
new file mode 100644
index 0000000..2757102
--- /dev/null
+++ b/src/pages/music.vue
@@ -0,0 +1,600 @@
+
+
+ 清空列表
+
+
+
+
+
+
+
+
diff --git a/src/pages/playList/playList.vue b/src/pages/playList/playList.vue
new file mode 100644
index 0000000..f9d6989
--- /dev/null
+++ b/src/pages/playList/playList.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 关闭歌词
+
+
+
+
+
+
+
diff --git a/src/pages/search/search.vue b/src/pages/search/search.vue
new file mode 100644
index 0000000..0dc50a5
--- /dev/null
+++ b/src/pages/search/search.vue
@@ -0,0 +1,168 @@
+
+
+
+ 清空列表
+
+
+
+
+
+
+
+
diff --git a/src/pages/topList/topList.vue b/src/pages/topList/topList.vue
new file mode 100644
index 0000000..25b8a4a
--- /dev/null
+++ b/src/pages/topList/topList.vue
@@ -0,0 +1,128 @@
+
+
+
+
+ {{ item.first }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/userList/userList.vue b/src/pages/userList/userList.vue
new file mode 100644
index 0000000..8f1e400
--- /dev/null
+++ b/src/pages/userList/userList.vue
@@ -0,0 +1,125 @@
+
+
+ 云音乐特色榜
+
+
+
+
+
+
+
+ ![]()
+
+ {{ item.name }}
+热门歌单
+
+
+
+
+
+
+
+
+ ![]()
+
+ {{ item.name }}
+
+
+
+
+
+
+
diff --git a/src/pages/wyyPlayer.js b/src/pages/wyyPlayer.js
new file mode 100644
index 0000000..907a6a8
--- /dev/null
+++ b/src/pages/wyyPlayer.js
@@ -0,0 +1,93 @@
+import { PLAY_MODE } from '@/config'
+
+// 重试次数
+let retry = 1
+
+const wangyiyunMusic = {
+ initAudio(that) {
+ const ele = that.audioEle
+ // 音频缓冲事件
+ ele.onprogress = () => {
+ try {
+ if (ele.buffered.length > 0) {
+ const duration = that.currentMusic.duration
+ let buffered = 0
+ ele.buffered.end(0)
+ buffered = ele.buffered.end(0) > duration ? duration : ele.buffered.end(0)
+ that.currentProgress = buffered / duration
+ }
+ } catch (e) {}
+ }
+ // 开始播放音乐
+ ele.onplay = () => {
+ let timer
+ clearTimeout(timer)
+ timer = setTimeout(() => {
+ that.musicReady = true
+ }, 100)
+ }
+ // 获取当前播放时间
+ ele.ontimeupdate = () => {
+ that.currentTime = ele.currentTime
+ }
+ // 当前音乐播放完毕
+ ele.onended = () => {
+ if (that.mode === PLAY_MODE.LOOP) {
+ that.loop()
+ } else {
+ that.next()
+ }
+ }
+ // 音乐播放出错
+ ele.onerror = () => {
+ if (retry === 0) {
+ let toastText = '当前音乐不可播放，已自动播放下一曲'
+ if (that.playlist.length === 1) {
+ toastText = '没有可播放的音乐哦~'
+ }
+ that.$wyyToast(toastText)
+ that.next(true)
+ } else {
+ // eslint-disable-next-line no-console
+ console.log('重试一次')
+ retry -= 1
+ ele.url = that.currentMusic.url
+ ele.load()
+ }
+ // console.log('播放出错啦！')
+ }
+ // 音乐进度拖动大于加载时重载音乐
+ ele.onstalled = () => {
+ ele.load()
+ that.setPlaying(false)
+ let timer
+ clearTimeout(timer)
+ timer = setTimeout(() => {
+ that.setPlaying(true)
+ }, 10)
+ }
+ // 将能播放的音乐加入播放历史
+ ele.oncanplay = () => {
+ retry = 1
+ if (that.historyList.length === 0 || that.currentMusic.id !== that.historyList[0].id) {
+ that.setHistory(that.currentMusic)
+ }
+ }
+ // 音频数据不可用时
+ ele.onstalled = () => {
+ ele.load()
+ that.setPlaying(false)
+ let timer
+ clearTimeout(timer)
+ timer = setTimeout(() => {
+ that.setPlaying(true)
+ }, 10)
+ }
+ // 当音频已暂停时
+ ele.onpause = () => {
+ that.setPlaying(false)
+ }
+ },
+}
+
+export default wangyiyunMusic
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..92f034d
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,72 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
+
+const routes = [
+ {
+ path: '/',
+ redirect: '/music',
+ },
+ {
+ path: '/music',
+ component: () => import('pages/music'),
+ redirect: '/music/playlist',
+ children: [
+ {
+ path: '/music/playlist', // 正在播放列表
+ component: () => import('pages/playList/playList'),
+ meta: {
+ keepAlive: true,
+ },
+ },
+ {
+ path: '/music/userlist', // 我的歌单
+ component: () => import('pages/userList/userList'),
+ meta: {
+ title: '我的歌单',
+ keepAlive: true,
+ },
+ },
+ {
+ path: '/music/toplist', // 排行榜列表
+ component: () => import('pages/topList/topList'),
+ meta: {
+ title: '排行榜',
+ keepAlive: true,
+ },
+ },
+ {
+ path: '/music/details/:id', // 音乐详情列表
+ component: () => import('pages/details/details'),
+ },
+ {
+ path: '/music/historylist', // 我听过的列表
+ component: () => import('pages/historyList/historyList'),
+ meta: {
+ title: '我听过的',
+ },
+ },
+ {
+ path: '/music/search', // 搜索
+ component: () => import('pages/search/search'),
+ meta: {
+ title: '搜索',
+ keepAlive: true,
+ },
+ },
+ {
+ path: '/music/comment/:id', // 音乐评论
+ component: () => import('pages/comment/comment'),
+ meta: {
+ title: '评论详情',
+ },
+ },
+ ],
+ },
+]
+
+export default new Router({
+ linkActiveClass: 'active',
+ linkExactActiveClass: 'active',
+ routes,
+})
diff --git a/src/store/actions.js b/src/store/actions.js
new file mode 100644
index 0000000..cd8bc9f
--- /dev/null
+++ b/src/store/actions.js
@@ -0,0 +1,88 @@
+import {
+ clearHistoryList,
+ setHistoryList,
+ removeHistoryList,
+ setMode,
+ setUserId,
+} from '@/utils/storage'
+import * as types from './mutation-types'
+
+function findIndex(list, music) {
+ return list.findIndex((item) => {
+ return item.id === music.id
+ })
+}
+
+// 设置播放列表
+export const setPlaylist = function ({ commit }, { list }) {
+ commit(types.SET_PLAYLIST, list)
+ commit(types.SET_ORDERLIST, list)
+}
+
+// 选择播放（会更新整个播放列表）
+export const selectPlay = function ({ commit }, { list, index }) {
+ commit(types.SET_PLAYLIST, list)
+ commit(types.SET_ORDERLIST, list)
+ commit(types.SET_CURRENTINDEX, index)
+ commit(types.SET_PLAYING, true)
+}
+// 选择播放（会插入一条到播放列表）
+export const selectAddPlay = function ({ commit, state }, music) {
+ let list = [...state.playlist]
+ // 查询当前播放列表是否有代插入的音乐，并返回其索引值
+ let index = findIndex(list, music)
+ // 当前播放列表有待插入的音乐时，直接改变当前播放音乐的索引值
+ if (index > -1) {
+ commit(types.SET_CURRENTINDEX, index)
+ } else {
+ list.unshift(music)
+ commit(types.SET_PLAYLIST, list)
+ commit(types.SET_ORDERLIST, list)
+ commit(types.SET_CURRENTINDEX, 0)
+ }
+ commit(types.SET_PLAYING, true)
+}
+
+// 清空播放列表
+export const clearPlayList = function ({ commit }) {
+ commit(types.SET_PLAYING, false)
+ commit(types.SET_CURRENTINDEX, -1)
+ commit(types.SET_PLAYLIST, [])
+ commit(types.SET_ORDERLIST, [])
+}
+
+// 删除正在播放列表中的歌曲
+export const removerPlayListItem = function ({ commit, state }, { list, index }) {
+ let currentIndex = state.currentIndex
+ if (index < state.currentIndex || list.length === state.currentIndex) {
+ currentIndex--
+ commit(types.SET_CURRENTINDEX, currentIndex)
+ }
+ commit(types.SET_PLAYLIST, list)
+ commit(types.SET_ORDERLIST, list)
+ if (!list.length) {
+ commit(types.SET_PLAYING, false)
+ } else {
+ commit(types.SET_PLAYING, true)
+ }
+}
+// 设置播放历史
+export const setHistory = function ({ commit }, music) {
+ commit(types.SET_HISTORYLIST, setHistoryList(music))
+}
+// 删除播放历史
+export const removeHistory = function ({ commit }, music) {
+ commit(types.SET_HISTORYLIST, removeHistoryList(music))
+}
+// 清空播放历史
+export const clearHistory = function ({ commit }) {
+ commit(types.SET_HISTORYLIST, clearHistoryList())
+}
+// 设置播放模式
+export const setPlayMode = function ({ commit }, mode) {
+ commit(types.SET_PLAYMODE, setMode(mode))
+}
+// 设置网易云用户UID
+export const setUid = function ({ commit }, uid) {
+ commit(types.SET_UID, setUserId(uid))
+}
diff --git a/src/store/getters.js b/src/store/getters.js
new file mode 100644
index 0000000..f01b398
--- /dev/null
+++ b/src/store/getters.js
@@ -0,0 +1,20 @@
+// audio元素
+export const audioEle = (state) => state.audioEle
+// 播放模式
+export const mode = (state) => state.mode
+// 播放状态
+export const playing = (state) => state.playing
+// 播放列表
+export const playlist = (state) => state.playlist
+// 顺序列表
+export const orderList = (state) => state.orderList
+// 当前音乐索引
+export const currentIndex = (state) => state.currentIndex
+// 当前音乐
+export const currentMusic = (state) => {
+ return state.playlist[state.currentIndex] || {}
+}
+// 播放历史列表
+export const historyList = (state) => state.historyList
+// 网易云用户UID
+export const uid = (state) => state.uid
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..dcf6b1d
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import state from './state'
+import * as getters from './getters'
+import * as actions from './actions'
+import mutations from './mutations'
+// vuex调试
+import createLogger from 'vuex/dist/logger'
+const debug = process.env.NODE_ENV !== 'production'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+ state,
+ getters,
+ mutations,
+ actions,
+ // vuex调试
+ strict: debug,
+ plugins: debug ? [createLogger()] : [],
+})
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
new file mode 100644
index 0000000..580a248
--- /dev/null
+++ b/src/store/mutation-types.js
@@ -0,0 +1,8 @@
+export const SET_AUDIOELE = 'SET_AUDIOELE' // 修改audio元素
+export const SET_PLAYMODE = 'SET_PLAYMODE' // 修改播放模式
+export const SET_PLAYING = 'SET_PLAYING' // 修改播放状态
+export const SET_PLAYLIST = 'SET_PLAYLIST' // 修改播放列表
+export const SET_ORDERLIST = 'SET_ORDERLIST' // 修改顺序列表
+export const SET_CURRENTINDEX = 'SET_CURRENTINDEX' // 修改当前音乐索引
+export const SET_HISTORYLIST = 'SET_HISTORYLIST' // 修改播放历史列表
+export const SET_UID = 'SET_UID' // 修改网易云用户UID
diff --git a/src/store/mutations.js b/src/store/mutations.js
new file mode 100644
index 0000000..9964612
--- /dev/null
+++ b/src/store/mutations.js
@@ -0,0 +1,38 @@
+import * as types from './mutation-types'
+
+const mutations = {
+ // 修改audio元素
+ [types.SET_AUDIOELE](state, audioEle) {
+ state.audioEle = audioEle
+ },
+ // 修改播放模式
+ [types.SET_PLAYMODE](state, mode) {
+ state.mode = mode
+ },
+ // 修改播放状态
+ [types.SET_PLAYING](state, playing) {
+ state.playing = playing
+ },
+ // 修改播放列表
+ [types.SET_PLAYLIST](state, playlist) {
+ state.playlist = playlist
+ },
+ // 修改顺序列表
+ [types.SET_ORDERLIST](state, orderList) {
+ state.orderList = orderList
+ },
+ // 修改当前音乐索引
+ [types.SET_CURRENTINDEX](state, currentIndex) {
+ state.currentIndex = currentIndex
+ },
+ // 修改播放历史列表
+ [types.SET_HISTORYLIST](state, historyList) {
+ state.historyList = historyList
+ },
+ // 修改网易云用户UID
+ [types.SET_UID](state, uid) {
+ state.uid = uid
+ },
+}
+
+export default mutations
diff --git a/src/store/state.js b/src/store/state.js
new file mode 100644
index 0000000..632cbf1
--- /dev/null
+++ b/src/store/state.js
@@ -0,0 +1,14 @@
+import { getHistoryList, getMode, getUserId } from '@/utils/storage'
+
+const state = {
+ audioEle: null, // audio元素
+ mode: getMode(), // 播放模式，默认列表循环
+ playing: false, // 播放状态
+ playlist: [], // 播放列表
+ orderList: [], // 顺序列表
+ currentIndex: -1, // 当前音乐索引
+ historyList: getHistoryList() || [], // 播放历史列表
+ uid: getUserId() || null, // 网易云用户UID
+}
+
+export default state
diff --git a/src/styles/index.less b/src/styles/index.less
new file mode 100644
index 0000000..5e13127
--- /dev/null
+++ b/src/styles/index.less
@@ -0,0 +1,117 @@
+@import 'reset';
+@import 'var';
+
+html,
+body,
+#app {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ min-width: 320px;
+ font-family: Arial;
+}
+
+#app {
+ position: relative;
+}
+
+.cover-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+//浮动
+.fl {
+ float: left;
+}
+
+.fr {
+ float: right;
+}
+
+.pointer {
+ cursor: pointer;
+}
+
+.hover {
+ color: @text_color;
+ cursor: pointer;
+ &:hover {
+ color: @text_color_active;
+ }
+}
+
+.text-left {
+ text-align: left;
+}
+
+.clearfix {
+ &:after {
+ display: block;
+ content: '';
+ clear: both;
+ }
+}
+
+.flex {
+ display: flex;
+}
+
+.flex-col {
+ display: flex;
+ flex-direction: column;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.overflow-hidden {
+ overflow: hidden;
+}
+
+/* 滚动条相关样式 */
+::-webkit-scrollbar {
+ /*滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等*/
+ background-color: @scrollbar_bg;
+ width: @scrollbar_size; // 纵向滚动条
+ height: @scrollbar_size; // 横向滚动条
+ border-radius: @scrollbar_border_radius;
+}
+
+::-webkit-scrollbar-button {
+ /*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/
+ display: none;
+}
+
+::-webkit-scrollbar-track {
+ /*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/
+ display: none;
+ //background-color: rgba(255, 255, 255, 0.1);
+ border-radius: @scrollbar_border_radius;
+}
+
+::-webkit-scrollbar-track-piece {
+ /*内层轨道，滚动条中间部分（除去）。*/
+ //background-color: rgba(255, 255, 255, .1);
+ border-radius: @scrollbar_border_radius;
+}
+
+::-webkit-scrollbar-thumb {
+ /*滚动条里面可以拖动的那部分*/
+ background-color: @scrollbar_thumb;
+ border-radius: @scrollbar_border_radius;
+}
+
+::-webkit-scrollbar-corner {
+ border-radius: @scrollbar_border_radius;
+}
+
+::-webkit-resizer {
+ /*定义右下角拖动块的样式*/
+ border-radius: @scrollbar_border_radius;
+}
diff --git a/src/styles/mixin.less b/src/styles/mixin.less
new file mode 100644
index 0000000..addcfb4
--- /dev/null
+++ b/src/styles/mixin.less
@@ -0,0 +1,13 @@
+// 显示省略号
+.no-wrap() {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.flex-center(@direction: row) {
+ display: flex;
+ flex-direction: @direction;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/src/styles/reset.less b/src/styles/reset.less
new file mode 100644
index 0000000..42afe20
--- /dev/null
+++ b/src/styles/reset.less
@@ -0,0 +1,141 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ -webkit-tap-highlight-color: transparent;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol,
+ul {
+ list-style: none;
+}
+
+blockquote,
+q {
+ quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+}
diff --git a/src/styles/var.less b/src/styles/var.less
new file mode 100644
index 0000000..7f96b12
--- /dev/null
+++ b/src/styles/var.less
@@ -0,0 +1,71 @@
+/* 颜色规范定义 */
+@text_color: rgba(255, 255, 255, 0.6);
+@text_color_active: #fff; //重点部分
+
+// active 颜色
+@active_color: #fff;
+
+// 遮罩层颜色
+@mask_color: rgba(0, 0, 0, 0.4);
+// 背景滤镜
+@backdrop_filter: blur(6px);
+
+/* 字体大小规范定义*/
+@font_size_small: 12px;
+@font_size_medium: 14px;
+@font_size_medium_x: 16px;
+@font_size_large: 18px;
+@font_size_large_x: 22px;
+
+/* 圆角规范定义 */
+@border_radius_base: 2px;
+@border_radius: 4px;
+
+/* 滚动条相关 */
+// 滚动条圆角
+@scrollbar_border_radius: 10px;
+// 滚动条大小
+@scrollbar_size: 5px;
+@scrollbar_bg: rgba(0, 0, 0, 0.3);
+@scrollbar_thumb: rgba(255, 255, 255, 0.5);
+
+/* loading */
+@load_bg_color: rgba(0, 0, 0, 0.2);
+
+/* header */
+@header_bg_color: rgba(0, 0, 0, 0.3);
+
+/* search-head */
+@search_bg_color: rgba(0, 0, 0, 0.2);
+
+/* dialog 相关 */
+@dialog_bg_color: rgba(0, 0, 0, 0.5);
+@dialog_content_bg_color: rgba(0, 0, 0, 0.6);
+@dialog_text_color: rgba(255, 255, 255, 0.7);
+@dialog_line_color: rgba(0, 0, 0, 0.35);
+@dialog_border_radius: @border_radius;
+@dialog_btn_border_radius: @border_radius;
+@dialog_mobile_border_radius: 10px;
+@dialog_btn_mobile_border_radius: @border_radius_base;
+
+/* btn 相关 */
+@btn_color: rgba(255, 255, 255, 0.6);
+@btn_color_active: #fff;
+@btn_border_radius: @border_radius_base;
+
+/* 歌词高亮颜色 */
+@lyric_color_active: #40ce8f;
+
+/* 进度条 */
+@bar_color: rgba(255, 255, 255, 0.15);
+@line_color: #fff;
+@dot_color: #fff;
+
+/* 列表 */
+@list_head_line_color: rgba(255, 255, 255, 0.8);
+@list_item_line_color: rgba(255, 255, 255, 0.1);
+
+/* 评论 */
+@comment_head_line_color: rgba(255, 255, 255, 0.8);
+@comment_item_line_color: rgba(255, 255, 255, 0.1);
+@comment_replied_line_color: rgba(255, 255, 255, 0.3);
diff --git a/src/utils/axios.js b/src/utils/axios.js
new file mode 100644
index 0000000..6a0476a
--- /dev/null
+++ b/src/utils/axios.js
@@ -0,0 +1,23 @@
+import axios from 'axios'
+import Vue from 'vue'
+
+const request = axios.create({
+ baseURL: process.env.VUE_APP_BASE_API_URL,
+})
+
+request.interceptors.response.use(
+ (response) => {
+ window.response = response
+
+ if (response.status === 200 && response.data.code === 200) {
+ return response.data
+ }
+ return Promise.reject(response)
+ },
+ (error) => {
+ Vue.prototype.$wyyToast(error.response ? error.response.data.message : error.message)
+ return Promise.reject(error)
+ },
+)
+
+export default request
diff --git a/src/utils/hack.js b/src/utils/hack.js
new file mode 100644
index 0000000..73fe0d4
--- /dev/null
+++ b/src/utils/hack.js
@@ -0,0 +1,6 @@
+// hack for global nextTick
+
+function noop() {}
+
+window.MessageChannel = noop
+window.setImmediate = noop
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
new file mode 100644
index 0000000..40795aa
--- /dev/null
+++ b/src/utils/mixin.js
@@ -0,0 +1,47 @@
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+/**
+ * 歌曲列表
+ */
+export const listMixin = {
+ computed: {
+ ...mapGetters(['playing', 'currentMusic']),
+ },
+ methods: {
+ selectItem(item, index) {
+ if (item.id === this.currentMusic.id && this.playing) {
+ this.setPlaying(false)
+ } else {
+ this.selectPlay({
+ list: this.list,
+ index,
+ })
+ }
+ },
+ ...mapMutations({
+ setPlaying: 'SET_PLAYING',
+ }),
+ ...mapActions(['selectPlay']),
+ },
+}
+
+/**
+ * loading状态
+ * @type {{data(): *, methods: {_hideLoad(): void}}}
+ */
+export const loadMixin = {
+ data() {
+ return {
+ wyyLoadShow: true, // loading状态
+ }
+ },
+ methods: {
+ _hideLoad() {
+ let timer
+ clearTimeout(timer)
+ timer = setTimeout(() => {
+ this.wyyLoadShow = false
+ }, 200)
+ },
+ },
+}
diff --git a/src/utils/song.js b/src/utils/song.js
new file mode 100644
index 0000000..f3c2e9a
--- /dev/null
+++ b/src/utils/song.js
@@ -0,0 +1,50 @@
+import { toHttps } from './util'
+
+function filterSinger(singers) {
+ if (!Array.isArray(singers) || !singers.length) {
+ return ''
+ }
+ let arr = []
+ singers.forEach((item) => {
+ arr.push(item.name)
+ })
+ return arr.join('/')
+}
+
+export class Song {
+ constructor({ id, name, singer, album, image, duration, url }) {
+ this.id = id
+ this.name = name
+ this.singer = singer
+ this.album = album
+ this.image = image
+ this.duration = duration
+ this.url = url
+ }
+}
+
+export function createSong(music) {
+ const album = music.album || music.al || {}
+ const duration = music.duration || music.dt
+ return new Song({
+ id: music.id,
+ name: music.name,
+ singer: filterSinger(music.ar || music.artists),
+ album: album.name,
+ image: toHttps(album.picUrl) || null,
+ duration: duration / 1000,
+ url: `https://music.163.com/song/media/outer/url?id=${music.id}.mp3`,
+ })
+}
+
+// 歌曲数据格式化
+export function formatSongs(list) {
+ const Songs = []
+ list.forEach((item) => {
+ const musicData = item
+ if (musicData.id) {
+ Songs.push(createSong(musicData))
+ }
+ })
+ return Songs
+}
diff --git a/src/utils/storage.js b/src/utils/storage.js
new file mode 100644
index 0000000..25f8d18
--- /dev/null
+++ b/src/utils/storage.js
@@ -0,0 +1,131 @@
+import { WYYPLAYER, WYYPLAYER_CONFIG } from '@/config'
+
+const STORAGE = window.localStorage
+const storage = {
+ get(key, data = []) {
+ if (STORAGE) {
+ return STORAGE.getItem(key)
+ ? Array.isArray(data)
+ ? JSON.parse(STORAGE.getItem(key))
+ : STORAGE.getItem(key)
+ : data
+ }
+ },
+ set(key, val) {
+ if (STORAGE) {
+ STORAGE.setItem(key, val)
+ }
+ },
+ clear(key) {
+ if (STORAGE) {
+ STORAGE.removeItem(key)
+ }
+ },
+}
+
+/**
+ * 播放历史
+ * @type HISTORYLIST_KEY：key值
+ * HistoryListMAX：最大长度
+ */
+const HISTORYLIST_KEY = '__wangyiyun_historyList__'
+const HistoryListMAX = 200
+// 获取播放历史
+export function getHistoryList() {
+ return storage.get(HISTORYLIST_KEY)
+}
+
+// 更新播放历史
+export function setHistoryList(music) {
+ let list = storage.get(HISTORYLIST_KEY)
+ const index = list.findIndex((item) => {
+ return item.id === music.id
+ })
+ if (index === 0) {
+ return list
+ }
+ if (index > 0) {
+ list.splice(index, 1)
+ }
+ list.unshift(music)
+ if (HistoryListMAX && list.length > HistoryListMAX) {
+ list.pop()
+ }
+ storage.set(HISTORYLIST_KEY, JSON.stringify(list))
+ return list
+}
+
+// 删除一条播放历史
+export function removeHistoryList(music) {
+ storage.set(HISTORYLIST_KEY, JSON.stringify(music))
+ return music
+}
+
+// 清空播放历史
+export function clearHistoryList() {
+ storage.clear(HISTORYLIST_KEY)
+ return []
+}
+
+/**
+ * 播放模式
+ * @type MODE_KEY：key值
+ * HistoryListMAX：最大长度
+ */
+const MODE_KEY = '__wangyiyun_mode__'
+// 获取播放模式
+export function getMode() {
+ return Number(storage.get(MODE_KEY, WYYPLAYER_CONFIG.PLAY_MODE))
+}
+// 修改播放模式
+export function setMode(mode) {
+ storage.set(MODE_KEY, mode)
+ return mode
+}
+
+/**
+ * 网易云用户uid
+ * @type USERID_KEY：key值
+ */
+const USERID_KEY = '__wangyiyun_userID__'
+// 获取用户uid
+export function getUserId() {
+ return Number(storage.get(USERID_KEY, null))
+}
+// 修改用户uid
+export function setUserId(uid) {
+ storage.set(USERID_KEY, uid)
+ return uid
+}
+
+/**
+ * 版本号
+ * @type VERSION_KEY：key值
+ */
+const VERSION_KEY = '__wangyiyun_version__'
+// 获取版本号
+export function getVersion() {
+ let version = storage.get(VERSION_KEY, null)
+ return Array.isArray(version) ? null : version
+}
+// 修改版本号
+export function setVersion(version) {
+ storage.set(VERSION_KEY, version)
+ return version
+}
+
+/**
+ * 音量
+ * @type VOLUME_KEY：key值
+ */
+const VOLUME_KEY = '__wangyiyun_volume__'
+// 获取音量
+export function getVolume() {
+ const volume = storage.get(VOLUME_KEY, WYYPLAYER_CONFIG.VOLUME)
+ return Number(volume)
+}
+// 修改音量
+export function setVolume(volume) {
+ storage.set(VOLUME_KEY, volume)
+ return volume
+}
diff --git a/src/utils/util.js b/src/utils/util.js
new file mode 100644
index 0000000..4ae827c
--- /dev/null
+++ b/src/utils/util.js
@@ -0,0 +1,107 @@
+// 随机排序数组/洗牌函数 https://github.com/lodash/lodash/blob/master/shuffle.js
+function copyArray(source, array) {
+ let index = -1
+ const length = source.length
+ array || (array = new Array(length))
+ while (++index < length) {
+ array[index] = source[index]
+ }
+ return array
+}
+
+export const randomSortArray = function shuffle(array) {
+ const length = array == null ? 0 : array.length
+ if (!length) {
+ return []
+ }
+ let index = -1
+ const lastIndex = length - 1
+ const result = copyArray(array)
+ while (++index < length) {
+ const rand = index + Math.floor(Math.random() * (lastIndex - index + 1))
+ const value = result[rand]
+ result[rand] = result[index]
+ result[index] = value
+ }
+ return result
+}
+
+// 防抖函数
+export function debounce(func, delay) {
+ let timer
+ return function (...args) {
+ if (timer) {
+ clearTimeout(timer)
+ }
+ timer = setTimeout(() => {
+ func.apply(this, args)
+ }, delay)
+ }
+}
+
+// 补0函数
+export function addZero(s) {
+ return s < 10 ? '0' + s : s
+}
+
+// 歌词解析
+const timeExp = /\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g
+export function parseLyric(lrc) {
+ const lines = lrc.split('\n')
+ const lyric = []
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i]
+ const result = timeExp.exec(line)
+ if (!result) {
+ continue
+ }
+ const text = line.replace(timeExp, '').trim()
+ if (text) {
+ lyric.push({
+ time: (result[1] * 6e4 + result[2] * 1e3 + (result[3] || 0) * 1) / 1e3,
+ text,
+ })
+ }
+ }
+ return lyric
+}
+
+// 时间格式化
+export function format(value) {
+ let minute = Math.floor(value / 60)
+ let second = Math.floor(value % 60)
+ return `${addZero(minute)}:${addZero(second)}`
+}
+
+/**
+ * https://github.com/videojs/video.js/blob/master/src/js/utils/promise.js
+ * Silence a Promise-like object.
+ *
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ *
+ * @param {Object} value
+ * An object that may or may not be `Promise`-like.
+ */
+export function isPromise(v) {
+ return v !== undefined && v !== null && typeof v.then === 'function'
+}
+
+export function silencePromise(value) {
+ if (isPromise(value)) {
+ value.then(null, () => {})
+ }
+}
+
+// 判断 string 类型
+export function isString(v) {
+ return typeof v === 'string'
+}
+
+// http 链接转化成 https
+export function toHttps(url) {
+ if (!isString(url)) {
+ return url
+ }
+ return url.replace('http://', 'https://')
+}
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..f827dc7
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,62 @@
+const { defineConfig } = require('@vue/cli-service')
+const path = require('path')
+const dayjs = require('dayjs')
+
+function resolve(dir) {
+ return path.join(__dirname, dir)
+}
+
+const isEnvProduction = process.env.NODE_ENV === 'production'
+
+// 注入版本信息
+process.env.VUE_APP_VERSION = require('./package.json').version
+// 注入版本更新时间
+process.env.VUE_APP_UPDATE_TIME = dayjs().locale('zh-cn').format('YYYY-mm-DD')
+
+module.exports = defineConfig({
+ publicPath: '',
+ chainWebpack(config) {
+ config.resolve.alias
+ .set('api', resolve('src/api'))
+ .set('assets', resolve('src/assets'))
+ .set('base', resolve('src/base'))
+ .set('components', resolve('src/components'))
+ .set('pages', resolve('src/pages'))
+ config.plugin('html').tap((args) => {
+ if (isEnvProduction) {
+ if (!args[0].minify) {
+ /* 参考 https://github.com/jantimon/html-webpack-plugin#minification */
+ args[0].minify = {
+ collapseWhitespace: true,
+ keepClosingSlash: true,
+ removeComments: true,
+ removeRedundantAttributes: true,
+ removeScriptTypeAttributes: true,
+ removeStyleLinkTypeAttributes: true,
+ useShortDoctype: true,
+ trimCustomFragments: true,
+ }
+ }
+ args[0].minify.minifyJS = true
+ args[0].minify.minifyCSS = true
+ }
+ return args
+ })
+ },
+ pluginOptions: {
+ 'style-resources-loader': {
+ preProcessor: 'less',
+ patterns: [resolve('src/styles/var.less'), resolve('src/styles/mixin.less')],
+ },
+ },
+ devServer: {
+ port: 3001,
+ proxy: {
+ '/api': {
+ target: process.env.VUE_APP_DEV_API_URL,
+ changeOrigin: true,
+ pathRewrite: { '^/api': '' },
+ },
+ },
+ },
+})
+
+ ![]()
+
+
+
+
{{ item.user.nickname }}
+ +{{ item.content }}
+