feat: add background audio player with subtle styling

- Added ReactAudioPlayer component with autoplay functionality and reduced volume (0.1)
- Applied opacity and blur effects to make player visually less intrusive
- Fixed player position to bottom of screen with full width and z-index priority
- Integrated default audio track 'illbe.mp3' from public directory

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       '@heroicons/react':
         specifier: ^2.1.5
         version: 2.2.0(react@18.3.1)
+      '@kevtucker/react-audio-player-bar':
+        specifier: ^0.0.2
+        version: 0.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/material':
         specifier: ^7.3.1
         version: 7.3.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -53,6 +56,9 @@ importers:
       react:
         specifier: ^18.2.0
         version: 18.3.1
+      react-audio-player:
+        specifier: ^0.17.0
+        version: 0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-card-slider-component:
         specifier: ^1.0.9
         version: 1.0.9(@testing-library/dom@7.31.2)(@types/webpack@4.41.40)(eslint@8.57.1)(sockjs-client@1.6.1)(typescript@4.9.5)
@@ -1213,6 +1219,12 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
+  '@kevtucker/react-audio-player-bar@0.0.2':
+    resolution: {integrity: sha512-OdyXLPTqutRIXgmiWYrpgOvD1QI7u7ohLGu0cHG8nEGcwbHBmrToQercW7h3Rz+Kt7hGcbtpUxshtcwptEmhiQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   '@mui/core-downloads-tracker@7.3.1':
     resolution: {integrity: sha512-+mIK1Z0BhOaQ0vCgOkT1mSrIpEHLo338h4/duuL4TBLXPvUMit732mnwJY3W40Avy30HdeSfwUAAGRkKmwRaEQ==}
 
@@ -6077,6 +6089,12 @@ packages:
     resolution: {integrity: sha512-0sF4ny9v/B7s6aoehwze9vJNWcmCemAUYBVasscVr92+UYiEqDXOxfKjXN685mDaMRNF3WdhHQs76oTODMocFA==}
     engines: {node: '>=10'}
 
+  react-audio-player@0.17.0:
+    resolution: {integrity: sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   react-card-slider-component@1.0.9:
     resolution: {integrity: sha512-xdQYRv5Jpb+8/Qmt1aUaFEbZKPF5ciVXETReMLV9C9d24/ODCl1XdUQaRQzzNev75EWjaCk4caofCvXbqI1nUA==}
 
@@ -9623,6 +9641,12 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@kevtucker/react-audio-player-bar@0.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      postcss: 8.5.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   '@mui/core-downloads-tracker@7.3.1': {}
 
   '@mui/material@7.3.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -15568,6 +15592,12 @@ snapshots:
       regenerator-runtime: 0.13.11
       whatwg-fetch: 3.6.20
 
+  react-audio-player@0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-card-slider-component@1.0.9(@testing-library/dom@7.31.2)(@types/webpack@4.41.40)(eslint@8.57.1)(sockjs-client@1.6.1)(typescript@4.9.5):
     dependencies:
       '@testing-library/jest-dom': 5.17.0

src/components/ui/AudioPlayer.jsx

@@ -4,11 +4,12 @@ import ReactAudioPlayer from 'react-audio-player';
 
 const AudioPlayer = () => {
   return (
-    <div className="fixed bottom-0 left-0 w-full z-50">
+    <div className="fixed bottom-0 left-0 w-full z-50 opacity-40 blur-xs">
       <ReactAudioPlayer
         src="/audios/illbe.mp3"
         autoPlay
         controls
+        volume={0.1}
         className="w-full"
       />
     </div>