# Audio Player

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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

- Handle: @audio-player
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/media/audio-player/audio-player.html

No notes defined.