Music Player Code Generator

Features

• One track per line as title|url; a full-width bar or a tab also separates (input methods, copied tables)
• Self-contained output: one `<audio>`, one `<ol>` playlist, a `<style>` and a `<script>`, no dependencies
• The script initialises every `.mp` on the page, so two copies coexist
• Advances to the next track when one ends, stopping at the last (or looping the track)
• Titles and URLs go into `data-` attributes only — data never enters JS source, one less layer of escaping
• Quotes, angle brackets and & in titles and URLs are HTML-escaped
• The accent colour drives the selected row, and its text colour is computed as black or white
• Rejects pseudo-URLs such as javascript: (which would be written straight into your page)

How to use

1. Write one track per line: title|audio URL, or just the URL
2. Toggle the playlist, autoplay and looping, and pick a preload strategy
3. Choose an accent colour
4. Copy the generated HTML and paste it anywhere in your page

FAQ

Why does autoplay often do nothing?

Because browsers block autoplay with sound by default — making noise without interaction counts as harassment, which is why this option is off. The generated code writes `audio.play().catch(() => {})`, swallowing the rejection rather than logging a NotAllowedError. To really autoplay, add `muted` to the `<audio>` element (muted autoplay is allowed) and let the user unmute.

Why not use the audio element’s own multi-file support instead of writing a list?

Because there is none — an `<audio>` element plays a single `src`. No native HTML element can do a playlist (`<video>` cannot either). So the list is driven by a short script: clicking a row swaps the `src` and plays, and the end of a track advances automatically. That is why the output has to include a script and not just markup.

Do two players on one page interfere?

No. The generated script walks `document.querySelectorAll(".mp")`, and each player found keeps its own audio element and list, so two or ten copies each work on their own. They do not stop each other when one starts — if you want that, add a few lines yourself; the generator will not make that decision for you.

Any requirements on the audio files?

The native element plays MP3, AAC/M4A, WAV, FLAC and Opus (with slight differences between browsers; MP3 and M4A are safest). It does not support streaming protocols (HLS / DASH) — that takes a `<video>` element and a JS library. URLs must be http(s)://, protocol-relative `//`, or a same-site relative path. Cross-origin audio will play, but anything like a waveform visualisation needs CORS enabled by the other end.