diff --git a/package.json b/package.json
index febed8e..0968843 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"serve": "vite preview"
},
"dependencies": {
+ "aplayer": "^1.10.1",
"axios": "^0.22.0",
"echarts": "^5.2.1",
"element-plus": "^1.1.0-beta.19",
diff --git a/src/views/api/Music.vue b/src/views/api/Music.vue
index ad752c9..e4ab7e3 100644
--- a/src/views/api/Music.vue
+++ b/src/views/api/Music.vue
@@ -137,12 +137,9 @@
-
+
+
+
@@ -152,13 +149,14 @@ import BaseList from '../../model/baselist'
import { MsgResult, Page } from '../../model/common.dto'
import { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElDialog, ElSelect, ElOption, ElRadioGroup, ElRadio, ElDrawer, ElUpload, ElMessage, ElMessageBox } from 'element-plus'
import { MusicModel, MusicLibModel, MusicLyricModel, MusicPlayerItem } from '../../model/api/music'
+import MusicPlayer from './MusicPlayer.vue'
import prettyBytes from 'pretty-bytes'
import { VForm } from '../../types'
let selectedIds: string[] = []
@Options({
name: 'Music',
- components: { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElDialog, ElSelect, ElOption, ElRadioGroup, ElRadio, ElDrawer, ElUpload }
+ components: { ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElPagination, ElDialog, ElSelect, ElOption, ElRadioGroup, ElRadio, ElDrawer, ElUpload, MusicPlayer }
})
export default class Music extends BaseList {
search = new MusicPage()
@@ -183,8 +181,8 @@ export default class Music extends BaseList {
prettyBytes = prettyBytes
lyricFormData: MusicLyricModel = {}
// 是否正在播放音乐
- private musicPlaying: boolean = false
- private musicList: MusicPlayerItem[] = []
+ musicPlaying: boolean = false
+ musicList: MusicPlayerItem[] = []
created() {
this.$http.get('/api/music/listLibs').then(data => {
this.musicLibs = data
@@ -213,13 +211,11 @@ export default class Music extends BaseList {
async playMusic() {
try {
const data = await this.$http.get('/api/music/list/all', {params: selectedIds.length ? {ids: selectedIds} : this.search})
- this.musicList = data.map((item: MusicModel, index: number) => {
+ this.musicList = data.map((item: MusicModel) => {
return {
- id: index + 1,
name: item.title || item.name,
artist: item.artist,
- album: item.album,
- url: `/api/common/music/get/${item._id}`,
+ url: `/api/v2/getMusic/${item._id}`,
cover: `/api/common/music/album/${item._id}`,
lrc: item.lyric_id ? `/api/common/music/lyric/${item.lyric_id}` : undefined
}
diff --git a/src/views/api/MusicPlayer.vue b/src/views/api/MusicPlayer.vue
new file mode 100644
index 0000000..9a956bc
--- /dev/null
+++ b/src/views/api/MusicPlayer.vue
@@ -0,0 +1,682 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 233ca79..7640283 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -231,6 +231,15 @@ acorn@^7.1.1:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+aplayer@^1.10.1:
+ version "1.10.1"
+ resolved "https://registry.yarnpkg.com/aplayer/-/aplayer-1.10.1.tgz#318289206107452cc39e8f552fa6cc6cb459a90c"
+ integrity sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==
+ dependencies:
+ balloon-css "^0.5.0"
+ promise-polyfill "7.1.0"
+ smoothscroll "0.4.0"
+
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -260,6 +269,11 @@ babel-walk@3.0.0-canary-5:
dependencies:
"@babel/types" "^7.9.6"
+balloon-css@^0.5.0:
+ version "0.5.2"
+ resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff"
+ integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==
+
call-bind@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -754,6 +768,11 @@ pretty-bytes@^5.6.0:
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+promise-polyfill@7.1.0:
+ version "7.1.0"
+ resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz#4d749485b44577c14137591c6f36e5d7e2dd3378"
+ integrity sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==
+
promise@^7.0.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
@@ -916,6 +935,11 @@ semver@^7.3.5:
dependencies:
lru-cache "^6.0.0"
+smoothscroll@0.4.0:
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/smoothscroll/-/smoothscroll-0.4.0.tgz#40e507b46461408ba1b787d0081e1e883c4124a5"
+ integrity sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==
+
source-map-js@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"