AudioPlayer

audioplayer-1779394345496.tsx

'use client'
import { useState, useEffect } from 'react'

export default function AudioPlayer({
  title = 'Midnight Drive',
  artist = 'Synthwave Radio',
  emoji = '🎵',
  duration = 217,
}) {
  const [playing, setPlaying] = useState(false)
  const [current, setCurrent] = useState(42)
  const [vol, setVol] = useState(80)
  useEffect(() => {
    if (!playing) return
    const t = setInterval(() => setCurrent(c => c >= duration ? 0 : c + 1), 1000)
    return () => clearInterval(t)
  }, [playing, duration])
  const fmt = (s) => Math.floor(s/60) + ':' + String(s%60).padStart(2,'0')
  const bars = Array.from({ length: 40 }, () => 20 + Math.random() * 60)
  return (
    <div style={{ background:'linear-gradient(135deg,#1e1e2e,#16162a)', borderRadius:'20px', padding:'24px', maxWidth:'340px', color:'#fff' }}>
      <div style={{ display:'flex', alignItems:'center', gap:'14px', marginBottom:'20px' }}>
        <div style={{ width:'56px', height:'56px', borderRadius:'12px', background:'linear-gradient(135deg,#6d28d9,#2563eb)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'28px' }}>{emoji}</div>
        <div>
          <div style={{ fontWeight:700, fontSize:'16px' }}>{title}</div>
          <div style={{ color:'#94a3b8', fontSize:'13px', marginTop:'2px' }}>{artist}</div>
        </div>
      </div>
      <div style={{ display:'flex', alignItems:'flex-end', gap:'2px', height:'40px', marginBottom:'16px' }}>
        {bars.map((h, i) => (
          <div key={i} style={{
            flex:1, height:h+'%', borderRadius:'1px',
            background:i < (current/duration)*40 ? '#a78bfa' : '#2d2d3d',
            transition:'background 0.3s',
            animation:playing?'wave 1s ease-in-out infinite':'none',
            animationDelay:(i*0.025)+'s',
          }} />
        ))}
        <style>{'@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.3)}}'}</style>
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', fontSize:'11px', color:'#94a3b8', marginBottom:'8px' }}>
        <span>{fmt(current)}</span><span>{fmt(duration)}</span>
      </div>
      <div style={{ height:'3px', background:'#2d2d3d', borderRadius:'2px', marginBottom:'20px', cursor:'pointer' }}
        onClick={e => { const r = e.currentTarget.getBoundingClientRect(); setCurrent(Math.round((e.clientX-r.left)/r.width*duration)) }}
      >
        <div style={{ height:'100%', borderRadius:'2px', background:'linear-gradient(90deg,#6d28d9,#a78bfa)', width:(current/duration*100)+'%', transition:'width 0.5s' }} />
      </div>
      <div style={{ display:'flex', justifyContent:'center', gap:'20px', alignItems:'center' }}>
        <button onClick={()=>setCurrent(0)} style={{ background:'none', border:'none', color:'#94a3b8', cursor:'pointer', fontSize:'18px' }}>⏮</button>
        <button onClick={()=>setPlaying(!playing)} style={{
          width:'48px', height:'48px', borderRadius:'50%', border:'none',
          background:'linear-gradient(135deg,#6d28d9,#a78bfa)', color:'#fff',
          fontSize:'20px', cursor:'pointer',
        }}>{playing?'⏸':'▶'}</button>
        <button onClick={()=>setCurrent(d=>Math.min(d,duration))} style={{ background:'none', border:'none', color:'#94a3b8', cursor:'pointer', fontSize:'18px' }}>⏭</button>
      </div>
    </div>
  )
}

Component info

CategoryMedia

Frameworkreact

TierFREE

Copies0

About

Audio player UI with waveform visualization and track info

More from Media

'use client'
import { useState, useEffect } from 'react'

const IMAGES = [
  { id: 1, src: null, color: 'linear-gradient(135deg, #C9A84C, #6366f1)', caption: 'GlowButton Component', w: 1, h: 2 },
  { id: 2, src: null, color: 'linear-gradient(135deg,

ImageGallery

Media

'use client';
import { useEffect, useRef, useState } from 'react';

export default function AudioVisualizer({ isPlaying = true }) {
  const bars = 32;
  const refs = useRef([]);
  const [playing, setPlaying] = useState(isPlaying);

  useEffect(() =>

AudioVisualizer

Media

'use client'
import { useState, useRef } from 'react'

export default function ComparisonSlider() {
  const [pos, setPos] = useState(50)
  const ref = useRef(null)
  const dragging = useRef(false)
  const onMouseDown = () => { dragging.current = true

ComparisionSlider

Media

'use client'
import { useState } from 'react'

const IMAGES = [
  { id:1, emoji:'🌄', label:'Mountains', bg:'linear-gradient(135deg,#667eea,#764ba2)', h:180 },
  { id:2, emoji:'🌊', label:'Ocean', bg:'linear-gradient(135deg,#0891b2,#0e7490)', h:120 }

ImageGallery

Media