Bob AI: Add a background music player that plays the custom song fro

src/app/page.tsx

@@ -10,6 +10,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Award, Sparkles, Users, Music } from "lucide-react";
+import BackgroundMusicPlayer from '@/components/BackgroundMusicPlayer';
 
 export default function LandingPage() {
   return (
@@ -25,6 +26,7 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
+      <BackgroundMusicPlayer />
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[

src/components/AudioPlayer.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Play, Pause, Volume2, VolumeX } from 'lucide-react';
+
+interface AudioPlayerProps {}
+
+export function AudioPlayer({}: AudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(0.5);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isMuted, setIsMuted] = useState(false);
+  const [previousVolume, setPreviousVolume] = useState(0.5);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const updateTime = () => setCurrentTime(audio.currentTime);
+    const updateDuration = () => setDuration(audio.duration);
+    const handleEnded = () => setIsPlaying(false);
+
+    audio.addEventListener('timeupdate', updateTime);
+    audio.addEventListener('loadedmetadata', updateDuration);
+    audio.addEventListener('ended', handleEnded);
+
+    return () => {
+      audio.removeEventListener('timeupdate', updateTime);
+      audio.removeEventListener('loadedmetadata', updateDuration);
+      audio.removeEventListener('ended', handleEnded);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = isMuted ? 0 : volume;
+    }
+  }, [volume, isMuted]);
+
+  const togglePlayPause = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+      } else {
+        audioRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const toggleMute = () => {
+    if (isMuted) {
+      setIsMuted(false);
+      setVolume(previousVolume);
+    } else {
+      setPreviousVolume(volume);
+      setIsMuted(true);
+    }
+  };
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVolume = parseFloat(e.target.value);
+    setVolume(newVolume);
+    if (isMuted && newVolume > 0) {
+      setIsMuted(false);
+    }
+  };
+
+  const handleProgressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newTime = parseFloat(e.target.value);
+    setCurrentTime(newTime);
+    if (audioRef.current) {
+      audioRef.current.currentTime = newTime;
+    }
+  };
+
+  const formatTime = (time: number) => {
+    if (!time || isNaN(time)) return '0:00';
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-slate-900 to-slate-800 border-t border-slate-700 shadow-2xl z-50">
+      <audio
+        ref={audioRef}
+        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
+        crossOrigin="anonymous"
+      />
+
+      <div className="max-w-full mx-auto px-4 py-4">
+        {/* Progress Bar */}
+        <div className="flex items-center gap-2 mb-3">
+          <span className="text-xs text-slate-400 w-10 text-right">
+            {formatTime(currentTime)}
+          </span>
+          <input
+            type="range"
+            min="0"
+            max={duration || 0}
+            value={currentTime}
+            onChange={handleProgressChange}
+            className="flex-1 h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
+          />
+          <span className="text-xs text-slate-400 w-10">
+            {formatTime(duration)}
+          </span>
+        </div>
+
+        {/* Controls */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={togglePlayPause}
+              className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-700 transition-colors text-white"
+              aria-label={isPlaying ? 'Pause' : 'Play'}
+            >
+              {isPlaying ? (
+                <Pause size={20} fill="currentColor" />
+              ) : (
+                <Play size={20} fill="currentColor" />
+              )}
+            </button>
+
+            <div className="text-sm text-slate-300 font-medium">
+              Background Music
+            </div>
+          </div>
+
+          {/* Volume Control */}
+          <div className="flex items-center gap-3">
+            <button
+              onClick={toggleMute}
+              className="flex items-center justify-center w-8 h-8 rounded-full hover:bg-slate-700 transition-colors text-slate-300 hover:text-white"
+              aria-label={isMuted ? 'Unmute' : 'Mute'}
+            >
+              {isMuted ? <VolumeX size={18} /> : <Volume2 size={18} />}
+            </button>
+
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={isMuted ? 0 : volume}
+              onChange={handleVolumeChange}
+              className="w-24 h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
+              aria-label="Volume"
+            />
+
+            <span className="text-xs text-slate-400 w-8 text-right">
+              {Math.round((isMuted ? 0 : volume) * 100)}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/BackgroundLofiMusicPlayer.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Play, Pause, Volume2, VolumeX } from 'lucide-react';
+
+interface BackgroundLofiMusicPlayerProps {}
+
+export function BackgroundLofiMusicPlayer({}: BackgroundLofiMusicPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(0.3);
+  const [isMuted, setIsMuted] = useState(false);
+  const [hasUserInteracted, setHasUserInteracted] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const lofiStreamUrl =
+    'https://www.chosic.com/wp-content/uploads/2021/07/free-lofi-hip-hop-beats-background-music-for-videos.mp3';
+
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = isMuted ? 0 : volume;
+    }
+  }, [volume, isMuted]);
+
+  useEffect(() => {
+    const handleUserInteraction = () => {
+      setHasUserInteracted(true);
+      document.removeEventListener('click', handleUserInteraction);
+      document.removeEventListener('keydown', handleUserInteraction);
+    };
+
+    document.addEventListener('click', handleUserInteraction);
+    document.addEventListener('keydown', handleUserInteraction);
+
+    return () => {
+      document.removeEventListener('click', handleUserInteraction);
+      document.removeEventListener('keydown', handleUserInteraction);
+    };
+  }, []);
+
+  const togglePlayPause = () => {
+    if (!audioRef.current) return;
+
+    if (isPlaying) {
+      audioRef.current.pause();
+      setIsPlaying(false);
+    } else {
+      audioRef.current.play().catch((error) => {
+        console.error('Autoplay failed:', error);
+      });
+      setIsPlaying(true);
+    }
+  };
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+  };
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setVolume(parseFloat(e.target.value));
+    setIsMuted(false);
+  };
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <audio
+        ref={audioRef}
+        src={lofiStreamUrl}
+        loop
+        crossOrigin="anonymous"
+        onEnded={() => {
+          if (audioRef.current) {
+            audioRef.current.currentTime = 0;
+            audioRef.current.play();
+          }
+        }}
+      />
+
+      <div
+        className={`bg-gradient-to-br from-slate-800 to-slate-900 rounded-full shadow-lg border border-slate-700 transition-all duration-300 ${
+          isExpanded ? 'w-64 rounded-2xl' : 'w-16 h-16'
+        }`}
+      >
+        <div className="flex items-center justify-between p-3 h-16">
+          <button
+            onClick={togglePlayPause}
+            className="flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 transition-all text-white shadow-md hover:shadow-lg"
+            title={isPlaying ? 'Pause' : 'Play'}
+          >
+            {isPlaying ? (
+              <Pause size={20} fill="currentColor" />
+            ) : (
+              <Play size={20} fill="currentColor" />
+            )}
+          </button>
+
+          {isExpanded && (
+            <div className="flex-1 flex items-center gap-3 ml-3">
+              <button
+                onClick={toggleMute}
+                className="flex-shrink-0 text-slate-300 hover:text-white transition-colors"
+                title={isMuted ? 'Unmute' : 'Mute'}
+              >
+                {isMuted ? <VolumeX size={18} /> : <Volume2 size={18} />}
+              </button>
+
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                value={isMuted ? 0 : volume}
+                onChange={handleVolumeChange}
+                className="flex-1 h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500"
+                title="Volume"
+              />
+
+              <span className="text-xs text-slate-400 w-8 text-right">
+                {Math.round((isMuted ? 0 : volume) * 100)}%
+              </span>
+            </div>
+          )}
+
+          {!isExpanded && (
+            <button
+              onClick={() => setIsExpanded(true)}
+              className="absolute inset-0 rounded-full"
+              title="Expand player"
+            />
+          )}
+        </div>
+
+        {isExpanded && (
+          <button
+            onClick={() => setIsExpanded(false)}
+            className="absolute top-2 right-2 text-slate-400 hover:text-white transition-colors"
+            title="Collapse player"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      <div className="mt-2 text-center text-xs text-slate-400">
+        <p>🎵 Lofi Music</p>
+      </div>
+    </div>
+  );
+}

src/components/BackgroundMusicPlayer.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Volume2, VolumeX, Play, Pause } from 'lucide-react';
+
+interface Props {}
+
+export default function BackgroundMusicPlayer({}: Props) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(0.5);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    audio.volume = volume;
+  }, [volume]);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const handleCanPlay = () => {
+      setIsLoaded(true);
+      setError(null);
+    };
+
+    const handleError = () => {
+      setError('Failed to load audio');
+      setIsPlaying(false);
+    };
+
+    const handleEnded = () => {
+      audio.currentTime = 0;
+      audio.play().catch(() => {
+        setIsPlaying(false);
+      });
+    };
+
+    audio.addEventListener('canplay', handleCanPlay);
+    audio.addEventListener('error', handleError);
+    audio.addEventListener('ended', handleEnded);
+
+    return () => {
+      audio.removeEventListener('canplay', handleCanPlay);
+      audio.removeEventListener('error', handleError);
+      audio.removeEventListener('ended', handleEnded);
+    };
+  }, []);
+
+  const togglePlayPause = async () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    try {
+      if (isPlaying) {
+        audio.pause();
+        setIsPlaying(false);
+      } else {
+        await audio.play();
+        setIsPlaying(true);
+      }
+    } catch (err) {
+      setError('Autoplay policy prevented playback');
+      setIsPlaying(false);
+    }
+  };
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVolume = parseFloat(e.target.value);
+    setVolume(newVolume);
+  };
+
+  return (
+    <div className="fixed bottom-6 right-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-lg shadow-2xl p-4 w-80 border border-slate-700">
+      <audio
+        ref={audioRef}
+        src="http://localhost:3000/preview/bc2910c8-896c-49da-abcd-e239e4762b99"
+        loop
+        crossOrigin="anonymous"
+      />
+
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-white">Background Music</h3>
+          <div className="text-xs text-slate-400">
+            {isLoaded ? 'Ready' : 'Loading...'}
+          </div>
+        </div>
+
+        {error && (
+          <div className="text-xs text-red-400 bg-red-950 bg-opacity-50 rounded px-2 py-1">
+            {error}
+          </div>
+        )}
+
+        <div className="flex items-center gap-3">
+          <button
+            onClick={togglePlayPause}
+            disabled={!isLoaded}
+            className="flex-shrink-0 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed text-white rounded-full p-2 transition-colors duration-200"
+            aria-label={isPlaying ? 'Pause' : 'Play'}
+          >
+            {isPlaying ? (
+              <Pause size={20} fill="currentColor" />
+            ) : (
+              <Play size={20} fill="currentColor" />
+            )}
+          </button>
+
+          <div className="flex-1 flex items-center gap-2">
+            {volume === 0 ? (
+              <VolumeX size={18} className="text-slate-400 flex-shrink-0" />
+            ) : (
+              <Volume2 size={18} className="text-slate-400 flex-shrink-0" />
+            )}
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              value={volume}
+              onChange={handleVolumeChange}
+              className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+              aria-label="Volume"
+            />
+            <span className="text-xs text-slate-400 w-8 text-right">
+              {Math.round(volume * 100)}%
+            </span>
+          </div>
+        </div>
+
+        <div className="text-xs text-slate-500 text-center">
+          {isPlaying ? 'Now playing' : 'Paused'}
+        </div>
+      </div>
+    </div>
+  );
+}