audio

The audio element serves the purpose of embedding audio content within documents.

The optional available settings are:

  • playback rate
  • download
To enhance the accessibility of the component, it is highly recommended to provide subtitles if the audio is not just sound, and to include a transcription of the audio material in the form of an external link.
Due to the same-origin policy, certain browsers may open the audio download in a new tab instead of initiating an automatic download. Users must ensure that the download starts properly by checking the new tab for the file or by modifying the aforementioned policy.
table of content

component variations

Default audio

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div style="margin-top:22rem">
  <div class="m-audio -primary">
    <audio
      aria-label="audio element"
      controls=""
      data-src-url="https://brandguide-cdn.azureedge.net/frontend-kit/Bosch-Warteschleifenmusik.mp3"
    ></audio>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__play-button -show"
      aria-label="play button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
    </button>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__pause-button"
      aria-label="pause button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
    </button>
    <div class="a-timeline m-audio__timeline">
      <div class="a-timeline__time">
        <label for="timeline-id" class="a-timeline__current"></label>
        <span>/</span>
        <label for="timeline-id" class="a-timeline__duration"></label>
      </div>
      <div class="a-timeline__range">
        <input
          tabindex="0"
          id="timeline-id"
          type="range"
          min="0"
          max="0"
          aria-valuemin="0"
          aria-valuemax="0"
          aria-valuenow="0"
          aria-label="audio time scrubber"
          value="0"
        />
      </div>
    </div>
    <div class="m-audio__volume-controllers">
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-high-button -show"
        aria-label="volume high button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
      </button>
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-disabled-button"
        aria-label="volume disabled button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
      </button>
      <div
        class="a-slider a-slider--vertical m-audio__volume-slider -floating-shadow-s -primary"
      >
        <input
          tabindex="0"
          type="range"
          min="0"
          max="100"
          step="any"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
          aria-orientation="vertical"
          aria-label="volume"
          aria-description="vertical volume slider"
          value="50"
        />
      </div>
    </div>
    <div
      class="a-link a-link--button-integrated -icon m-audio__transcript-button"
    >
      <a
        aria-label="link to transscript of the audio file"
        href="/#"
        target="_self"
      >
        <span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
      </a>
    </div>
    <div class="m-audio__settings-controllers">
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__settings-controllers-button"
        aria-label="settings button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
      </button>
      <div class="m-audio__settings-flyout -floating-shadow-s -primary">
        <div
          class="a-link a-link--integrated -icon m-audio__setting m-audio__download-link"
        >
          <a
            data-title="Bosch-Warteschleifenmusik"
            aria-label="Bosch-Warteschleifenmusik"
            href="https://brandguide-cdn.azureedge.net/frontend-kit/Bosch-Warteschleifenmusik.mp3"
            target="_self"
            download=""
          >
            <span>Download</span>
            <span><i class="a-icon boschicon-bosch-ic-download"></i></span>
          </a>
        </div>
        <button
          type="button"
          class="a-button a-button--integrated m-audio__playback-rate-button"
        >
          <i class="a-icon a-button__icon ui-ic-right"></i>
          <span class="a-button__label">Playback speed</span>
        </button>
      </div>
      <ol class="m-audio__playback-rate-options -floating-shadow-s -primary">
        <li>
          <button
            type="button"
            class="a-button a-button--integrated m-audio__playback-rate-go-back-button"
          >
            <i class="a-icon a-button__icon ui-ic-left"></i>
            <span class="a-button__label">Options</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="0.25"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">0.25</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="0.5"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">0.5</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="0.75"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">0.75</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1"
          >
            <span class="m-audio__playback-rate-checkmark active-rate">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">Normal</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1.25"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">1.25</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1.5"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">1.5</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1.75"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">1.7</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="2"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">2</span>
          </button>
        </li>
      </ol>
    </div>
  </div>
</div>

Audio with playback rate setting only

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div style="margin-top:22rem">
  <div class="m-audio -primary">
    <audio
      aria-label="audio element"
      controls=""
      controlsList="nodownload"
      data-src-url="https://brandguide-cdn.azureedge.net/frontend-kit/Bosch-Warteschleifenmusik.mp3"
    ></audio>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__play-button -show"
      aria-label="play button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
    </button>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__pause-button"
      aria-label="pause button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
    </button>
    <div class="a-timeline m-audio__timeline">
      <div class="a-timeline__time">
        <label for="timeline-id-2" class="a-timeline__current"></label>
        <span>/</span>
        <label for="timeline-id-2" class="a-timeline__duration"></label>
      </div>
      <div class="a-timeline__range">
        <input
          tabindex="0"
          id="timeline-id-2"
          type="range"
          min="0"
          max="0"
          aria-valuemin="0"
          aria-valuemax="0"
          aria-valuenow="0"
          aria-label="audio time scrubber"
          value="0"
        />
      </div>
    </div>
    <div class="m-audio__volume-controllers">
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-high-button -show"
        aria-label="volume high button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
      </button>
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-disabled-button"
        aria-label="volume disabled button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
      </button>
      <div
        class="a-slider a-slider--vertical m-audio__volume-slider -floating-shadow-s -primary"
      >
        <input
          tabindex="0"
          id="volume-slider-id-2"
          type="range"
          min="0"
          max="100"
          step="any"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
          aria-orientation="vertical"
          aria-label="volume"
          aria-description="vertical volume slider"
          value="50"
        />
      </div>
    </div>
    <div
      class="a-link a-link--button-integrated -icon m-audio__transcript-button"
    >
      <a
        aria-label="link to transscript of the audio file"
        href="/#"
        target="_self"
      >
        <span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
      </a>
    </div>
    <div class="m-audio__settings-controllers">
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__settings-controllers-button"
        aria-label="settings button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
      </button>
      <div class="m-audio__settings-flyout -floating-shadow-s -primary">
        <button
          type="button"
          class="a-button a-button--integrated m-audio__playback-rate-button"
        >
          <i class="a-icon a-button__icon ui-ic-right"></i>
          <span class="a-button__label">Playback speed</span>
        </button>
      </div>
      <ol class="m-audio__playback-rate-options -floating-shadow-s -primary">
        <li>
          <button
            type="button"
            class="a-button a-button--integrated m-audio__playback-rate-go-back-button"
          >
            <i class="a-icon a-button__icon ui-ic-left"></i>
            <span class="a-button__label">Options</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="0.25"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">0.25</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="0.5"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">0.5</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="0.75"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">0.75</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1"
          >
            <span class="m-audio__playback-rate-checkmark active-rate">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">Normal</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1.25"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">1.25</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1.5"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">1.5</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="1.75"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">1.7</span>
          </button>
        </li>
        <li>
          <button
            type="button"
            class="m-audio__playback-rate-option a-button a-button--integrated"
            data-rate="2"
          >
            <span class="m-audio__playback-rate-checkmark">
              <i class="a-icon ui-ic-checkmark" title="checkmark"></i>
            </span>
            <span class="a-button__label">2</span>
          </button>
        </li>
      </ol>
    </div>
  </div>
</div>

Audio with download setting only

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div style="margin-top:22rem">
  <div class="m-audio -primary">
    <audio
      aria-label="audio element"
      controls=""
      controlsList="noplaybackrate"
      data-src-url="https://brandguide-cdn.azureedge.net/frontend-kit/Bosch-Warteschleifenmusik.mp3"
    ></audio>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__play-button -show"
      aria-label="play button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
    </button>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__pause-button"
      aria-label="pause button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
    </button>
    <div class="a-timeline m-audio__timeline">
      <div class="a-timeline__time">
        <label for="timeline-id-3" class="a-timeline__current"></label>
        <span>/</span>
        <label for="timeline-id-3" class="a-timeline__duration"></label>
      </div>
      <div class="a-timeline__range">
        <input
          tabindex="0"
          id="timeline-id-3"
          type="range"
          min="0"
          max="0"
          aria-valuemin="0"
          aria-valuemax="0"
          aria-valuenow="0"
          aria-label="audio time scrubber"
          value="0"
        />
      </div>
    </div>
    <div class="m-audio__volume-controllers">
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-high-button -show"
        aria-label="volume high button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
      </button>
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-disabled-button"
        aria-label="volume disabled button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
      </button>
      <div
        class="a-slider a-slider--vertical m-audio__volume-slider -floating-shadow-s -primary"
      >
        <input
          tabindex="0"
          id="volume-slider-id-3"
          type="range"
          min="0"
          max="100"
          step="any"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
          aria-orientation="vertical"
          aria-label="volume"
          aria-description="vertical volume slider"
          value="50"
        />
      </div>
    </div>
    <div
      class="a-link a-link--button-integrated -icon m-audio__transcript-button"
    >
      <a
        aria-label="link to transscript of the audio file"
        href="/#"
        target="_self"
      >
        <span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
      </a>
    </div>
    <div class="m-audio__settings-controllers">
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__settings-controllers-button"
        aria-label="settings button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-settings"></i>
      </button>
      <div class="m-audio__settings-flyout -floating-shadow-s -primary">
        <div
          class="a-link a-link--integrated -icon m-audio__setting m-audio__download-link"
        >
          <a
            data-title="Bosch-Warteschleifenmusik"
            aria-label="Bosch-Warteschleifenmusik"
            href="https://brandguide-cdn.azureedge.net/frontend-kit/Bosch-Warteschleifenmusik.mp3"
            target="_self"
            download=""
          >
            <span>Download</span>
            <span><i class="a-icon boschicon-bosch-ic-download"></i></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Audio without settings

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div style="margin-top:22rem">
  <div class="m-audio -primary">
    <audio
      aria-label="audio element"
      controls=""
      controlsList="nodownload noplaybackrate"
      data-src-url="https://brandguide-cdn.azureedge.net/frontend-kit/Bosch-Warteschleifenmusik.mp3"
    ></audio>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__play-button -show"
      aria-label="play button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-play"></i>
    </button>
    <button
      type="button"
      class="a-button a-button--integrated -without-label m-audio__pause-button"
      aria-label="pause button"
    >
      <i class="a-icon a-button__icon boschicon-bosch-ic-pause"></i>
    </button>
    <div class="a-timeline m-audio__timeline">
      <div class="a-timeline__time">
        <label for="timeline-id-4" class="a-timeline__current"></label>
        <span>/</span>
        <label for="timeline-id-4" class="a-timeline__duration"></label>
      </div>
      <div class="a-timeline__range">
        <input
          tabindex="0"
          id="timeline-id-4"
          type="range"
          min="0"
          max="0"
          aria-valuemin="0"
          aria-valuemax="0"
          aria-valuenow="0"
          aria-label="audio time scrubber"
          value="0"
        />
      </div>
    </div>
    <div class="m-audio__volume-controllers">
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-high-button -show"
        aria-label="volume high button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-high"></i>
      </button>
      <button
        type="button"
        class="a-button a-button--integrated -without-label m-audio__volume-disabled-button"
        aria-label="volume disabled button"
      >
        <i class="a-icon a-button__icon boschicon-bosch-ic-volume-disabled"></i>
      </button>
      <div
        class="a-slider a-slider--vertical m-audio__volume-slider -floating-shadow-s -primary"
      >
        <input
          tabindex="0"
          id="volume-slider-id-4"
          type="range"
          min="0"
          max="100"
          step="any"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuenow="50"
          aria-orientation="vertical"
          aria-label="volume"
          aria-description="vertical volume slider"
          value="50"
        />
      </div>
    </div>
    <div
      class="a-link a-link--button-integrated -icon m-audio__transcript-button"
    >
      <a
        aria-label="link to transscript of the audio file"
        href="/#"
        target="_self"
      >
        <span><i class="a-icon boschicon-bosch-ic-transscript"></i></span>
      </a>
    </div>
  </div>
</div>

additional content

styles SCSS

.m-audio {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-inline: 0.5rem;

  audio {
    display: none;
  }

  &__play-button,
  &__pause-button {
    display: none;
  }

  &__play-button.-show,
  &__pause-button.-show {
    display: inline-flex;
  }

  &__timeDisplay {
    align-items: center;
    display: flex;
    padding: 0 1rem;
  }

  &__timeline {
    padding-inline: 1rem;
    flex: 1;
  }

  &__volume-controllers {
    position: relative;
  }

  &__volume-high-button,
  &__volume-disabled-button {
    display: none;
  }

  &__volume-high-button.-show,
  &__volume-disabled-button.-show {
    display: inline-flex;
  }

  &__volume-slider {
    bottom: 5.65rem;
    cursor: pointer;
    display: none;
    left: -2.65625rem;
    padding: 1rem 0.75rem;
    position: absolute;
    z-index: 99;

    input {
      cursor: pointer;
      width: 6.75rem;
    }

    &.-show {
      display: flex;
    }
  }

  &__settings-controllers {
    position: relative;
  }

  &__settings-flyout {
    bottom: 3rem;
    display: none;
    min-width: 15rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    gap: 0.5rem;

    &.-show {
      display: grid;
    }

    .a-button {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .a-button__label,
    .a-button__icon {
      margin: 0;
      padding: 0;
    }

    .a-button__icon {
      order: 1;
    }

    .a-button.a-button--integrated:focus-visible {
      @include focus-outside;
    }
  }

  &__setting {
    width: 100%;

    a {
      display: flex;
      justify-content: space-between;
    }
  }

  &__playback-rate-options {
    bottom: 3rem;
    display: none;
    margin: 0;
    min-width: 15rem;
    overflow: auto;
    padding: 1rem;
    position: absolute;
    right: 0;

    &.-show {
      display: block;
    }

    li {
      margin-bottom: 0.625rem;
      padding: 0;

      &::before {
        content: '';
      }

      .a-button .a-button__label {
        padding: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .a-button.a-button--integrated:focus-visible {
      @include focus-outside
    }
  }

  &__playback-rate-go-back-button {
    display: flex;
    width: 100%;

    .a-icon {
      left: -0.5rem;
      margin-right: 0.25rem;
      padding: 0;
      position: relative;
    }
  }

  &__playback-rate-option {
    display: flex;
    width: 100%;

    span {
      display: flex;
      width: 100%;
    }

    .m-audio__playback-rate-checkmark {
      flex: 1;
      margin-right: 0.5rem;
      visibility: hidden;

      &.active-rate {
        visibility: visible;
      }
    }
  }

  .a-link:not(.m-audio__transcript-button) {
    width: 100%;

    &:hover a {
      text-decoration: none;
    }
  }
}