diff --git a/components.d.ts b/components.d.ts
index f02fb04..862c39c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -28,6 +28,7 @@ declare module 'vue' {
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Footer: typeof import('./src/components/Footer.vue')['default']
     FriendLinks: typeof import('./src/components/FriendLinks.vue')['default']
+    MusicPlayer: typeof import('./src/components/MusicPlayer.vue')['default']
     PersonalInfo: typeof import('./src/components/PersonalInfo.vue')['default']
     TopNavBar: typeof import('./src/components/TopNavBar.vue')['default']
   }
diff --git a/package.json b/package.json
index a8fe5d8..39ab3d8 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.3",
     "@kangc/v-md-editor": "^2.3.14",
+    "@moefe/vue-aplayer": "^2.0.0-beta.5",
     "@soerenmartius/vue3-clipboard": "^0.1.2",
     "@types/lodash-es": "^4.17.6",
     "@types/qs": "^6.9.7",
+    "aplayer": "^1.10.1",
     "axios": "^0.26.1",
     "element-plus": "^2.1.4",
     "font-awesome": "^4.7.0",
@@ -23,7 +25,7 @@
     "vue": "^3.2.25",
     "vue-axios": "^3.4.1",
     "vue-router": "^4.0.14",
-    "vue3-social-share": "0.1.4"
+    "vue3-social-share": "0.1.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f7b3378..c4f8dbe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,12 +1,14 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 specifiers:
   '@element-plus/icons-vue': ^1.1.3
   '@kangc/v-md-editor': ^2.3.14
+  '@moefe/vue-aplayer': ^2.0.0-beta.5
   '@soerenmartius/vue3-clipboard': ^0.1.2
   '@types/lodash-es': ^4.17.6
   '@types/qs': ^6.9.7
   '@vitejs/plugin-vue': ^2.2.0
+  aplayer: ^1.10.1
   axios: ^0.26.1
   element-plus: ^2.1.4
   font-awesome: ^4.7.0
@@ -24,25 +26,27 @@ specifiers:
   vue-axios: ^3.4.1
   vue-router: ^4.0.14
   vue-tsc: ^0.29.8
-  vue3-social-share: 0.1.4
+  vue3-social-share: 0.1.7
 
 dependencies:
   '@element-plus/icons-vue': registry.npmmirror.com/@element-plus/icons-vue/1.1.3_vue@3.2.31
   '@kangc/v-md-editor': registry.npmmirror.com/@kangc/v-md-editor/2.3.14_vue@3.2.31
+  '@moefe/vue-aplayer': registry.npmmirror.com/@moefe/vue-aplayer/2.0.0-beta.5_vue@3.2.31
   '@soerenmartius/vue3-clipboard': registry.npmmirror.com/@soerenmartius/vue3-clipboard/0.1.2
   '@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.6
   '@types/qs': registry.npmmirror.com/@types/qs/6.9.7
+  aplayer: registry.npmmirror.com/aplayer/1.10.1
   axios: registry.npmmirror.com/axios/0.26.1
-  element-plus: registry.npmmirror.com/element-plus/2.1.4_1a412d14def5ff5ca1122000e4bee666
+  element-plus: registry.npmmirror.com/element-plus/2.1.4_djas2fg66x7vziiseaaojpxgmy
   font-awesome: registry.npmmirror.com/font-awesome/4.7.0
-  pinia: registry.npmmirror.com/pinia/2.0.12_typescript@4.6.2+vue@3.2.31
+  pinia: registry.npmmirror.com/pinia/2.0.12_5bgd5bbqiynntouprdo6x2bjeu
   prismjs: registry.npmmirror.com/prismjs/1.27.0
   qs: registry.npmmirror.com/qs/6.10.3
   vite-plugin-prismjs: registry.npmmirror.com/vite-plugin-prismjs/0.0.8_prismjs@1.27.0
   vue: registry.npmmirror.com/vue/3.2.31
   vue-axios: registry.npmmirror.com/vue-axios/3.4.1_axios@0.26.1+vue@3.2.31
   vue-router: registry.npmmirror.com/vue-router/4.0.14_vue@3.2.31
-  vue3-social-share: registry.npmmirror.com/vue3-social-share/0.1.4
+  vue3-social-share: registry.npmmirror.com/vue3-social-share/0.1.7
 
 devDependencies:
   '@vitejs/plugin-vue': registry.npmmirror.com/@vitejs/plugin-vue/2.2.4_vite@2.8.6+vue@3.2.31
@@ -271,6 +275,8 @@ packages:
     version: 7.17.8
     engines: {node: '>=6.0.0'}
     hasBin: true
+    dependencies:
+      '@babel/types': registry.npmmirror.com/@babel/types/7.17.0
 
   registry.npmmirror.com/@babel/runtime/7.17.8:
     resolution: {integrity: sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.8.tgz}
@@ -415,6 +421,19 @@ packages:
       vant: registry.npmmirror.com/vant/3.4.6_vue@3.2.31
       vue: registry.npmmirror.com/vue/3.2.31
       xss: registry.npmmirror.com/xss/1.0.11
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  registry.npmmirror.com/@moefe/vue-aplayer/2.0.0-beta.5_vue@3.2.31:
+    resolution: {integrity: sha512-ytzp4GStzjftuh7H1rIS/ziqwV1FO67iTLSkDxgN0J2bqlO+rBgDDr83Y+pZKBIgRUc30uu/UZHqmE4QiBHHeg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@moefe/vue-aplayer/-/vue-aplayer-2.0.0-beta.5.tgz}
+    id: registry.npmmirror.com/@moefe/vue-aplayer/2.0.0-beta.5
+    name: '@moefe/vue-aplayer'
+    version: 2.0.0-beta.5
+    peerDependencies:
+      vue: ^2.2.0
+    dependencies:
+      vue: registry.npmmirror.com/vue/3.2.31
     dev: false
 
   registry.npmmirror.com/@mrmlnc/readdir-enhanced/2.2.1:
@@ -667,7 +686,6 @@ packages:
       magic-string: registry.npmmirror.com/magic-string/0.25.9
       postcss: registry.npmmirror.com/postcss/8.4.12
       source-map: registry.npmmirror.com/source-map/0.6.1
-    dev: false
 
   registry.npmmirror.com/@vue/compiler-ssr/3.2.31:
     resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz}
@@ -676,7 +694,6 @@ packages:
     dependencies:
       '@vue/compiler-dom': registry.npmmirror.com/@vue/compiler-dom/3.2.31
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.31
-    dev: false
 
   registry.npmmirror.com/@vue/devtools-api/6.1.3:
     resolution: {integrity: sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.1.3.tgz}
@@ -694,7 +711,6 @@ packages:
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.31
       estree-walker: registry.npmmirror.com/estree-walker/2.0.2
       magic-string: registry.npmmirror.com/magic-string/0.25.9
-    dev: false
 
   registry.npmmirror.com/@vue/reactivity/3.2.31:
     resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.31.tgz}
@@ -710,7 +726,6 @@ packages:
     dependencies:
       '@vue/reactivity': registry.npmmirror.com/@vue/reactivity/3.2.31
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.31
-    dev: false
 
   registry.npmmirror.com/@vue/runtime-dom/3.2.31:
     resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz}
@@ -720,7 +735,6 @@ packages:
       '@vue/runtime-core': registry.npmmirror.com/@vue/runtime-core/3.2.31
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.31
       csstype: registry.npmmirror.com/csstype/2.6.20
-    dev: false
 
   registry.npmmirror.com/@vue/server-renderer/3.2.31_vue@3.2.31:
     resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.2.31.tgz}
@@ -733,7 +747,6 @@ packages:
       '@vue/compiler-ssr': registry.npmmirror.com/@vue/compiler-ssr/3.2.31
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.31
       vue: registry.npmmirror.com/vue/3.2.31
-    dev: false
 
   registry.npmmirror.com/@vue/shared/3.2.31:
     resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vue/shared/-/shared-3.2.31.tgz}
@@ -752,6 +765,8 @@ packages:
       markdown-it-emoji: registry.npmmirror.com/markdown-it-emoji/1.4.0
       markdown-it-table-of-contents: registry.npmmirror.com/markdown-it-table-of-contents/0.4.4
       prismjs: registry.npmmirror.com/prismjs/1.27.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/@vuepress/shared-utils/1.9.7:
@@ -768,6 +783,8 @@ packages:
       semver: registry.npmmirror.com/semver/6.3.0
       toml: registry.npmmirror.com/toml/3.0.0
       upath: registry.npmmirror.com/upath/1.2.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/@vueuse/core/8.1.2_vue@3.2.31:
@@ -841,6 +858,16 @@ packages:
       picomatch: registry.npmmirror.com/picomatch/2.3.1
     dev: true
 
+  registry.npmmirror.com/aplayer/1.10.1:
+    resolution: {integrity: sha512-HAfyxgCUTLAqtYlxzzK9Fyqg6y+kZ9CqT1WfeWE8FSzwspT6oBqWOZHANPHF3RGTtC33IsyEgrfthPDzU5r9kQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/aplayer/-/aplayer-1.10.1.tgz}
+    name: aplayer
+    version: 1.10.1
+    dependencies:
+      balloon-css: registry.npmmirror.com/balloon-css/0.5.2
+      promise-polyfill: registry.npmmirror.com/promise-polyfill/7.1.0
+      smoothscroll: registry.npmmirror.com/smoothscroll/0.4.0
+    dev: false
+
   registry.npmmirror.com/argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/argparse/-/argparse-1.0.10.tgz}
     name: argparse
@@ -967,6 +994,12 @@ packages:
     name: balanced-match
     version: 1.0.2
 
+  registry.npmmirror.com/balloon-css/0.5.2:
+    resolution: {integrity: sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/balloon-css/-/balloon-css-0.5.2.tgz}
+    name: balloon-css
+    version: 0.5.2
+    dev: false
+
   registry.npmmirror.com/base/0.11.2:
     resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/base/-/base-0.11.2.tgz}
     name: base
@@ -1022,6 +1055,8 @@ packages:
       snapdragon-node: registry.npmmirror.com/snapdragon-node/2.1.1
       split-string: registry.npmmirror.com/split-string/3.1.0
       to-regex: registry.npmmirror.com/to-regex/3.0.2
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/braces/3.0.2:
@@ -1230,10 +1265,10 @@ packages:
       toggle-selection: registry.npmmirror.com/toggle-selection/1.0.6
     dev: false
 
-  registry.npmmirror.com/core-js/3.21.1:
-    resolution: {integrity: sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/core-js/-/core-js-3.21.1.tgz}
+  registry.npmmirror.com/core-js/3.25.0:
+    resolution: {integrity: sha512-CVU1xvJEfJGhyCpBrzzzU1kjCfgsGUxhEvwUV2e/cOedYWHdmluamx+knDnmhqALddMG16fZvIqvs9aijsHHaA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/core-js/-/core-js-3.25.0.tgz}
     name: core-js
-    version: 3.21.1
+    version: 3.25.0
     requiresBuild: true
     dev: false
 
@@ -1247,7 +1282,6 @@ packages:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz}
     name: csstype
     version: 2.6.20
-    dev: false
 
   registry.npmmirror.com/d3-array/1.2.4:
     resolution: {integrity: sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/d3-array/-/d3-array-1.2.4.tgz}
@@ -1871,6 +1905,11 @@ packages:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz}
     name: debug
     version: 2.6.9
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: registry.npmmirror.com/ms/2.0.0
     dev: false
@@ -2006,7 +2045,7 @@ packages:
     version: 1.4.88
     dev: false
 
-  registry.npmmirror.com/element-plus/2.1.4_1a412d14def5ff5ca1122000e4bee666:
+  registry.npmmirror.com/element-plus/2.1.4_djas2fg66x7vziiseaaojpxgmy:
     resolution: {integrity: sha512-pcwgDbKUrzyWbixYB/zIbLPLBQ/NPGPJnGXJ+jYozUSthPW4SuriaUGJKgbAE6PDBAtw3IodiT2E2GbiaZLxww==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.1.4.tgz}
     id: registry.npmmirror.com/element-plus/2.1.4
     name: element-plus
@@ -2023,7 +2062,7 @@ packages:
       escape-html: registry.npmmirror.com/escape-html/1.0.3
       lodash: registry.npmmirror.com/lodash/4.17.21
       lodash-es: registry.npmmirror.com/lodash-es/4.17.21
-      lodash-unified: registry.npmmirror.com/lodash-unified/1.0.2_da03a4540fbd16bbaafbb96724306afd
+      lodash-unified: registry.npmmirror.com/lodash-unified/1.0.2_3ib2ivapxullxkx3xftsimdk7u
       memoize-one: registry.npmmirror.com/memoize-one/6.0.0
       normalize-wheel-es: registry.npmmirror.com/normalize-wheel-es/1.1.1
       vue: registry.npmmirror.com/vue/3.2.31
@@ -2362,6 +2401,8 @@ packages:
       regex-not: registry.npmmirror.com/regex-not/1.0.2
       snapdragon: registry.npmmirror.com/snapdragon/0.8.2
       to-regex: registry.npmmirror.com/to-regex/3.0.2
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/extend-shallow/2.0.1:
@@ -2397,6 +2438,8 @@ packages:
       regex-not: registry.npmmirror.com/regex-not/1.0.2
       snapdragon: registry.npmmirror.com/snapdragon/0.8.2
       to-regex: registry.npmmirror.com/to-regex/3.0.2
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/fast-glob/2.2.7:
@@ -2411,6 +2454,8 @@ packages:
       is-glob: registry.npmmirror.com/is-glob/4.0.3
       merge2: registry.npmmirror.com/merge2/1.4.1
       micromatch: registry.npmmirror.com/micromatch/3.1.10
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/fast-glob/3.2.11:
@@ -2603,6 +2648,8 @@ packages:
       ignore: registry.npmmirror.com/ignore/4.0.6
       pify: registry.npmmirror.com/pify/4.0.1
       slash: registry.npmmirror.com/slash/2.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/good-listener/1.2.2:
@@ -3147,7 +3194,7 @@ packages:
     version: 4.17.21
     dev: false
 
-  registry.npmmirror.com/lodash-unified/1.0.2_da03a4540fbd16bbaafbb96724306afd:
+  registry.npmmirror.com/lodash-unified/1.0.2_3ib2ivapxullxkx3xftsimdk7u:
     resolution: {integrity: sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.2.tgz}
     id: registry.npmmirror.com/lodash-unified/1.0.2
     name: lodash-unified
@@ -3183,7 +3230,6 @@ packages:
     version: 0.25.9
     dependencies:
       sourcemap-codec: registry.npmmirror.com/sourcemap-codec/1.4.8
-    dev: false
 
   registry.npmmirror.com/magic-string/0.26.1:
     resolution: {integrity: sha512-ndThHmvgtieXe8J/VGPjG+Apu7v7ItcD5mhEIvOscWjPF/ccOiLxHaSuCAS2G+3x4GKsAbT8u7zdyamupui8Tg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/magic-string/-/magic-string-0.26.1.tgz}
@@ -3344,6 +3390,8 @@ packages:
       regex-not: registry.npmmirror.com/regex-not/1.0.2
       snapdragon: registry.npmmirror.com/snapdragon/0.8.2
       to-regex: registry.npmmirror.com/to-regex/3.0.2
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/micromatch/4.0.4:
@@ -3430,6 +3478,8 @@ packages:
       regex-not: registry.npmmirror.com/regex-not/1.0.2
       snapdragon: registry.npmmirror.com/snapdragon/0.8.2
       to-regex: registry.npmmirror.com/to-regex/3.0.2
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/neo-async/2.6.2:
@@ -3568,7 +3618,7 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  registry.npmmirror.com/pinia/2.0.12_typescript@4.6.2+vue@3.2.31:
+  registry.npmmirror.com/pinia/2.0.12_5bgd5bbqiynntouprdo6x2bjeu:
     resolution: {integrity: sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/pinia/-/pinia-2.0.12.tgz}
     id: registry.npmmirror.com/pinia/2.0.12
     name: pinia
@@ -3613,6 +3663,12 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  registry.npmmirror.com/promise-polyfill/7.1.0:
+    resolution: {integrity: sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/promise-polyfill/-/promise-polyfill-7.1.0.tgz}
+    name: promise-polyfill
+    version: 7.1.0
+    dev: false
+
   registry.npmmirror.com/promise/7.3.1:
     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/promise/-/promise-7.3.1.tgz}
     name: promise
@@ -3996,6 +4052,12 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  registry.npmmirror.com/smoothscroll/0.4.0:
+    resolution: {integrity: sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/smoothscroll/-/smoothscroll-0.4.0.tgz}
+    name: smoothscroll
+    version: 0.4.0
+    dev: false
+
   registry.npmmirror.com/snapdragon-node/2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz}
     name: snapdragon-node
@@ -4030,6 +4092,8 @@ packages:
       source-map: registry.npmmirror.com/source-map/0.5.7
       source-map-resolve: registry.npmmirror.com/source-map-resolve/0.5.3
       use: registry.npmmirror.com/use/3.1.1
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   registry.npmmirror.com/source-map-js/1.0.2:
@@ -4206,7 +4270,6 @@ packages:
     version: 4.6.2
     engines: {node: '>=4.2.0'}
     hasBin: true
-    dev: true
 
   registry.npmmirror.com/uc.micro/1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/uc.micro/-/uc.micro-1.0.6.tgz}
@@ -4635,14 +4698,13 @@ packages:
       '@vue/runtime-dom': registry.npmmirror.com/@vue/runtime-dom/3.2.31
       '@vue/server-renderer': registry.npmmirror.com/@vue/server-renderer/3.2.31_vue@3.2.31
       '@vue/shared': registry.npmmirror.com/@vue/shared/3.2.31
-    dev: false
 
-  registry.npmmirror.com/vue3-social-share/0.1.4:
-    resolution: {integrity: sha512-tNW9T44IbkINMVByuBoVStVBP+P8q4DU7bN02IJKsp4lWLbzeQIdoXHHp18VLouIBHqb7f5fjL96mONWze+CbA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue3-social-share/-/vue3-social-share-0.1.4.tgz}
+  registry.npmmirror.com/vue3-social-share/0.1.7:
+    resolution: {integrity: sha512-U7tEfFN/idXKW87dByWEabs878FNeGnZOvIT1riPePUairgrdh/hBRdkBK5BPDB5AVNz5VApHziWl3hgKShMFA==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue3-social-share/-/vue3-social-share-0.1.7.tgz}
     name: vue3-social-share
-    version: 0.1.4
+    version: 0.1.7
     dependencies:
-      core-js: registry.npmmirror.com/core-js/3.21.1
+      core-js: registry.npmmirror.com/core-js/3.25.0
       qrcode.vue: registry.npmmirror.com/qrcode.vue/3.3.3_vue@3.2.31
       vue: registry.npmmirror.com/vue/3.2.31
     dev: false
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index af00078..ec043ee 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -32,7 +32,7 @@
             <div class="comment-button">{{item.index+1}}楼</div>
             <div class="comment-button" @click="openComment(item,item)"><el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>回复</div>
             <div class="comment-button" @click="deleteComment(item)" v-if="userStore.userIdentity<=1||userStore.userId===item.commentUserId">
-              <el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>删除
+              <el-icon style="vertical-align: -15%"><delete /></el-icon>删除
             </div>
           </div>
           <el-scrollbar max-height="130px">
@@ -42,7 +42,7 @@
                 <div class="comment-buttons">
                   <div class="comment-button" @click="openComment(i,item)"><el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>回复</div>
                   <div class="comment-button" @click="deleteComment(i)" v-if="userStore.userIdentity<=1||userStore.userId===i.commentUserId">
-                    <el-icon style="vertical-align: -15%"><chat-line-square /></el-icon>删除
+                    <el-icon style="vertical-align: -15%"><delete /></el-icon>删除
                   </div>
                 </div>
               </div>
@@ -90,7 +90,7 @@
 <script setup lang="ts">
 import {computed, onMounted, PropType, reactive, ref, watch} from "vue";
 import axios from "axios";
-import {Comment,ChatLineSquare,Close} from "@element-plus/icons-vue"
+import {Comment, ChatLineSquare, Close, Delete} from "@element-plus/icons-vue"
 import qs from "qs";
 import {useUserStore} from "@/store/user";
 import {ElMessage, ElMessageBox} from "element-plus";
@@ -198,7 +198,7 @@ const getComments=()=>{
             {
               if(item.commentUserId!=='-1')
               {
-                axios.get("/user/getUserById?userId="+comment.commentUserId)
+                axios.get("/user/getUserById?userId="+item.commentUserId)
                     .then((result)=>{
                       item.userUsername=result.data.userUsername
                       item.userAvatar=result.data.userAvatar
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 04824b0..7628c13 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -9,11 +9,16 @@
             </div>
     </div>
     <div style="height: 61px" v-if="screenWidth<640"></div>
+
+  </div>
+  <div class="music-container">
+    <MusicPlayer></MusicPlayer>
   </div>
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref} from "vue";
+import {onMounted, ref} from "vue"
+import MusicPlayer from '@/components/MusicPlayer.vue'
 
 let screenWidth = ref(document.body.clientWidth)
 const resize = function (){
@@ -55,4 +60,11 @@ onMounted(()=>{
   overflow: hidden;
   padding: 30px 0;
 }
+
+.music-container {
+  position: fixed;
+  width: 15%;
+  right: 0;
+  bottom: 120px;
+}
 </style>
diff --git a/src/components/MusicPlayer.vue b/src/components/MusicPlayer.vue
new file mode 100644
index 0000000..cf6c40c
--- /dev/null
+++ b/src/components/MusicPlayer.vue
@@ -0,0 +1,156 @@
+<template>
+  <div ref="playerRef" class="customAPlayer"></div>
+</template>
+
+<script setup lang="ts">
+import 'APlayer/dist/APlayer.min.css';
+import APlayer from 'APlayer';
+import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue'
+import axios from "axios";
+
+const playerRef = ref()
+let instance:any;
+
+// APlayer歌曲信息
+class Audio {
+  // 音频艺术家
+  artist: String;
+  // 音频名称
+  name: String;
+  // 音频链接
+  url: String;
+  // 音频封面
+  cover: String;
+  // 歌词
+  lrc: String;
+
+  constructor(artist: String, name: String, url: String, cover: String, lrc: String) {
+    this.artist = artist;
+    this.name = name;
+    this.url = url;
+    this.cover = cover;
+    this.lrc = lrc;
+  }
+}
+
+const props = defineProps({
+  // 开启吸底模式
+  fixed: {
+    type: Boolean,
+    default: true
+  },
+  // 开启迷你模式
+  mini: {
+    type: Boolean,
+    default: true
+  },
+  // 音频自动播放
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
+  // 主题色
+  theme: {
+    type: String,
+    default: 'rgba(136, 167, 113,0.2)'
+  },
+  // 音频循环播放
+  loop: {
+    type: String,
+    default: 'all',
+    validator: (value: 'all' | 'one' | 'none') => {
+      return value === 'all' || value === 'one' || value === 'none';
+    }
+  },
+  // 音频循环顺序
+  order: {
+    type: String,
+    default: 'random',
+    validator: (value: 'list' | 'random') => {
+      return value === 'list' || value === 'random';
+    }
+  },
+  // 预加载
+  preload: {
+    type: String,
+    default: 'auto',
+    validator: (value: 'auto' | 'metadata' | 'none') => {
+      return value === 'auto' || value === 'metadata' || value === 'none';
+    }
+  },
+  // 默认音量
+  volume: {
+    type: Number,
+    default: 0.7,
+    validator: (value: Number) => {
+      return value >= 0 && value <= 1;
+    }
+  },
+  // 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
+  mutex: {
+    type: Boolean,
+    default: true
+  },
+  // 传递歌词方式
+  lrcType: {
+    type: Number,
+    default: 3
+  },
+  // 列表是否默认折叠
+  listFolded: {
+    type: Boolean,
+    default: true
+  },
+  // 列表最大高度
+  listMaxHeight: {
+    type: String,
+    default: '100px'
+  },
+  // 存储播放器设置的 localStorage key
+  storageName: {
+    type: String,
+    default: 'aplayer-setting'
+  }
+})
+
+// 初始化
+onMounted(() => {
+  nextTick(() => {
+    axios.get('/music/queryAll')
+    .then(res=>{
+      instance = new APlayer({
+        container: playerRef.value,
+        fixed: props.fixed,
+        mini: props.mini,
+        autoplay: props.autoplay,
+        theme: props.theme,
+        loop: props.loop,
+        order: props.order,
+        preload: props.preload,
+        volume: props.volume,
+        mutex: props.mutex,
+        lrcType: props.lrcType,
+        listFolded: props.listFolded,
+        listMaxHeight: props.listMaxHeight,
+        storageName: props.storageName,
+        audio: res.data
+      })
+      instance.lrc.toggle()
+      instance.volume(0.1,true)
+      setTimeout(()=>{
+        instance.play()
+      },5000)
+    })
+  })
+})
+// 销毁
+onBeforeUnmount(() => {
+  instance.destroy()
+})
+</script>
+
+<style scoped>
+.customAPlayer{
+  bottom: 120px!important;
+}
+</style>
diff --git a/src/env.d.ts b/src/env.d.ts
index 50c8aed..2d4fab7 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -11,3 +11,4 @@ declare module '@kangc/v-md-editor'
 declare module '@kangc/v-md-editor/lib/preview'
 declare module '@kangc/v-md-editor/lib/theme/vuepress'
 declare module 'prismjs'
+declare module 'APlayer'
diff --git a/src/main.ts b/src/main.ts
index 2280732..4708c4b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -50,5 +50,6 @@ VMdPreview.use(vuepressTheme, {
 const app=createApp(App)
 app.config.globalProperties.$axios=axios;
 app.config.globalProperties.$qs=qs;
-app.use(VueAxios,axios).use(router).use(VMdEditor).use(VMdPreview).use(PeterAlbusVue).use(store).mount('#app')
+app.use(VueAxios,axios).use(router).use(VMdEditor).use(VMdPreview).use(PeterAlbusVue).use(store)
+app.mount('#app')
 // app.config.devtools=true
diff --git a/src/views/About.vue b/src/views/About.vue
index d4abf64..a16abd7 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -40,7 +40,7 @@
             <h2 class="title"><el-icon style="vertical-align: -10%"><share-icon /></el-icon> 分享本页面</h2>
             <div class="content paragraph">
               <Share
-                  url="https://www.peteralbus.com/%23/about"
+                  url="https://www.peteralbus.com/#/about"
                   :title="blog.blogTitle"
                   source="PeterAlbus的博客"
                   :description="blog.blogDescription"
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index 6cc054c..318dada 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -40,7 +40,7 @@
             <h2 class="title"><el-icon style="vertical-align: -10%"><share-icon /></el-icon> 分享本页面</h2>
             <div class="content paragraph">
               <Share
-                  :url="'https://www.peteralbus.com/%23/blog?id%3D'+blog.blogId"
+                  :url="'https://www.peteralbus.com/#/blog?id='+blog.blogId"
                   :title="blog.blogTitle"
                   source="PeterAlbus的博客"
                   :description="blog.blogDescription"
diff --git a/src/views/UploadPhoto.vue b/src/views/UploadPhoto.vue
index c59eeea..5d0e504 100644
--- a/src/views/UploadPhoto.vue
+++ b/src/views/UploadPhoto.vue
@@ -17,6 +17,7 @@
               class="avatar-uploader"
               action="https://www.peteralbus.com:8089/photo/upload/"
               ref="uploadRef"
+              :headers="headerObj"
               :data="upData"
               :show-file-list="false"
               :on-success="handleAvatarSuccess"
@@ -55,6 +56,10 @@ let friendLinkList=ref([
     linkUrl:'#'
   }
 ])
+let token=localStorage.getItem("token")
+let headerObj= {
+      satoken_peteralbus_blog:token
+    }
 
 const getFriendLinkList=function () {
   axios.get('friendLink/getFriendLinkList')
diff --git a/src/views/UserCenter.vue b/src/views/UserCenter.vue
index 381ca3c..af40d86 100644
--- a/src/views/UserCenter.vue
+++ b/src/views/UserCenter.vue
@@ -6,6 +6,7 @@
           class="avatar-uploader"
           action="https://www.peteralbus.com:8089/user/uploadAvatar/"
           ref="uploadRef"
+          :headers="headerObj"
           :data="upData"
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
@@ -146,6 +147,11 @@ import qs from "qs";
 
 const userStore=useUserStore()
 
+let token=localStorage.getItem("token")
+let headerObj= {
+  satoken_peteralbus_blog:token
+}
+
 const changingName=ref(false)
 const username=ref('')
 
diff --git a/vite.config.ts b/vite.config.ts
index eef7ec7..d8c7a3d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,7 +18,7 @@ export default defineConfig(({command, mode}) => {
                 resolvers: [ElementPlusResolver()],
             }),
             prismjs({
-                languages: ['json','typescript'],
+                languages: 'all',
             }),
         ],
         resolve:{