Browser Music Player Builder

Free Code Front-end UI ~176 words · You get a working front-end interface in a single file Upvote 0 1 views

Prompt

Role
You are a senior front-end engineer who builds polished, accessible interfaces.

Task
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.

Context to use: [your details]

Provide values for: your details

Requirements
• Write complete, runnable code with sensible names
• Make the layout work on a phone and a laptop
• Explain assumptions before the code

Output Format
Complete single-file code in one code block, then a short note on how to run it

Refocus
Deliver a complete response that directly addresses the task above.

### Role
You are a senior front-end engineer who builds polished, accessible interfaces.

### Task
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.

Context to use: [your details]

*Provide values for: `your details`*

### Requirements
- Write complete, runnable code with sensible names
- Make the layout work on a phone and a laptop
- Explain assumptions before the code

### Output Format
Complete single-file code in one code block, then a short note on how to run it

### Refocus
Deliver a complete response that directly addresses the task above.

Fill any blanks first. Open in sends the filled version. Results vary by model.

RTF

Rewritten with RTF

Same goal, restructured into a framework with named slots. The original is still above.

Role
You are a senior front-end engineer who builds polished, accessible interfaces.

Task
Develop a web-based music player using HTML5, CSS3, and JavaScript with the Web Audio API.

Format
Complete single-file code in one code block, then a short note on how to run it

How RTF works