Sticky Audio Player with Playlist

"I need a sticky audio player with playlist following the new apple liquid glass design language. To review a component sample of the overall style pkease see : I have this Liquid-glass built using the David UI Tailwind CSS Library by Creative Tim. Integrate the component in my project. There are more details on the Framework Documentation at https://www.creative-tim.com/david-ui/docs/html/liquid-glass . Component Code: ```html <div class="flex items-center justify-center w-screen min-h-[400px] bg-cover bg-center bg-no-repeat rounded-md" style="background-image: url('https://images.unsplash.com/photo-1543587858-749d3aedd90e?w=800&auto=format&fit=crop&q=90');"> <div class="relative w-80"> <div class="relative p-4 text-white bg-black/20 border border-white/50 backdrop-blur-sm rounded-lg shadow-[inset_0_1px_0px_rgba(255,255,255,0.75),0_0_9px_rgba(0,0,0,0.2),0_3px_8px_rgba(0,0,0,0.15)] hover:bg-white/30 transition-all duration-300 before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-white/60 before:via-transparent before:to-transparent before:opacity-70 before:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:bg-gradient-to-tl after:from-white/30 after:via-transparent after:to-transparent after:opacity-50 after:pointer-events-none"> <div class="relative z-10"> <div class="flex items-center justify-between mb-3"> <span class="text-sm font-medium opacity-90">AI Voice Assistant</span> <div class="flex items-center gap-1"> <div class="w-1 h-1 bg-green-400 rounded-full animate-pulse"></div> <span class="text-xs opacity-70">Listening</span> </div> </div> <div class="text-center mb-4"> <div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 border border-white/30 backdrop-blur-sm rounded-full shadow-[inset_0_1px_0px_rgba(255,255,255,0.75),0_0_9px_rgba(0,0,0,0.2),0_3px_8px_rgba(0,0,0,0.15)] hover:bg-white/30 transition-all duration-300 cursor-pointer group"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-white group-hover:scale-110 transition-transform duration-200"> <path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" /> <path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.751 6.751 0 0 1-6 6.709v2.291h3a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3v-2.291A6.751 6.751 0 0 1 5.25 12.75v-1.5A.75.75 0 0 1 6 10.5Z" /> </svg> </div> </div> <div class="mb-4"> <div class="flex justify-center items-center gap-1 mb-2"> <div class="w-1 h-4 bg-white/70 rounded-full animate-pulse" style="animation-delay: 0ms;"></div> <div class="w-1 h-6 bg-white/70 rounded-full animate-pulse" style="animation-delay: 100ms;"></div> <div class="w-1 h-3 bg-white/70 rounded-full animate-pulse" style="animation-delay: 200ms;"></div> <div class="w-1 h-8 bg-white/70 rounded-full animate-pulse" style="animation-delay: 300ms;"></div> <div class="w-1 h-2 bg-white/70 rounded-full animate-pulse" style="animation-delay: 400ms;"></div> <div class="w-1 h-5 bg-white/70 rounded-full animate-pulse" style="animation-delay: 500ms;"></div> <div class="w-1 h-7 bg-white/70 rounded-full animate-pulse" style="animation-delay: 600ms;"></div> </div> <p class="text-center text-xs opacity-70">Say "Hey AI" to start speaking</p> </div> </div> </div> </div> </div>"