OneTaskBy Tim King · Updated
Audio Embed Code Generator
HTML5 Audio Player Tag for Any Website
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Audio Embed Code Generator works
This audio embed code generator turns the URL of an audio file into a complete HTML5
<audio> tag you can paste into any page, blog or CMS. Choose whether it shows controls,
autoplays, loops or starts muted, add a second format as a fallback, and the code updates as
you type with the correct MIME type for each source.
The <audio> element plays sound natively in every current browser, with no plugin and no
third-party player. What trips people up is the detail: which attributes are boolean, which
type string goes with which file, and why autoplay silently fails.
What the audio embed code generator sets
Controls shows the browser's own play bar. Leave it on unless you are building your own buttons with JavaScript; without it, and without autoplay, there is no way to start the sound.
Autoplay and muted. Chrome, Safari and Firefox block autoplay with sound until the visitor
has interacted with the site. Adding muted lets autoplay start, but silently, which is
rarely what an audio embed wants. The generator warns you when you ask for one without the
other.
Preload tells the browser how much to fetch before play is pressed. metadata loads just
enough to show the duration and is the sensible default; none saves bandwidth on pages with
many players; auto lets the browser download the whole file in advance.
Sources and types. Each <source> gets a type from the file extension: audio/mpeg
for MP3, audio/mp4 for M4A, audio/ogg for OGG and Opus, audio/wav, audio/webm and
audio/flac. The browser reads the type and skips formats it cannot play without downloading
them. MP3 plays everywhere today, so a fallback is only needed when your main file is Opus,
OGG or FLAC.
Fallback link. The link inside the tag appears only in browsers that do not support
<audio> at all, but it costs nothing and gives feed readers and text-only clients a way to
the file.
FAQ
Why does my audio not autoplay?
Browsers block autoplay with sound until the visitor clicks or taps somewhere on the site. Autoplay only works reliably when the audio is muted, so for most pages it is better to show controls and let the visitor press play.
Can I stop people downloading the audio?
Setting the download button to Hide adds controlslist="nodownload", which removes the menu option in Chromium browsers. Anyone can still save the file from the network panel, so it is a convenience setting, not protection.
Does the file need to be on my own site?
No. The URL can point anywhere that serves the file over HTTPS. The host must allow direct linking, and the file should be served with the right content type, or some browsers will refuse to play it.
Which format should I use?
MP3 at 128 kbps or higher plays in every modern browser and is the safest single choice. Add an Opus or OGG file first and MP3 as the fallback if you want a smaller download for the browsers that support it.
See also: all Audio tools, Images, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Podcast RSS Item Builder
Build a valid podcast RSS item with enclosure and iTunes tags.
Audio Sprite Maker
Pack sound effects into one audio sprite with a howler.js JSON map.
ARIA Attribute Builder
Generate the right role and aria attributes for any common widget.
WAV To MP3
Encode WAV or other audio to MP3, without uploading it.
Responsive Iframe Generator
Responsive iframe embed code for YouTube, Vimeo, maps and more.