skills.rest
daffy0208
daffy0208COMMUNITY
Explore all skills by this author →
GitHub

audio-producer

Develop custom web audio players with playback, recording, and waveform visualization.

34|7|Updated Oct 22, 2025
Search Tags:#typescript#react#audio#recording#sound-design#web-audio-api#player
One-click install
npx skills add https://github.com/daffy0208/ai-dev-standards --skill audio-producer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audio-producer
Source: https://github.com/daffy0208/ai-dev-standards/tree/main/SKILLS/audio-producer
Command: npx skills add https://github.com/daffy0208/ai-dev-standards --skill audio-producer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the complexity of web audio development by providing ready-to-use components for building custom audio players, recording interfaces, and interactive sound experiences.

Core Features & Use Cases

  • Custom Audio Players: Create fully-featured audio players with play, pause, seek, and volume controls.
  • Voice Recording: Implement browser-based audio recording with download functionality.
  • Use Case: Imagine you're building a podcast platform. Use this Skill to create a custom audio player with waveform visualization, episode management, and spatial audio effects.

Quick Start

Use the audio-producer skill to create a custom audio player for the podcast file 'episode-1.mp3' with play, pause, and volume controls.

Frequently Asked Questions about audio-producer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom audio player with play, pause, and volume controls for the web?▼

Build a custom audio player using the Web Audio API and React to create stateful UI components with play, pause, seek, and volume controls. This Skill provides ready-to-use components that handle playback state management and real-time audio manipulation without reinventing the control logic.

Can I record audio directly in the browser and download it?▼

Yes, the MediaRecorder API enables browser-based voice recording with download functionality. This Skill wraps that API into React components so you can implement recording interfaces without managing raw media streams or blob handling yourself.

What's the best way to visualize audio waveforms in a web application?▼

Visualize waveforms using the Canvas API connected to Web Audio API frequency data. This Skill provides waveform visualization components that render real-time audio data, eliminating manual canvas drawing and frequency analysis complexity.

Can I add waveform visualization and spatial audio effects to a podcast player?▼

Yes, this Skill enables building podcast players with waveform visualization, playlist management, playback controls, and spatial audio effects using React components and the Web Audio API for interactive sound design.

Do I need to learn the Web Audio API directly to add audio features to my React app?▼

Not necessarily—this Skill abstracts Web Audio API complexity into reusable React components for recording, playback, and waveform visualization, letting you build audio features without deep API expertise.

What are the limitations of browser-based audio recording?▼

Browser recording is limited by browser permissions, audio codec support, and user device capabilities. This Skill handles MediaRecorder API constraints, but cross-browser codec compatibility and mobile microphone access depend on the user's environment.

Related Skills

Explore More Software Engineering Skills→
team-telnyxteam-telnyx
3

telnyx-stt

Transcribe MP3, WAV, OGG, M4A, and WebM audio files via the Telnyx Speech-to-Text API.

Official
Basic
GainInsightDevGainInsightDev

af-comms-expertise

Send project event notifications to Zulip streams and legacy Slack channels.

Official
Intermediate
sawaraesawarae
18

mute

Toggle Text-to-Speech audio output while preserving mascot animations.

Community
Basic
Adam-GuerinAdam-Guerin
1

frontend-developer

Develop React components and manage client-side state for web applications.

Community
Advanced