HTML5 Audio Embed Generator

How to use

1. 1Add one or more audio source URLs. Pick the format for each source. List MP3 last as the universal fallback so browsers that can't play OGG, Opus, or AAC still get audio.
2. 2Toggle player attributes (controls, autoplay, muted, loop), pick a preload mode, and pick a CORS mode if the file is served from a different origin or you need Web Audio API access.
3. 3Optional: enable a WebVTT transcript or chapter track and set the language code, label, and kind. Useful for accessible podcast posts.
4. 4Optional: cap the player width with the max-width wrapper. The default browser audio bar looks best between 320 and 720 pixels.
5. 5Click Show live preview to load the real file and confirm playback. Use Copy on the HTML or JSX panel to grab the snippet for your blog, CMS, or React component.

About this tool

HTML5 Audio Embed Generator builds a copy-ready <audio> snippet for self-hosted music, podcast episodes, voiceover, sound effects, or any clip you serve from your own CDN. Add one or more sources and the tool emits a fallback chain so the first supported format plays automatically: MP3 (audio/mpeg) for universal coverage, AAC or M4A (audio/aac) for Safari and Apple devices, OGG Vorbis or Opus (audio/ogg) for Firefox, WebM Opus (audio/webm) for efficient streaming, plus optional WAV and FLAC for lossless masters and short stings. Each source has its own format selector and an optional codecs parameter, which becomes part of the type attribute so the browser can skip a source it cannot decode without downloading it. The player attribute panel covers every spec-defined option that matters in practice: controls toggles the built-in play, pause, volume, and timeline UI; autoplay starts the clip as soon as the page loads; muted is required for autoplay to actually begin under modern browser policies; loop restarts the clip when it ends; and preload picks the right bandwidth trade-off between auto, metadata (recommended for most pages), and none. Crossorigin emits anonymous or use-credentials when you need to read samples from the Web Audio API or fetch over an authenticated CDN, and the controlslist token grid hides the download, playback rate, fullscreen, and remote playback controls in Chromium browsers without affecting browsers that ignore the token. A WebVTT track lets you ship a transcript or chapter markers alongside the audio, with kind, label, language code, and default flag all configurable; this is the recommended pattern for accessible podcast hosting. The output panel produces three snippets at the same time: a clean <audio> tag with each <source> element on its own line, the same snippet wrapped in a max-width div so the default browser player does not stretch the full content column on wide blog and CMS layouts, and a React or JSX version with camelCased props and JSON.stringify-escaped URLs that drop straight into a Next.js, Remix, Vite, or CRA component. A heads-up panel surfaces real-world gotchas, such as autoplay being silently blocked unless muted is set, missing MP3 fallback breaking Safari, and controlslist being inert when controls is not enabled, before you paste the code. An optional live preview loads the real audio in your browser so codec issues and CORS errors surface in seconds. Everything runs locally on your device; the audio file is fetched only when you ask for a preview, and the URLs you type never leave the page.

Free to use. Works in your browser. No signup, no login.