Audio Player

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<figure class="audioPlayer">

    <div class="audioPlayer-audio">
        <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

    </div>

    <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
</figure>


        
            <!-- With Poster -->
<figure class="audioPlayer">

    <div class="audioPlayer-poster" aria-hidden="true">
        <img src="../../audios/placeholder/dummy-audio-poster.jpg" alt="" />
    </div>

    <div class="audioPlayer-audio">
        <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

    </div>

    <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
</figure>


        
            <!-- Doc Only -->
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Default</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <figure class="audioPlayer">

        <div class="audioPlayer-audio">
            <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

        </div>

        <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
    </figure>

</section>
<section class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Mit Poster</h2>

        <div class="doc-variant-configuration">
        </div>

    </header>

    <figure class="audioPlayer">

        <div class="audioPlayer-poster" aria-hidden="true">
            <img src="../../audios/placeholder/dummy-audio-poster.jpg" alt="" />
        </div>

        <div class="audioPlayer-audio">
            <audio class="audio" src="../../audios/placeholder/dummy-audio.mp3" controls></audio>

        </div>

        <figcaption class="audioPlayer-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="audioPlayer-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
    </figure>

</section>

Handle: @audioplayer
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/audioPlayer/audioPlayer.html
References (2): @audio, @audioplayer
Referenced by (11): @mediainset, @mediainset--upright, @mediainset--fullwidth, @mediainset--graphic, @mediainset--graphic-upright, @mediainset--video, @mediainset--video-fullwidth, @mediainset--audio, @mediainset--audio-with-poster, @audioplayer--with-poster, @audioplayer--doc-only


        <!-- Default -->
<figure class="audioPlayer{{#modifier}} {{.}}{{/modifier}}">

        {{#poster}}
    <div class="audioPlayer-poster" aria-hidden="true">
        <img src="{{path .}}" alt=""/>
    </div>
        {{/poster}}

    <div class="audioPlayer-audio">
        {{#audio}}
            {{render '@audio' (contextData '@audioplayer' this) merge=true}}
        {{/audio}}
    </div>

    {{#if caption}}
        <figcaption class="audioPlayer-caption"><span>{{{caption}}}</span>{{#copyright}}<small class="audioPlayer-copyright">{{{.}}}</small>{{/copyright}}</figcaption>
    {{else}}
        {{#copyright}}
            <figcaption class="audioPlayer-caption"><small class="audioPlayer-copyright">{{{.}}}</small></figcaption>
        {{/copyright}}
    {{/if}}
</figure>

<!-- With Poster -->
<figure class="audioPlayer{{#modifier}} {{.}}{{/modifier}}">

        {{#poster}}
    <div class="audioPlayer-poster" aria-hidden="true">
        <img src="{{path .}}" alt=""/>
    </div>
        {{/poster}}

    <div class="audioPlayer-audio">
        {{#audio}}
            {{render '@audio' (contextData '@audioplayer' this) merge=true}}
        {{/audio}}
    </div>

    {{#if caption}}
        <figcaption class="audioPlayer-caption"><span>{{{caption}}}</span>{{#copyright}}<small class="audioPlayer-copyright">{{{.}}}</small>{{/copyright}}</figcaption>
    {{else}}
        {{#copyright}}
            <figcaption class="audioPlayer-caption"><small class="audioPlayer-copyright">{{{.}}}</small></figcaption>
        {{/copyright}}
    {{/if}}
</figure>

<!-- Doc Only -->
{{#variants}}
<section class="doc-variant">

    <header class="doc-variant-header">

            {{#title}}
        <h2 class="doc-variant-title">{{{.}}}</h2>
            {{/title}}

        <div class="doc-variant-configuration">
                {{#if modifiers}}
            <ul data-label="Modifier">
                    {{#modifiers}}
                <li>{{{.}}}</li>
                    {{/modifiers}}
            </ul>
                {{/if}}
        </div>

    </header>

    {{#samples}}
        {{render '@audioplayer' (contextData '@audioplayer' this) merge=true}}
    {{/samples}}

</section>
    {{/variants}}


        
        
            /* Default */
{
  "audio": {
    "show-controls": true,
    "src": "/audios/placeholder/dummy-audio.mp3"
  },
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>"
}


        
            /* With Poster */
{
  "audio": {
    "show-controls": true,
    "src": "/audios/placeholder/dummy-audio.mp3"
  },
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>",
  "poster": "/audios/placeholder/dummy-audio-poster.jpg"
}


        
            /* Doc Only */
{
  "audio": {
    "show-controls": true,
    "src": "/audios/placeholder/dummy-audio.mp3"
  },
  "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
  "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>",
  "variants": [
    {
      "title": "Default",
      "samples": {
        "audio": {
          "show-controls": true,
          "src": "/audios/placeholder/dummy-audio.mp3"
        },
        "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
        "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>"
      }
    },
    {
      "title": "Mit Poster",
      "samples": {
        "audio": {
          "show-controls": true,
          "src": "/audios/placeholder/dummy-audio.mp3"
        },
        "caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
        "copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>",
        "poster": "/audios/placeholder/dummy-audio-poster.jpg"
      }
    }
  ]
}

File:

Content:


                                @import "_audioPlayer.settings";
@import "_audioPlayer.styles";

URL: /components/raw/audioplayer/_audioPlayer.scss
Filesystem Path: components/03-fragments/audioPlayer/_audioPlayer.scss
Size: 64 Bytes

Content:


                                $audioPlayer_poster_aspect-ratio: #{16 / 9};
$audioPlayer_controls_inset: var(--bp, 24px) !default;

URL: /components/raw/audioplayer/_audioPlayer.settings.scss
Filesystem Path: components/03-fragments/audioPlayer/_audioPlayer.settings.scss
Size: 100 Bytes

Content:


                                %audioPlayer {
    @include stack-spacing(component);

    position: relative;

    .audio {
        @include stack-spacing(0);
    }

    &-poster {

        img {
            display: block;
            width: 100%;

            aspect-ratio: $audioPlayer_poster_aspect-ratio;
            object-fit: cover;

            pointer-events: none;
        }

    }

    &-poster + &-audio {
        position: absolute;
        left: #{$audioPlayer_controls_inset};

        width: calc(100% - 2 * #{$audioPlayer_controls_inset});

        transform: translateY(-100%);
        margin-top: calc(-1 * #{$audioPlayer_controls_inset});
    }

    &-caption {
        @extend %figure-caption;
    }

    &-copyright {
        @extend %figure-copyright;
    }

}

.audioPlayer {
    @extend %audioPlayer;

    &-audio {
        @extend %audioPlayer-audio;
    }

    &-poster {
        @extend %audioPlayer-poster;
    }

    &-caption {
        @extend %audioPlayer-caption;
    }

    &-copyright {
        @extend %audioPlayer-copyright;
    }

}

URL: /components/raw/audioplayer/_audioPlayer.styles.scss
Filesystem Path: components/03-fragments/audioPlayer/_audioPlayer.styles.scss
Size: 1 KB