So erstellen Sie einen Audioplayer mit Claude Code

Einen Audioplayer mit Claude Code erstellen

Es gibt viele Szenarien, in denen ein benutzerdefinierter Audioplayer benötigt wird – Musik-Streaming-Dienste, Podcasts, Bildungsinhalte und mehr. Mit Claude Code können Sie einen vollwertigen Player mit Wellenformanzeige und Playlist-Funktionalität erstellen.

Implementierung des Basis-Players

> Erstelle einen benutzerdefinierten Audioplayer.
> Mit Wiedergabe/Pause, Suchleiste, Lautstärke und Wiedergabegeschwindigkeit.
> Implementiere auch Playlist-Funktion und Wellenformanzeige.

// 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) {
      // Bei mehr als 3 Sekunden zum Anfang zurückkehren
      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">&#9834;</div>
        )}
      </div>

      {/* Track-Informationen */}
      <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>

        {/* Suchleiste */}
        <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>

        {/* Steuerung */}
        <div className="flex items-center justify-center gap-6 mt-4">
          <button onClick={playPrevious} className="text-2xl dark:text-white hover:text-blue-600">&#9198;</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 ? '&#9208;' : '&#9654;'}
          </button>
          <button onClick={playNext} className="text-2xl dark:text-white hover:text-blue-600">&#9197;</button>
        </div>

        {/* Lautstärke */}
        <div className="flex items-center gap-2 mt-4">
          <span className="text-sm dark:text-gray-400">&#128266;</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 ? '&#9834;' : 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>
  );
}

Wellenformanzeige mit Web Audio API

Als erweiterte Funktion können Sie Claude Code auch mit der Echtzeit-Wellenformanzeige über die Web Audio API beauftragen. Durch die Kombination von AudioContext und AnalyserNode kann die Audiowellenform während der Wiedergabe auf einem Canvas gezeichnet werden.

Verwandte Artikel

Für die Implementierung eines Videoplayers siehe den Videoplayer-Bauanleitung. Zur responsiven Anpassung siehe Responsive Design.

Details zur Web Audio API finden Sie auf MDN (developer.mozilla.org/Web/API/Web_Audio_API).

Produktions-Upgrade 2026: aus Wiedergabe wird Audio-UI

Ein Audioplayer ist mehr als ein Play-Button. Er hilft Nutzerinnen und Nutzern zu verstehen, was gerade laeuft, wie weit sie sind, wie sie zurueckspringen, die Lautstaerke aendern und was danach passieren soll. In Lernplattformen, Podcasts, Mitgliederbereichen und Medienprodukten ist der Player auch eine Produktflaeche: Fortschritt speichern, Fehler erklaeren, Analytics senden und zur Anmeldung, zum Kauf oder zur consultation fuehren.

Der React/TypeScript-Code oben ist eine lauffaehige Basis. Das echte Medium liegt als HTMLAudioElement in einem useRef; React verwaltet aktuelle Spur, Play-State, Zeit und Lautstaerke. Beim Kopieren in ein Projekt sollten tracks nie leer sein, jede src muss auf eine reale Audiodatei zeigen, und die Komponente muss clientseitig laufen. Danach lassen sich Wellenform, Lernfortschritt, Paywall-Regeln und CTA sauber ergaenzen.

HTMLAudioElement oder Web Audio API

HTMLAudioElement ist das Browserobjekt hinter dem audio-Element. Es uebernimmt Laden, Dekodieren, Abspielen, Pausieren, Lautstaerke, aktuelle Zeit, Dauer, Metadaten und Media-Events. Fuer einen Kursplayer, Podcast oder eine Produktprobe ist das der stabile Startpunkt. Die offizielle MDN-Referenz zum audio-Element beschreibt Attribute wie preload, Quellen und Events.

Die Web Audio API ist niedriger angesetzt. Mit AudioContext, MediaElementAudioSourceNode, AnalyserNode und GainNode bauen Sie einen Audio-Graphen fuer Wellenformen, Spektren, Equalizer, Fades und audio-reaktive Oberflaechen. Sie ersetzt nicht die Bedienlogik, sondern ergaenzt sie. Details stehen in der MDN-Dokumentation zur Web Audio API. Warum das DOM-Element in React in einer Ref bleibt, erklaert useRef.

Ebene	Aufgabe	Produktionshinweis
Daten	Titel, Autor, URL, Dauer, Cover, Transkript-ID	Playlist vor dem Rendern validieren
Wiedergabe	HTMLAudioElement fuer Play, Pause, Seek und Volume	loadedmetadata, timeupdate, ended und Fehler behandeln
Visualisierung	Web Audio API fuer Wellenform oder Spektrum	CORS am CDN pruefen und AudioContext.resume() nach Nutzeraktion ausfuehren
UI	Buttons, Slider, Liste, Zeitangaben	Labels, Tastaturfokus und Screenreader-Texte einplanen
Produkt	Analytics, Fortschritt, CTA, Premiumregeln	Start, 50%, Ende, Wiederholung und CTA-Klicks messen

Reale use case Beispiele

Erster use case: Lerninhalte. In Sprachkursen, Programmierlektionen und Onboarding-Modulen brauchen Lernende Geschwindigkeit, 10-Sekunden-Ruecksprung, Kapitel, Transkript-Sync und Fortsetzen. Der Mehrwert liegt darin, Wiederholung einfach zu machen.

Zweiter use case: Podcast und redaktionelle Medien. Ein eigener Player kann Cover, Kapitel, verwandte Folgen, Newsletter-Anmeldung und Mitgliedschaftsangebot anzeigen. Nach einer kostenlosen Folge sollte der naechste Schritt klar sein: weitere Folge, Abo, Download oder training.

Dritter use case: Creator-Commerce. Musiker, Sprecher, Sounddesigner und Kursanbieter koennen vor dem Kauf eine kurze Probe abspielen. Eine sichtbare Wellenform und ein Gumroad- oder Produktlink machen das Angebot konkreter und vertrauenswuerdiger.

Vierter use case: interne Schulung. Verkaufsskripte, Supportbeispiele, Aussprachetraining und Compliance-Inhalte lassen sich als kurze Audiolisten organisieren. Dort zaehlen gespeicherter Fortschritt, Fehlerzustaende und Admin-Auswertungen mehr als Animation.

Pitfalls und konkrete Fehler

Der haeufigste pitfall ist die Annahme, Autoplay funktioniere immer. Moderne Browser blockieren audio.play() oft, bis der Nutzer klickt oder tippt. Da play() eine Promise zurueckgibt, muss Produktionscode Ablehnungen behandeln und eine klare Anweisung anzeigen.

Der zweite Fehler ist, duration zu frueh zu verwenden. Vor loadedmetadata kann die Dauer NaN oder null sein. Slider brauchen geschuetzte Maximalwerte, und die UI sollte erst nach Metadaten eine verlaessliche Dauer anzeigen.

Die Wellenform bringt CORS-Risiken. Wenn Audio von einem CDN kommt, muss der Server passende Header senden, damit Web Audio API das Signal analysieren darf. Lokal kann alles funktionieren, waehrend die Produktion still fehlschlaegt.

Auch React-State kann vom Media-Element abweichen. Ein setTimeout nach Trackwechsel ist fuer eine Demo okay, aber im Produkt sollte canplay oder loadedmetadata abgewartet werden, bevor erneut play() aufgerufen wird.

Links und monetization CTA

Fuer die React-Seite lesen Sie Claude Code React development. Fuer Analyse und Wellenform geht es weiter mit Claude Code Web Audio API. Fuer Tastatur, Labels und Screenreader nutzen Sie Claude Code accessibility.

Wenn der Player einen Kurs, Premium-Podcast oder eine Verkaufsseite unterstuetzt, sollte die monetization CTA vor dem Feinschliff feststehen. Ein sinnvoller Pfad ist kostenlose Probe, E-Mail-Registrierung, bezahltes Produkt und dann consultation fuer Teams, die es in einem echten Repository betreiben wollen. ClaudeCodeLab kann Claude-Code-Regeln, CLAUDE.md, Review-Checklisten und Analytics-Events ueber training / consultation strukturieren.