Claude Code के साथ Audio Player कैसे बनाएं

Claude Code से Audio Player बनाएं

Music streaming services, podcasts, educational content आदि में custom audio player की ज़रूरत कई जगहों पर होती है। Claude Code का उपयोग करके, waveform display और playlist functionality वाला professional player बनाया जा सकता है।

Basic Player Implementation

> Custom audio player बनाओ।
> Play/pause, seek bar, volume, playback speed change support करो।
> Playlist functionality और waveform display भी implement करो।

// src/components/AudioPlayer.tsx
'use client';
import { useRef, useState, useEffect } from 'react';

interface Track {
  id: string;
  title: string;
  artist: string;
  src: string;
  duration: number;
  coverArt?: string;
}

interface AudioPlayerProps {
  tracks: Track[];
  initialTrackIndex?: number;
}

export function AudioPlayer({ tracks, initialTrackIndex = 0 }: AudioPlayerProps) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [currentTrackIndex, setCurrentTrackIndex] = useState(initialTrackIndex);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [volume, setVolume] = useState(0.8);

  const currentTrack = tracks[currentTrackIndex];

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    const onTimeUpdate = () => setCurrentTime(audio.currentTime);
    const onLoadedMetadata = () => setDuration(audio.duration);
    const onEnded = () => playNext();

    audio.addEventListener('timeupdate', onTimeUpdate);
    audio.addEventListener('loadedmetadata', onLoadedMetadata);
    audio.addEventListener('ended', onEnded);

    return () => {
      audio.removeEventListener('timeupdate', onTimeUpdate);
      audio.removeEventListener('loadedmetadata', onLoadedMetadata);
      audio.removeEventListener('ended', onEnded);
    };
  }, [currentTrackIndex]);

  const togglePlay = () => {
    const audio = audioRef.current;
    if (!audio) return;
    if (audio.paused) {
      audio.play();
      setIsPlaying(true);
    } else {
      audio.pause();
      setIsPlaying(false);
    }
  };

  const playNext = () => {
    const nextIndex = (currentTrackIndex + 1) % tracks.length;
    setCurrentTrackIndex(nextIndex);
    setTimeout(() => {
      audioRef.current?.play();
      setIsPlaying(true);
    }, 100);
  };

  const playPrevious = () => {
    if (currentTime > 3) {
      // 3 seconds से ज़्यादा हो तो शुरू में वापस जाएं
      audioRef.current!.currentTime = 0;
    } else {
      const prevIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
      setCurrentTrackIndex(prevIndex);
      setTimeout(() => {
        audioRef.current?.play();
        setIsPlaying(true);
      }, 100);
    }
  };

  const formatTime = (sec: number) => {
    const m = Math.floor(sec / 60);
    const s = Math.floor(sec % 60);
    return `${m}:${s.toString().padStart(2, '0')}`;
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden max-w-md mx-auto">
      <audio ref={audioRef} src={currentTrack.src} preload="metadata" />

      {/* Cover Art */}
      <div className="aspect-square bg-gray-200 dark:bg-gray-700 relative">
        {currentTrack.coverArt ? (
          <img src={currentTrack.coverArt} alt={currentTrack.title} className="w-full h-full object-cover" />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-6xl text-gray-400">♪</div>
        )}
      </div>

      {/* Track Information */}
      <div className="p-6">
        <h3 className="text-lg font-bold dark:text-white truncate">{currentTrack.title}</h3>
        <p className="text-gray-500 dark:text-gray-400 text-sm">{currentTrack.artist}</p>

        {/* Seek Bar */}
        <div className="mt-4">
          <input
            type="range"
            min={0}
            max={duration || 0}
            value={currentTime}
            onChange={(e) => {
              const time = Number(e.target.value);
              audioRef.current!.currentTime = time;
              setCurrentTime(time);
            }}
            className="w-full h-1 accent-blue-600"
          />
          <div className="flex justify-between text-xs text-gray-400 mt-1">
            <span>{formatTime(currentTime)}</span>
            <span>{formatTime(duration)}</span>
          </div>
        </div>

        {/* Controls */}
        <div className="flex items-center justify-center gap-6 mt-4">
          <button onClick={playPrevious} className="text-2xl dark:text-white hover:text-blue-600">⏮</button>
          <button
            onClick={togglePlay}
            className="w-14 h-14 rounded-full bg-blue-600 text-white text-2xl flex items-center justify-center hover:bg-blue-700"
          >
            {isPlaying ? '⏸' : '▶'}
          </button>
          <button onClick={playNext} className="text-2xl dark:text-white hover:text-blue-600">⏭</button>
        </div>

        {/* Volume */}
        <div className="flex items-center gap-2 mt-4">
          <span className="text-sm dark:text-gray-400">🔊</span>
          <input
            type="range"
            min={0}
            max={1}
            step={0.05}
            value={volume}
            onChange={(e) => {
              const vol = Number(e.target.value);
              audioRef.current!.volume = vol;
              setVolume(vol);
            }}
            className="flex-1 h-1 accent-blue-600"
          />
        </div>
      </div>

      {/* Playlist */}
      <div className="border-t dark:border-gray-700 max-h-60 overflow-y-auto">
        {tracks.map((track, index) => (
          <button
            key={track.id}
            onClick={() => {
              setCurrentTrackIndex(index);
              setTimeout(() => { audioRef.current?.play(); setIsPlaying(true); }, 100);
            }}
            className={`w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 ${
              index === currentTrackIndex ? 'bg-blue-50 dark:bg-blue-900/30' : ''
            }`}
          >
            <span className="text-xs text-gray-400 w-6 text-right">
              {index === currentTrackIndex && isPlaying ? '♪' : index + 1}
            </span>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium dark:text-white truncate">{track.title}</p>
              <p className="text-xs text-gray-500 truncate">{track.artist}</p>
            </div>
            <span className="text-xs text-gray-400">{formatTime(track.duration)}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

Web Audio API से Waveform Display

Advanced feature के रूप में, Web Audio API से real-time waveform display भी Claude Code से request किया जा सकता है। AudioContext और AnalyserNode को combine करके, playing audio की waveform Canvas पर draw की जा सकती है।

Related Articles

Video player implementation के लिए Video Player Construction Guide देखें, responsive support के लिए Responsive Design भी reference करें।

Web Audio API की details MDN (developer.mozilla.org/Web/API/Web_Audio_API) पर देखें।

2026 production upgrade: audio UI को उपयोगी बनाना

Audio player सिर्फ MP3 चलाने वाला button नहीं है। यह वह UI है जिससे user समझता है कि कौन सा lesson, podcast या sample चल रहा है, कितना progress हुआ है, कैसे पीछे जाना है, और अगला action क्या है। Learning content, media product और paid course में player को playback के साथ progress, error state, accessibility, analytics और CTA भी संभालना चाहिए।

ऊपर का React/TypeScript component practical runnable base है। HTMLAudioElement को useRef में रखा गया है और React current track, play state, current time और volume manage करता है। इसे copy करते समय tracks खाली न रखें, src real audio file की URL हो, और component client side पर render हो। इसके बाद waveform, saved progress, paid preview और consultation CTA जोड़े जा सकते हैं।

HTMLAudioElement vs Web Audio API

HTMLAudioElement browser के audio element का JavaScript object है। यह load, play, pause, seek, volume, duration और media events संभालता है। Normal lesson player, podcast या product preview के लिए पहले यही use करें। Official reference के लिए MDN का audio element देखें।

Web Audio API lower-level audio graph है। AudioContext, MediaElementAudioSourceNode, AnalyserNode और GainNode से waveform, spectrum, equalizer और fade effects बनाए जा सकते हैं। यह playback controls का replacement नहीं है; यह enhancement layer है। Details के लिए Web Audio API और React DOM ref pattern के लिए useRef देखें।

Layer	काम	Production note
Data	title, artist, URL, duration, cover	Empty playlist render न करें
Playback	HTMLAudioElement से play, pause, seek	loadedmetadata, timeupdate, ended, error सुनें
Visualization	Web Audio API से waveform	CDN CORS और AudioContext.resume() check करें
UI	buttons, sliders, playlist	aria-label, keyboard focus, screen reader text दें
Product	progress, analytics, CTA	start, 50%, complete और click track करें

Real use case examples

पहला use case language learning या coding course है। Learner को speed control, 10-second rewind, transcript sync और resume चाहिए। अच्छे player से revision आसान होती है।

दूसरा use case podcast या media site है। Cover, chapters, related episodes, newsletter signup और membership CTA player के आसपास रखे जा सकते हैं।

तीसरा use case creator storefront है। Music, voice-over, sound effect या course sample बेचने से पहले short preview भरोसा बनाता है। Gumroad या checkout link के साथ यह monetization path बनता है।

चौथा use case internal training है। Sales script, support example, pronunciation और compliance audio में progress save करना और admin report दिखाना जरूरी होता है।

Pitfall और failure cases

सबसे common pitfall autoplay पर भरोसा करना है। Browser user click के बिना audio.play() reject कर सकता है। क्योंकि play() Promise देता है, production code में rejection catch करके clear message दिखाना चाहिए।

दूसरी failure duration जल्दी पढ़ना है। loadedmetadata से पहले duration NaN या 0 हो सकती है। Seek bar का max guarded रखें और loading state दिखाएं।

तीसरी problem Web Audio API + CDN CORS है। Local file से waveform चलेगी, लेकिन final domain पर CORS header न हो तो AnalyserNode fail हो सकता है।

React में track change के बाद तुरंत play() call करना भी risky है। Demo में setTimeout ठीक लगता है, पर production में canplay या loadedmetadata wait करना बेहतर है।

Links और monetization CTA

React state design के लिए Claude Code React development, audio analysis के लिए Claude Code Web Audio API, और accessible controls के लिए Claude Code accessibility पढ़ें।

अगर audio player course, paid podcast या media funnel का हिस्सा है, तो CTA पहले तय करें: free preview, email signup, paid download, फिर team consultation। ClaudeCodeLab की training / consultation में Claude Code rules, CLAUDE.md, review checklist और analytics events real repository के हिसाब से design किए जा सकते हैं।