Audio Producer

Podcast Player

// components/PodcastPlayer.tsx
'use client'
import { useState } from 'react'
import { AudioPlayer } from './AudioPlayer'

interface Episode {
  id: string
  title: string
  description: string
  audioUrl: string
  duration: number
  publishedAt: string
}

export function PodcastPlayer({ episodes }: { episodes: Episode[] }) {
  const [currentEpisode, setCurrentEpisode] = useState<Episode>(episodes[0])

  return (
    <div>
      <AudioPlayer
        src={currentEpisode.audioUrl}
        title={currentEpisode.title}
      />

      <div className="mt-6">
        <h3 className="font-semibold mb-4">Episodes</h3>
        <div className="space-y-2">
          {episodes.map((episode) => (
            <button
              key={episode.id}
              onClick={() => setCurrentEpisode(episode)}
              className={`w-full text-left p-4 rounded-lg ${
                currentEpisode.id === episode.id
                  ? 'bg-blue-100 border-2 border-blue-600'
                  : 'bg-gray-100'
              }`}
            >
              <h4 className="font-medium">{episode.title}</h4>
              <p className="text-sm text-gray-600 mt-1">
                {episode.description}
              </p>
              <p className="text-xs text-gray-500 mt-2">
                {new Date(episode.publishedAt).toLocaleDateString()}
              </p>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

Waveform Visualization

// components/Waveform.tsx
'use client'
import { useEffect, useRef } from 'react'

export function Waveform({ audioSrc }: { audioSrc: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const audioRef = useRef<HTMLAudioElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    const audio = audioRef.current
    if (!canvas || !audio) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    const audioContext = new AudioContext()
    const source = audioContext.createMediaElementSource(audio)
    const analyser = audioContext.createAnalyser()

    source.connect(analyser)
    analyser.connect(audioContext.destination)

    analyser.fftSize = 256
    const bufferLength = analyser.frequencyBinCount
    const dataArray = new Uint8Array(bufferLength)

    const draw = () => {
      requestAnimationFrame(draw)

      analyser.getByteFrequencyData(dataArray)

      ctx.fillStyle = 'rgb(0, 0, 0)'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      const barWidth = (canvas.width / bufferLength) * 2.5
      let x = 0

      for (let i = 0; i < bufferLength; i++) {
        const barHeight = (dataArray[i] / 255) * canvas.height

        ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`
        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight)

        x += barWidth + 1
      }
    }

    draw()
  }, [audioSrc])

  return (
    <div>
      <audio ref={audioRef} src={audioSrc} controls />
      <canvas ref={canvasRef} width={600} height={200} />
    </div>
  )
}

Audio Recording

// hooks/useAudioRecorder.ts
'use client'
import { useState, useRef } from 'react'

export function useAudioRecorder() {
  const [recording, setRecording] = useState(false)
  const [audioURL, setAudioURL] = useState<string | null>(null)
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const chunksRef = useRef<Blob[]>([])

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const mediaRecorder = new MediaRecorder(stream)

      mediaRecorder.ondataavailable = e => {
        chunksRef.current.push(e.data)
      }

      mediaRecorder.onstop = () => {
        const blob = new Blob(chunksRef.current, { type: 'audio/webm' })
        const url = URL.createObjectURL(blob)
        setAudioURL(url)
        chunksRef.current = []
      }

      mediaRecorder.start()
      mediaRecorderRef.current = mediaRecorder
      setRecording(true)
    } catch (error) {
      console.error('Failed to start recording:', error)
    }
  }

  const stopRecording = () => {
    if (mediaRecorderRef.current && recording) {
      mediaRecorderRef.current.stop()
      mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop())
      setRecording(false)
    }
  }

  return { recording, audioURL, startRecording, stopRecording }
}

Usage:

'use client'
import { useAudioRecorder } from '@/hooks/useAudioRecorder'

export function VoiceRecorder() {
  const { recording, audioURL, startRecording, stopRecording } = useAudioRecorder()

  return (
    <div>
      <button
        onClick={recording ? stopRecording : startRecording}
        className={`px-6 py-3 rounded-lg ${
          recording ? 'bg-red-600' : 'bg-blue-600'
        } text-white`}
      >
        {recording ? '⏹️ Stop Recording' : '🎤 Start Recording'}
      </button>

      {audioURL && (
        <div className="mt-4">
          <audio src={audioURL} controls />
          <a
            href={audioURL}
            download="recording.webm"
            className="mt-2 inline-block px-4 py-2 bg-green-600 text-white rounded"
          >
            Download Recording
          </a>
        </div>
      )}
    </div>
  )
}

Audio Effects

// lib/audio-effects.ts

export class AudioEffects {
  private audioContext: AudioContext
  private source: MediaElementAudioSourceNode
  private gainNode: GainNode
  private filterNode: BiquadFilterNode

  constructor(audioElement: HTMLAudioElement) {
    this.audioContext = new AudioContext()
    this.source = this.audioContext.createMediaElementSource(audioElement)
    this.gainNode = this.audioContext.createGain()
    this.filterNode = this.audioContext.createBiquadFilter()

    // Connect: source -> filter -> gain -> destination
    this.source.connect(this.filterNode)
    this.filterNode.connect(this.gainNode)
    this.gainNode.connect(this.audioContext.destination)
  }

  setVolume(value: number) {
    this.gainNode.gain.value = value
  }

  setLowPassFilter(frequency: number) {
    this.filterNode.type = 'lowpass'
    this.filterNode.frequency.value = frequency
  }

  setHighPassFilter(frequency: number) {
    this.filterNode.type = 'highpass'
    this.filterNode.frequency.value = frequency
  }

  setBandPassFilter(frequency: number) {
    this.filterNode.type = 'bandpass'
    this.filterNode.frequency.value = frequency
  }
}

Spatial Audio

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

export function SpatialAudio({ audioSrc }: { audioSrc: string }) {
  const audioRef = useRef<HTMLAudioElement>(null)
  const [position, setPosition] = useState({ x: 0, y: 0 })

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

    const audioContext = new AudioContext()
    const source = audioContext.createMediaElementSource(audio)
    const panner = audioContext.createPanner()

    panner.panningModel = 'HRTF'
    panner.distanceModel = 'inverse'
    panner.refDistance = 1
    panner.maxDistance = 10000

    source.connect(panner)
    panner.connect(audioContext.destination)

    // Update panner position based on mouse/touch
    panner.setPosition(position.x, position.y, 0)
  }, [position])

  return (
    <div
      onMouseMove={(e) => {
        const rect = e.currentTarget.getBoundingClientRect()
        const x = ((e.clientX - rect.left) / rect.width) * 2 - 1
        const y = ((e.clientY - rect.top) / rect.height) * 2 - 1
        setPosition({ x, y })
      }}
      className="w-full h-96 bg-gray-100 rounded-lg flex items-center justify-center cursor-crosshair"
    >
      <audio ref={audioRef} src={audioSrc} controls />
      <p className="absolute text-center text-sm text-gray-600">
        Move your mouse to change sound position
      </p>
    </div>
  )
}

When to Use Me

Perfect for:

• Building audio players
• Creating podcast platforms
• Adding sound effects
• Implementing voice recording
• Processing audio in real-time

I'll help you:

• Build custom audio players
• Add waveform visualizations
• Implement audio recording
• Apply audio effects
• Create spatial audio experiences

What I'll Create

🎵 Audio Players
🎙️ Voice Recorders
📊 Waveform Visualizations
🎛️ Audio Effects
🎧 Spatial Audio
🎼 Playlist Management

Let's create amazing audio experiences!