💻 Coding & Development

Music Player

📁 Coding & Development 👤 Contributed by @f 🗓️ Updated 2026-04-19

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

0 copies

🚀 Open in ChatGPT ✨ Open in Claude 💎 Open in Gemini

Example outputs

Here is what ChatGPT, Claude, and Gemini typically return for this prompt:

🚀 ChatGPT

I'll help you create a comprehensive music player! Here's a structured implementation starting with the HTML skeleton featuring semantic elements for the player interface, followed by CSS3 styling with flexbox for responsive layouts and custom range sliders. The JavaScript will utilize the Web Audio API for the equalizer, with AudioContext nodes for each frequency band (60Hz to 16kHz). I'll implement the MediaSession API for background playback controls and add FileReader for metadata extraction using the ID3 parser.

✨ Claude

I should note that building a complete music player with all these features is quite extensive. I can provide the core architecture: HTML5 audio elements with Web Audio API nodes for the equalizer, CSS Grid for the responsive layout, and JavaScript classes for playlist management. The drag-and-drop will use the HTML5 Drag API, while the equalizer requires BiquadFilter nodes. One consideration: browser support for the Media Session API varies, so you'll want feature detection and graceful degradation.

💎 Gemini

Here's a music player implementation using the Web Audio API's AnalyserNode for visualizations and BiquadFilterNode for the 10-band equalizer (32Hz-16kHz range). The interface uses CSS Grid with media queries for responsive breakpoints. FileReader handles local audio file loading, while the jsmediatags library extracts ID3 metadata. Keyboard shortcuts map to MediaSession API actions (play/pause on spacebar, next/previous on arrow keys). Drag-and-drop uses HTML5 dataTransfer with playlist array manipulation for reordering.

How to use this prompt

Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.

Which AI model works best

Claude Opus 4 and Sonnet 4.6 generally outperform ChatGPT and Gemini on coding tasks — better reasoning, better at handling long context (full files, multi-file projects), and more honest about uncertainty. ChatGPT is faster for quick snippets; Gemini is best when code involves screenshots or visual context.

How to customize this prompt

Swap the language mentioned in the prompt (Python, JavaScript, etc.) for whichever stack you're on. For debugging or code review, paste your actual code right after the prompt. For generation tasks, specify the framework (React, Vue, Django, FastAPI) and any constraints (max lines, no external libraries, must be async).

Common use cases

Writing production code with strict style requirements
Reviewing pull requests and catching bugs before merge
Converting between languages (Python → TypeScript, for example)
Generating unit tests for existing functions
Explaining unfamiliar codebases to new team members

Variations

Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).