feat: mp3 dynamically set css variables

Author: wkylin

src/assets/audio/heart-of-the-sea.mp3

@@ -0,0 +1,34 @@
+import React, { useRef, useState } from 'react'
+import styles from './index.module.less'
+import music from '@assets/audio/heart-of-the-sea.mp3'
+const SoundBar = () => {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const audioRef = useRef(null)
+  const togglePlay = () => {
+    if (isPlaying) {
+      audioRef.current.pause()
+    } else {
+      audioRef.current.play()
+    }
+    setIsPlaying(!isPlaying)
+  }
+
+  return (
+    <>
+      <span className={styles.audio} onClick={togglePlay}>
+        {Array.from({ length: 5 }, () => ({ id: Math.random() })).map((item, index) => (
+          <span
+            key={item.id}
+            style={{ '--i': index, '--state': isPlaying ? 'running' : 'paused' }}
+            className={styles.line}
+          />
+        ))}
+      </span>
+      <audio src={music} ref={audioRef} loop>
+        <track kind="captions" default />
+      </audio>
+    </>
+  )
+}
+
+export default SoundBar

src/components/stateless/SoundBar/index.jsx

@@ -0,0 +1,37 @@
+.audio {
+  --i: 0;
+  --state: paused;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  z-index: 3;
+  position: relative;
+
+  .line {
+    background: #00ff7f;
+    animation: play 1s ease infinite;
+    animation-delay: calc(var(--i) * 0.1s);
+    animation-play-state: var(--state);
+    height: 10px;
+    width: 2px;
+    margin: 0 1px;
+  }
+}
+
+@keyframes play {
+  0% {
+    transform: scaleY(1);
+  }
+
+  50% {
+    transform: scaleY(1.5);
+  }
+
+  100% {
+    transform: scaleY(1);
+  }
+}

src/components/stateless/SoundBar/index.module.less

@@ -11,6 +11,8 @@ import LanguageSwitcher from '@stateless/LanguageSwitcher'
 // import LightSvg from '@assets/svg/light.svg'
 // import DarkSvg from '@assets/svg/dark.svg'
 
+import SoundBar from '@stateless/SoundBar'
+
 import { useProThemeContext } from '@theme/hooks'
 
 import PrimaryNav from '../primaryNav'
@@ -84,6 +86,7 @@ const ProHeader = () => {
         </div>
         <div className={styles.headerRight}>
           <Space direction="horizontal" style={{ cursor: 'pointer', paddingRight: 8 }}>
+            <SoundBar />
             <Switch
               // checkedChildren={<Icon component={LightSvg} />}
               // unCheckedChildren={<Icon component={DarkSvg} />}

src/pages/layout/proHeader/index.jsx

@@ -199,7 +199,7 @@ const config = {
         ],
       },
       {
-        test: /\.(png|jpe?g|gif|webp|eot|ttf|woff|woff2|mp4|mkv|pdf)$/i,
+        test: /\.(png|jpe?g|gif|webp|eot|ttf|woff|woff2|mp4|mp3|mkv|pdf)$/i,
         type: 'asset',
         parser: {
           // Conditions for converting to base64