Audio

The HTML <audio> element is used to play an audio file on a web page.

On this page

How it works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files from which the browser may choose. The browser will use the first recognized format.

Examples

Native player

To embed an audio file in HTML, use the <audio> element:

<audio controls>
  <source src="sample-audio.ogg" type="audio/ogg">
  <source src="sample-audio.mp3" type="audio/mpeg">
</audio>

Autoplay

To start the audio file automatically, use the autoplay attribute:

<audio controls autoplay>
  <source src="assets/media/sample-audio.ogg" type="audio/ogg">
  <source src="assets/media/sample-audio.mp3" type="audio/mpeg">
</audio>

Title and filename

Next to the player, you can also display the title and name of the file.

Audio title

filename.mp3

<div class="player-audio">
  <div class="player-audio__content">
    <div class="player-audio__title">Audio title</div>
    <div class="player-audio__name">filename.mp3</div>
  </div>
  <div class="player-audio__player">
    <audio controls>
      <source src="sample-audio.ogg" type="audio/ogg">
      <source src="sample-audio.mp3" type="audio/mpeg">
    </audio>
  </div>
</div>

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

CSS

src/scss/_player-audio.scss

--#{$prefix}audio-player-title-color: #{$audio-player-title-color};
--#{$prefix}audio-player-title-font-size: #{$audio-player-title-font-size};
--#{$prefix}audio-player-title-font-weight: #{$audio-player-title-font-weight};

--#{$prefix}audio-player-name-color: #{$audio-player-name-color};
--#{$prefix}audio-player-name-font-size: #{$audio-player-name-font-size};
--#{$prefix}audio-player-name-font-weight: #{$audio-player-name-font-weight};

Sass variables

src/scss/_variables.scss

$audio-player-title-color:            null;
$audio-player-title-font-size:        1.15rem;
$audio-player-title-font-weight:      bolder;

$audio-player-name-color:             var(--#{$prefix}secondary-color);
$audio-player-name-font-size:         .875rem;
$audio-player-name-font-weight:       normal;