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.