Audio Player 

<audio-player>
    <audio src="https://assets.innoq.com/neuroevolutionary-trails-making-of-ad-128.mp3" controls="" aria-label="Artikel anhören" preload="metadata"></audio>
    <template>
        <label>
            <span> Wiedergabegeschwindigkeit </span>
            <input type="range" value="1.0" min="0.1" max="4.0" step="0.1">
            <var></var>
        </label>
    </template>
</audio-player>
 
<audio-player>
    <audio src="https://assets.innoq.com/neuroevolutionary-trails-making-of-ad-128.mp3" controls=""
        aria-label="Artikel anhören" preload="metadata"></audio>
    <template>
        <label>
            <span> Wiedergabegeschwindigkeit </span>
            <input type="range" value="1.0" min="0.1" max="4.0" step="0.1">
            <var></var>
        </label>
    </template>
</audio-player>
 
/* No context defined. */
  • Content: 
    audio-player {
  @extend %heading-font-regular;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  font-size: $font-size-xxs;
  line-height: $paragraph-line-height-sm;

  label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: $spacer-sm 0;
  }

  @media screen and (min-width: $grid-breakpoint-md) {
    font-size: $font-size-base;
  }
}
  • URL: /components/raw/audio-player/_audio-player.scss
  • Filesystem Path: components/05-atoms/media/audio-player/_audio-player.scss
  • Size: 410 Bytes
  • Content: 
    // Co-authored-by: FND <fnd@innoq.com>
export default class AudioPlayer extends HTMLElement {
  connectedCallback() {
    if (this._init) {
      // ensures initialization is idempotent
      return
    }

    this.appendChild(this.template)
    this.rate = this.slider.value
    this._init = true

    this.addEventListener('change', this.onTune)
    this.addEventListener('click', this.onSeek)
  }

  onTune(ev) {
    const { slider } = this
    if (ev.target === slider) {
      // event delegation
      this.rate = slider.value
    }
  }

  onSeek(ev) {
    const btn = ev.target
    if (!btn.matches('button[name]')) {
      // event delegation
      return
    }

    let value = parseInt(btn.value, 10)
    if (btn.name === 'rewind') {
      value = value * -1
    }
    this._player.currentTime += value
  }

  get slider() {
    return this.querySelector('input[type=range]')
  }

  // eslint-disable-next-line accessor-pairs
  set rate(value) {
    this._player.playbackRate = value
    this._rate.textContent = value
  }

  get _rate() {
    return this.querySelector('var')
  }

  get _player() {
    return this.querySelector('audio')
  }

  get template() {
    return this.querySelector('template').content.cloneNode(true)
  }
}
  • URL: /components/raw/audio-player/audio-player.js
  • Filesystem Path: components/05-atoms/media/audio-player/audio-player.js
  • Size: 1.2 KB

No notes defined.