Media Players

<source> elements are used inside <audio> or <video> tags to define multiple media sources. The browser picks the first compatible source it can play.

Basic Syntax:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

How It Works:

  1. The browser reads each <source> tag in order.

  2. It checks whether it can play the type (MIME type, e.g., audio/mpeg).

  3. It plays the first one it supports.

  4. If none match, it shows the fallback text (e.g., "Your browser does not support...").

Why Use <source>:

  • To offer multiple formats (e.g., .mp3, .ogg) for better compatibility across browsers.

  • To support different bitrates or qualities.

Optional type:

You can omit type, but specifying it helps the browser skip unsupported formats faster.

Example (video):

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Important Notes:

  • Only the first playable source is used.

  • <source> does not fallback like <img>'s srcset; it's sequential testing.

  • You can’t use <source> without <audio> or <video>.

Here are good free audio player libraries with nice UIs:

1. MediaElement.js

  • UI: Clean, modern, skinnable

  • Features: HTML5 fallback, playlist support, accessibility

  • Install:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelementplayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelement-and-player.min.js"></script>
    const player = new MediaElementPlayer('audio');

Plyr

https://plyr.io/#audio

https://github.com/sampotts/plyr

2. Plyr

  • UI: Sleek, modern, customizable

  • Features: Audio & video support, keyboard accessibility, responsive

  • Install:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.css" />
<script src="https://cdn.jsdelivr.net/npm/plyr@3.7.8/dist/plyr.polyfilled.js"></script>
    const player = new Plyr('audio');

https://codepen.io/memetican/pen/emppoKg/2889ed3672715e250c2ace16263362ee

Howler.js

https://howlerjs.com/

https://github.com/goldfire/howler.js/blob/master/examples/sprite/index.html

3. Howler.js (audio engine only)

  • UI: None (audio logic only)

  • Use case: Build your own custom UI with full playback control

  • Install:

    <script src="https://cdn.jsdelivr.net/npm/howler@2.2.4/dist/howler.min.js"></script>
    const sound = new Howl({ src: ['sound.mp3'], loop: true });
sound.play();

Recommendation: Use Plyr if you want an attractive UI out-of-the-box and minimal setup. Use MediaElement.js for broader compatibility and fallback support. Use Howler.js only if building a fully custom UI.

PreviousTechnical NotesNextStyling

Last updated