Audio tag code generator
This generator builds an HTML5 <audio> player for your webpage - background music, a sound effect, a podcast episode, whatever you need. Provide at least an MP3 file (supported everywhere); OGG and WAV are optional fallbacks for older or specific setups.About the HTML audio element
The HTML5 <audio> element embeds a native, no-plugin-required player directly in the page - no third-party embed (like a YouTube or Spotify widget) is needed for straightforward background music, sound effects, voiceovers or podcast episodes hosted on your own site.
Browser support for the element itself is universal, but not every browser supports every audio file format - MP3 is the safe, near-universal choice, which is why OGG and WAV here are optional fallbacks rather than required.
One thing worth knowing for accessibility and SEO alike: search engines and screen readers can't read what's inside an audio file. If the content matters (a podcast episode, a spoken explanation), adding a short text summary or transcript next to the player makes it accessible to visitors who can't or don't want to listen, and gives search engines indexable text describing what's actually being said.
Frequently asked questions
Do I need all three file formats?
No - MP3 alone plays in every current browser, so it's the only one you strictly need. OGG and WAV are optional fallbacks that only matter for some older or niche setups; include them only if you already have those files handy.
Why is there no volume attribute in the generated HTML?
HTML's <audio> element has no volume attribute - the only way to set it is with JavaScript (the audio element's .volume property, from 0 to 1). That's why choosing a volume level here adds a data-volume attribute plus a small shared script, rather than an HTML attribute.
Why is "loop a specific number of times" done with JavaScript instead of the loop attribute?
The native HTML loop attribute only supports looping forever - there's no built-in way to say "loop exactly 3 times". Setting a number above 0 adds a data-loop-limit attribute plus a small shared script that counts plays and stops the audio after your chosen count; leaving it at 0 uses the native loop attribute for continuous looping instead.
Why data attributes and a shared script instead of one script per player?
Two reasons. First, a strict Content Security Policy (one without 'unsafe-inline' for scripts, and no matching nonce/hash) silently blocks inline <script> tags with no visible error - data-* attributes aren't script at all, so they're never blocked, and because the shared script is identical every single time it's generated, it can be hosted as a real external .js file and allow-listed in a CSP once, permanently fixing the problem instead of just working around it. Second, if you add several players from this tool to one page, you only need one copy of the shared script rather than a near-duplicate for each player.
Will autoplay actually work for visitors?
Most browsers block autoplay with sound unless the visitor has already interacted with your site (clicked something), as an anti-annoyance measure - turning on "Muted" above is what actually gets autoplay working reliably, since browsers generally allow silent autoplay. Don't rely on autoplay alone either way - a visible play button (via "controls") is a safer bet for making sure visitors actually hear it.
Which preload option should I choose?
Load the file in advance (the default) is right for almost every page - it downloads the file ahead of time so it plays instantly once clicked. Only switch to one of the other two if you've got several players on one page and want to save bandwidth until visitors actually press play on each one.