File size: 2,370 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import { siteConfig } from '@/lib/config'
import { loadExternalResource } from '@/lib/utils'
import { useEffect, useRef, useState } from 'react'
/**
* 音乐播放器
* @returns
*/
const Player = () => {
const [player, setPlayer] = useState()
const ref = useRef(null)
const lrcType = JSON.parse(siteConfig('MUSIC_PLAYER_LRC_TYPE'))
const playerVisible = JSON.parse(siteConfig('MUSIC_PLAYER_VISIBLE'))
const autoPlay = JSON.parse(siteConfig('MUSIC_PLAYER_AUTO_PLAY'))
const meting = JSON.parse(siteConfig('MUSIC_PLAYER_METING'))
const order = siteConfig('MUSIC_PLAYER_ORDER')
const audio = siteConfig('MUSIC_PLAYER_AUDIO_LIST')
const musicPlayerEnable = siteConfig('MUSIC_PLAYER')
const musicPlayerCDN = siteConfig('MUSIC_PLAYER_CDN_URL')
const musicMetingEnable = siteConfig('MUSIC_PLAYER_METING')
const musicMetingCDNUrl = siteConfig('MUSIC_PLAYER_METING_CDN_URL', 'https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js')
const initMusicPlayer = async () => {
if (!musicPlayerEnable) {
return
}
try {
await loadExternalResource(musicPlayerCDN, 'js')
} catch (error) {
console.error('音乐组件异常', error)
}
if (musicMetingEnable) {
await loadExternalResource(musicMetingCDNUrl, 'js')
}
if (!meting && window.APlayer) {
setPlayer(new window.APlayer({
container: ref.current,
fixed: true,
lrcType: lrcType,
autoplay: autoPlay,
order: order,
audio: audio
}))
}
}
useEffect(() => {
initMusicPlayer()
return () => {
setPlayer(undefined)
}
}, [])
return (
<div className={playerVisible ? 'visible' : 'invisible'}>
<link
rel="stylesheet"
type="text/css"
href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css"
/>
{meting
? <meting-js
fixed="true"
type="playlist"
preload="auto"
lrc-type={siteConfig('MUSIC_PLAYER_METING_LRC_TYPE')}
autoplay={autoPlay}
order={siteConfig('MUSIC_PLAYER_ORDER')}
server={siteConfig('MUSIC_PLAYER_METING_SERVER')}
id={siteConfig('MUSIC_PLAYER_METING_ID')}
/>
: <div ref={ref} data-player={player} />
}
</div>
)
}
export default Player
|