diff --git a/blog.config.js b/blog.config.js index ed764d60..04559428 100644 --- a/blog.config.js +++ b/blog.config.js @@ -67,12 +67,12 @@ const BLOG = { 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: process.env.NEXT_PUBLIC_MUSIC_PLAYER || false, // 是否使用音乐播放插件 + 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_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/ + MUSIC_PLAYER_AUDIO_LIST: [ // 示例音乐列表。除了以下配置外,还可配置歌词,具体配置项看此文档 https://aplayer.js.org/#/zh-Hans/ { name: '风を共に舞う気持ち', artist: 'Falcom Sound Team jdk', diff --git a/components/CommonScript.js b/components/CommonScript.js index 1488d5b9..446b0017 100644 --- a/components/CommonScript.js +++ b/components/CommonScript.js @@ -103,8 +103,8 @@ const CommonScript = () => { >)} {/* 引入音乐播放 */} - - + {JSON.parse(BLOG.MUSIC_PLAYER) && } + {JSON.parse(BLOG.MUSIC_PLAYER) && JSON.parse(BLOG.MUSIC_PLAYER_METING) && } >) } diff --git a/components/Player.js b/components/Player.js index d8e7ed0e..d3370802 100644 --- a/components/Player.js +++ b/components/Player.js @@ -5,14 +5,20 @@ const Player = () => { const [player, setPlayer] = React.useState() const ref = React.useRef(null) + const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC) + const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE) + const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY) + + const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING) + React.useEffect(() => { - if (BLOG.MUSIC_PLAYER && !BLOG.MUSIC_PLAYER_METING) { + if (!meting) { setPlayer(new window.APlayer({ container: ref.current, fixed: true, - showlrc: BLOG.MUSIC_PLAYER_SHOW_LRC, + showlrc: showLrc, + autoplay: autoPlay, order: BLOG.MUSIC_PLAYER_ORDER, - autoplay: BLOG.MUSIC_PLAYER_AUTO_PLAY, audio: BLOG.MUSIC_PLAYER_AUDIO_LIST })) } @@ -22,18 +28,18 @@ const Player = () => { }, []) return ( -