Start with the simplest working player, then add the details that make it reliable. If you are new to web audio, follow the guides below in order.
Guides in order
- Choose an audio format – compare MP3, AAC, Ogg, Opus and WAV, and pick a bitrate for music or speech.
- Use the HTML5 audio element – the attributes that matter, fallback formats and simple JavaScript controls.
- Add an audio player in WordPress – the Audio block, shortcodes, playlists and when a plugin helps.
- Make audio load faster – smaller files, mono for speech, preload settings, caching and CDNs.
- Keep audio playing between pages – four ways to build a player that keeps going while visitors browse.
Quick start: a basic HTML5 audio player
The native audio element works in current browsers and needs no JavaScript. Use the controls attribute so visitors can play, pause and seek:
<audio controls preload="metadata" src="/media/episode-1.mp3">
<a href="/media/episode-1.mp3">Download the audio</a>
</audio>Choose a preload setting
Use preload="metadata" to show the duration without downloading the whole file. This saves bandwidth on pages with several players. Use preload="none" on long lists of tracks.
Make audio accessible
Keep visible controls, avoid starting sound automatically, and publish a transcript for spoken content. If you build custom controls, use real buttons with clear labels so keyboard and screen reader users can operate them.
Check before you publish
- The file plays on a phone and a desktop browser.
- Visitors can skip ahead without waiting for the whole file.
- The page still loads quickly with the player on it.
- There is a download link or transcript as a fallback.
Stuck on a problem? See the web audio FAQ.