Skip to main content
Prompts HTML5 Web Audio Music Player Builder

developer coding user risk: low

HTML5 Web Audio Music Player Builder

Develop a web-based music player using HTML5, CSS3, and JavaScript with the Web Audio API, including modern interface with album art and visualizations, playlist management with dr…

PROMPT 

Develop a web-based music player using HTML5, CSS3, and JavaScript with the Web Audio API. Create a modern interface with album art display and visualizations. Implement playlist management with drag-and-drop reordering. Add audio controls including play/pause, skip, seek, volume, and playback speed. Include shuffle and repeat modes with visual indicators. Support multiple audio formats with fallbacks. Implement a 10-band equalizer with presets. Add metadata extraction and display from audio files. Create a responsive design that works on all devices. Include keyboard shortcuts for playback control. Support background playback with media session API integration.

EXPECTED OUTPUT

Format
code

SUCCESS CRITERIA

  • Develop web-based music player using HTML5 CSS3 JavaScript Web Audio API
  • Create modern interface with album art display and visualizations
  • Implement playlist management with drag-and-drop reordering
  • Add audio controls including play/pause skip seek volume playback speed
  • Include shuffle and repeat modes with visual indicators
  • Support multiple audio formats with fallbacks
  • Implement 10-band equalizer with presets
  • Add metadata extraction and display from audio files
  • Create responsive design for all devices
  • Include keyboard shortcuts for playback control
  • Support background playback with media session API integration

FAILURE MODES

  • May implement incomplete feature set due to extensive requirements
  • May produce non-responsive design
  • May overlook audio format fallbacks
  • May fail to integrate Web Audio API properly for equalizer and visualizations
  • May neglect keyboard shortcuts or media session API

CAVEATS

Missing context
  • Method for adding audio files to playlist.
  • Browser compatibility requirements.
  • Performance or testing criteria.
  • Deployment instructions.
Ambiguities
  • Type of visualizations not specified (e.g., spectrum, waveform).
  • Audio file loading method unclear (e.g., upload, drag-and-drop, URLs).
  • Details on equalizer presets missing.
  • 'Modern interface' is subjective.
  • 'Works on all devices' lacks precise responsive criteria.

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.85
REUSABILITY
0.25
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Specify audio input: 'Support file upload and drag-and-drop for adding songs to playlist.'
  • Define visualizations: 'Include a real-time frequency spectrum visualizer using Web Audio API.'
  • List equalizer presets: 'Provide presets like Rock, Pop, Classical, and custom save option.'
  • Add output format: 'Deliver as a single HTML file with embedded CSS/JS or separate files.'
  • Parameterize for reusability: 'Develop a [media_type] player with features including...'.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER