Bob AI: Add a background lofi music player component that plays roya

Update src/app/layout.tsx
Bob AI: Add background music player to the website. Implement an aud
2026-02-24 19:27:07 +02:00 · 2026-02-24 17:24:47 +00:00 · 2026-02-24 19:20:29 +02:00
3 changed files with 327 additions and 0 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,9 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
+import { BackgroundLofiMusicPlayer } from "@/components/BackgroundLofiMusicPlayer";
+
+// Create the BackgroundLofiMusicPlayer component file at src/components/BackgroundLofiMusicPlayer.tsx

 const notoSans = Noto_Sans({
  variable: "--font-noto-sans",  subsets: ["latin"],
@@ -28,6 +31,7 @@ export default function RootLayout({
        <body
          className={`${notoSans.variable} ${inter.variable} antialiased`}
        >
+          <BackgroundLofiMusicPlayer />
          <Tag />
          {children}
        
--- a/src/components/AudioPlayer.tsx
+++ b/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>
+  );
+}
--- a/src/components/BackgroundLofiMusicPlayer.tsx
+++ b/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>
+  );
+}
Author	SHA1	Message	Date
kudindmitriy	698a3735a6	Bob AI: Add a background lofi music player component that plays roya	2026-02-24 19:27:07 +02:00
bender	7ad2e91f60	Update src/app/layout.tsx	2026-02-24 17:24:47 +00:00
kudindmitriy	0cbbc10d20	Bob AI: Add background music player to the website. Implement an aud	2026-02-24 19:20:29 +02:00