feat: lock a playlist to random

src/components/g-audio.tsx

@@ -9,10 +9,12 @@ import SCircle from './s-circle'
 import SPathDouble from './s-path-double'
 import SDot from "./s-dot";
 import SPaticle from "./s-particle";
-import { apiURL } from '@/global'
+import { apiURL, DEFAULT_IMG } from '@/global'
 
 export const MusicVisualizerCtx = new MusicVisualizer()
 
+const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot, SPathDot]
+
 export default function GAudio() {
   const audio = useRef<HTMLAudioElement>(null)
   useEffect(() => {
@@ -22,8 +24,9 @@ export default function GAudio() {
   const [musicName, setMusicName] = useState('Please load a music...')
   const [audioURL, setAudioURL] = useState<string>()
   const [audioData, setAudioData] = useState<number[]>([])
-  const [audioImg, setAudioImg] = useState<string>()
+  const [audioImg, setAudioImg] = useState<string>(DEFAULT_IMG)
   const [isPlaying, setIsPlaying] = useState(false)
+  const [playList, setPlayList] = useState<any[]>([])
 
   const hiddenFileInput = useRef<HTMLInputElement>(null)
 
@@ -47,16 +50,49 @@ export default function GAudio() {
     raf.current && cancelAnimationFrame(raf.current)
   }
 
+
+  async function getPlayList() {
+    try {
+      const res = await (await fetch(`https://api.injahow.cn/meting/?type=playlist&id=8577182717`)).json()
+      if (res && res.length > 0) {
+        console.log('res')
+        setPlayList(res)
+      }
+    } catch {
+      //
+    }
+  }
+  useEffect(() => {
+    getPlayList()
+  }, [])
+
+
   async function handleLoadRandomMusic() {
     try {
-      const transferTarget = encodeURIComponent(`https://api.wqwlkj.cn/wqwlapi/wyy_random.php?type=json`)
-      const res = await fetch(`${apiURL}/api/transfer?target=${transferTarget}`, { headers: { 'content-type': 'application/json; charset=utf-8' } })
-      const { data } = await res.json()
-      console.log('data', data)
-      const { name, url, artistsname, picurl } = data
-      setMusicName(`${name} - ${artistsname}`)
-      setAudioURL(url)
-      setAudioImg(picurl)
+      let musicName = ''
+      let musicURL = ''
+      let posterPic = ''
+      if (playList && playList.length > 0) {
+        const randomIdx = ~~[Math.random() * playList.length]
+        const { name, url, artist, pic } = playList[randomIdx]
+        console.log('playList[randomIdx]', playList[randomIdx])
+        const { url: picURL } = await fetch(pic, { method: 'HEAD' })
+        console.log('picURL', picURL)
+        musicName = `${name} - ${artist}`
+        musicURL = url
+        posterPic = picURL.split('?')[0]
+      } else {
+        const transferTarget = encodeURIComponent(`https://api.wqwlkj.cn/wqwlapi/wyy_random.php?type=json`)
+        const res = await fetch(`${apiURL}/api/transfer?target=${transferTarget}`, { headers: { 'content-type': 'application/json; charset=utf-8' } })
+        const { data } = await res.json()
+        const { name, url, artistsname, picurl } = data
+        musicName = `${name} - ${artistsname}`
+        musicURL = url
+        posterPic = picurl
+      }
+      setMusicName(musicName)
+      setAudioURL(musicURL)
+      setAudioImg(posterPic)
       pause()
     } catch(e) {
       console.error(e)
@@ -90,14 +126,18 @@ export default function GAudio() {
           <audio controls onPlay={play} onPause={pause} ref={audio} src={audioURL} crossOrigin="anonymous"></audio>
         </div>
         <div className={style.exampleWrapper}>
-          <SLine isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
-          <SPathDouble isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
-          <SPath isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
-          <SPathFill isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
-          <SCircle isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
-          <SPaticle isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
-          <SDot isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
-          <SPathDot isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          {
+            exampleList.map((Example, index) => {
+              return (
+                <div className="s-model" key={index}>
+                  <div className="img-bg-wrapper">
+                    <img src={audioImg} />
+                  </div>
+                  <Example isPlaying={isPlaying} data={audioData} audioImg={audioImg} />
+                </div>
+              )
+            })
+          }
           {
             Array.from({length: 5}).map((item,index) => {
               return <div key={index} className="s-module-fake"></div>

src/components/s-circle.tsx

@@ -155,8 +155,6 @@ export default function SCircle(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SCircle" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SCircle" className="s-canvas-wrapper"></div>
   )
 }

src/components/s-dot.tsx

@@ -113,8 +113,6 @@ export default function SDot(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SDot" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SDot" className="s-canvas-wrapper"></div>
   )
 }

src/components/s-line.tsx

@@ -73,8 +73,6 @@ export default function SLine(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SLine" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SLine" className="s-canvas-wrapper"></div>
   )
 }

src/components/s-particle.tsx

@@ -148,8 +148,6 @@ export default function SPaticle(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SParticle" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SParticle" className="s-canvas-wrapper"></div>
   )
 }

src/components/s-path-dot.tsx

@@ -104,8 +104,6 @@ export default function SPathDot(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SPathDot" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SPathDot" className="s-canvas-wrapper"></div>
   )
 }

src/components/s-path-double.tsx

@@ -97,8 +97,6 @@ export default function SPath(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SPathDouble" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SPathDouble" className="s-canvas-wrapper"></div>
   )
 }

src/components/s-path-fill.tsx

@@ -83,8 +83,6 @@ export default function SLine(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SPathFill" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SPathFill" className="s-canvas-wrapper"></div>
   )
 }

src/components/s-path.tsx

@@ -82,8 +82,6 @@ export default function SPath(props: SComponentProps) {
   useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
-    <div className="s-model">
-      <div id="SPath" className="s-canvas-wrapper"></div>
-    </div>
+    <div id="SPath" className="s-canvas-wrapper"></div>
   )
 }

src/global.ts

@@ -1 +1,3 @@
-export const apiURL = (import.meta as any).env.PROD ? 'https://kongfandong.cn' : '/api';
+export const apiURL = (import.meta as any).env.PROD ? 'https://kongfandong.cn' : '/api';
+
+export const DEFAULT_IMG = `https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1459749411175-04bf5292ceea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80`

src/index.scss

@@ -78,16 +78,18 @@ ul, li {
   box-shadow: 0 0 10px #eee;
   overflow: hidden;
   margin: 12px;
-  &:before {
-    content: '';
+  .img-bg-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: url(https://source.unsplash.com/random/300x300?Nature);
-    filter: blur(40px);
     z-index: 1;
+    img {
+      width: 100%;
+      height: 100%;
+      filter: blur(40px);
+    }
   }
   .s-canvas-wrapper {
     position: absolute;

src/utils/base.ts

@@ -31,7 +31,7 @@ export function getImageCircle(canvas: Canvas, { x, y, r, shadowColor }: ImageCi
       width: 2 * r,
       height: 2 * r,
       // img: `https://source.unsplash.com/random/${2 * r}x${2 * r}?Nature`
-      img: `https://howdz.deno.dev/unsplash/random?keyword=Nature&${2 * r}x${2 * r}`
+      // img: `https://howdz.deno.dev/unsplash/random?keyword=Nature&${2 * r}x${2 * r}`
     }
   })
   shape.setClip({