From 0d0fb07eef0d81741ea77da0d6038e6a889f7951 Mon Sep 17 00:00:00 2001 From: ykxkykx Date: Sun, 1 Jan 2023 20:34:03 +0800 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81Aplayer?= =?UTF-8?q?=E6=92=AD=E6=94=BE=E9=9F=B3=E4=B9=90=E7=9A=84=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blog.config.js | 20 ++++++++++++++++++++ components/MusicPlayer.js | 7 +++++++ components/Player.js | 33 +++++++++++++++++++++++++++++++++ package.json | 1 + pages/_app.js | 5 +++++ 5 files changed, 66 insertions(+) create mode 100644 components/MusicPlayer.js create mode 100644 components/Player.js diff --git a/blog.config.js b/blog.config.js index 74188d83..d929369c 100644 --- a/blog.config.js +++ b/blog.config.js @@ -66,6 +66,26 @@ const BLOG = { WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题 + // 音乐播放插件 + MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || true, // 是否使用音乐播放插件 + MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换 + MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放（移动设备不支持自动播放） + MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random + MUSIC_PLAYER_AUDIO_LIST: [ // 除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/ + { + name: '风を共に舞う気持ち', + artist: 'Falcom Sound Team jdk', + url: 'https://music.163.com/song/media/outer/url?id=731419.mp3', + cover: 'https://p2.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg' + }, + { + name: '王都グランセル', + artist: 'Falcom Sound Team jdk', + url: 'https://music.163.com/song/media/outer/url?id=731355.mp3', + cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg' + } + ], + // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK // twikoo diff --git a/components/MusicPlayer.js b/components/MusicPlayer.js new file mode 100644 index 00000000..7e788639 --- /dev/null +++ b/components/MusicPlayer.js @@ -0,0 +1,7 @@ +import dynamic from 'next/dynamic' + +const MusicPlayer = dynamic( + () => import('@/components/Player'), + { ssr: false } +) +export default MusicPlayer diff --git a/components/Player.js b/components/Player.js new file mode 100644 index 00000000..4b312c4d --- /dev/null +++ b/components/Player.js @@ -0,0 +1,33 @@ +import React from 'react' +import Aplayer from 'aplayer' +import BLOG from '@/blog.config' + +const Player = () => { + const [player, setPlayer] = React.useState() + const ref = React.useRef(null) + + React.useEffect(() => { + if (BLOG.MUSIC_PLAYER) { + setPlayer(new Aplayer({ + container: ref.current, + fixed: true, + order: BLOG.MUSIC_PLAYER_ORDER, + autoplay: BLOG.MUSIC_PLAYER_AUTO_PLAY, + audio: BLOG.MUSIC_PLAYER_AUDIO_LIST + })) + } + return () => { + setPlayer(undefined) + } + }, []) + + return ( +
+ ) +} + +export default Player diff --git a/package.json b/package.json index 8d68b740..e731b18e 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "animate.css": "^4.1.1", "animejs": "^3.2.1", "aos": "^3.0.0-beta.6", + "aplayer": "1.10.1", "axios": ">=0.21.1", "copy-to-clipboard": "^3.3.1", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/pages/_app.js b/pages/_app.js index ca101940..37206a0c 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -19,12 +19,16 @@ import '@fontsource/noto-serif-sc' // local fontawesome 6.2.1 @see https://www.npmjs.com/package/@fortawesome/fontawesome-free import '@fortawesome/fontawesome-free/css/all.min.css' +// Aplayer.js 的样式 +import 'aplayer/dist/APlayer.min.css' + // import '@/styles/prism-mac-style.css' // code 左上角显示mac的红黄绿图标 import { GlobalContextProvider } from '@/lib/global' import { DebugPanel } from '@/components/DebugPanel' import { ThemeSwitch } from '@/components/ThemeSwitch' import { Fireworks } from '@/components/Fireworks' +import MusicPlayer from '@/components/MusicPlayer' const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false }) const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false }) @@ -64,6 +68,7 @@ const MyApp = ({ Component, pageProps }) => { {FONTS_URL?.map(fontUrl => )} {externalPlugins} + ) } From 936e882ac27eeaa1eb77ce7ea8fd26fe0bf43435 Mon Sep 17 00:00:00 2001 From: ykxkykx Date: Mon, 2 Jan 2023 04:00:59 +0800 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4Aplayer?= =?UTF-8?q?=E5=BC=95=E5=85=A5=E6=96=B9=E5=BC=8F=E4=B8=BA=E8=84=9A=E6=9C=AC?= =?UTF-8?q?=E9=93=BE=E6=8E=A5,=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87metingJS?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=9F=B3=E4=B9=90=E5=B9=B3=E5=8F=B0=E6=AD=8C?= =?UTF-8?q?=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + blog.config.js | 6 +++++- components/CommonScript.js | 4 ++++ components/Player.js | 29 +++++++++++++++++++++-------- package.json | 1 - pages/_app.js | 3 --- 6 files changed, 31 insertions(+), 13 deletions(-) diff --git a/.gitignore b/.gitignore index dcb5930f..a1a007c3 100644 --- a/.gitignore +++ b/.gitignore @@ -36,6 +36,7 @@ yarn-error.log* # dev /data.json /yarn.lock +/pnpm-lock.yaml .idea .vscode diff --git a/blog.config.js b/blog.config.js index d929369c..ed764d60 100644 --- a/blog.config.js +++ b/blog.config.js @@ -69,7 +69,8 @@ const BLOG = { // 音乐播放插件 MUSIC_PLAYER: process.env.NEXT_PUBLIC_MUSIC_PLAYER || true, // 是否使用音乐播放插件 MUSIC_PLAYER_VISIBLE: process.env.NEXT_PUBLIC_MUSIC_PLAYER_VISIBLE || true, // 是否在左下角显示播放和切换 - MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放（移动设备不支持自动播放） + MUSIC_PLAYER_AUTO_PLAY: process.env.NEXT_PUBLIC_MUSIC_PLAYER_AUTO_PLAY || true, // 是否自动播放，不过时常不生效（移动设备不支持自动播放） + MUSIC_PLAYER_SHOW_LRC: process.env.NEXT_PUBLIC_MUSIC_PLAYER_SHOW_LRC || false, // 是否展示歌词（前提是有配置歌词路径，对 meting 无效） MUSIC_PLAYER_ORDER: 'list', // 默认播放方式，顺序 list，随机 random MUSIC_PLAYER_AUDIO_LIST: [ // 除了以下配置外，还可配置歌词，具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/ { @@ -85,6 +86,9 @@ const BLOG = { cover: 'https://p1.music.126.net/kn6ugISTonvqJh3LHLaPtQ==/599233837187278.jpg' } ], + MUSIC_PLAYER_METING: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING || false, // 是否要开启 MetingJS，从平台获取歌单。会覆盖自定义的 MUSIC_PLAYER_AUDIO_LIST，更多配置信息：https://github.com/metowolf/MetingJS + MUSIC_PLAYER_METING_SERVER: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_SERVER || 'netease', // 音乐平台，[netease, tencent, kugou, xiami, baidu] + MUSIC_PLAYER_METING_ID: process.env.NEXT_PUBLIC_MUSIC_PLAYER_METING_ID || '60198', // 对应歌单的 id // ----> 评论互动 可同时开启多个支持 WALINE VALINE GISCUS CUSDIS UTTERRANCES GITALK diff --git a/components/CommonScript.js b/components/CommonScript.js index ae924fbd..1488d5b9 100644 --- a/components/CommonScript.js +++ b/components/CommonScript.js @@ -101,6 +101,10 @@ const CommonScript = () => { }} /> )} + + {/* 引入音乐播放 */} +