CodesBeautify

Music Code Generator

Embed audio as a visible player, a background loop with a toggle, or a small playlist.

Audio embed HTMLAudio player with controls
<figure>
  <figcaption>Background music</figcaption>
  <audio controls loop preload="metadata">
    <source src="https://example.com/media/theme.mp3" type="audio/mpeg">
    <a href="https://example.com/media/theme.mp3">Download the audio file</a>
  </audio>
</figure>
Runs locally in your browser

About the Music Code Generator

Three shapes of audio embed cover nearly every request. A visible player is a plain audio element with controls inside a figure whose caption names the track. A background track is an audio element set to loop plus a button that starts it, because browsers refuse to make noise on their own. A small playlist is one player, a list of buttons and a dozen lines of script that move to the next file when the current one ends.

The autoplay attribute is deliberately missing from the background option. Chrome, Safari and Firefox all block audible media until the visitor has interacted with the page, so markup that leans on autoplay produces silence and a console warning rather than music. Offering a labelled toggle that reports its state through aria-pressed is both more reliable and much less irritating than sound nobody asked for, and it gives people a way to stop it.

MP3 decodes everywhere today, so the extra OGG source is optional, and when it is switched on it is listed first because a browser takes the first type it can play. Set preload to metadata rather than auto unless you are confident people will press play, otherwise every visit downloads the entire file and your bandwidth bill grows for nothing. For moving pictures rather than sound, see the HTML Video Generator.

How to use

  1. Pick the shape: a visible player, a background loop or a playlist.
  2. Paste the URL of your MP3, or a comma separated list for the playlist.
  3. Leave preload on metadata unless the track is certain to be played.
  4. Copy the markup and any script that comes with it.

Common questions

Can I make music play automatically?
Not reliably. Browsers block audible autoplay, so the background option ships a toggle button that starts the track on a click.
Which audio format should I host?
MP3 is supported everywhere. OGG is an optional smaller alternative that some browsers will prefer when it is listed first.
How do I loop a track?
Add the loop attribute, which the background option sets by default so the file restarts when it reaches the end.
Does the playlist need a library?
No. It is a single audio element, a list of buttons and a short script that swaps the source and plays the next track.