AUDIO (LMU-Intern Modul )
src/app/shared/components/audio/templates
Demo Section
Each variation will be presented in the following section.
Readme
audio (component)
Description
This blueprint is based on the blueprint of Veams.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/audio
Fields
audio.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.audioClasses | String | '' |
Modifier classes for component |
| settings.audioContextClass | String | 'default' |
Context class of component |
| settings.audioJsOptions | Object | null |
JavaScript options object which gets stringified |
Content
| Parameter | Type | Description |
|---|---|---|
| content.audioField | String | Please add a description! |
JavaScript Options
The module gives you the possibility to override default JS options:
| Option | Type | Default | Description |
|---|---|---|---|
| optionOne | String | 'is-option' |
Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $audio-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-audio:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
audio.hbs
<audio class="c-audio{{#if settings.audioContextClass}}--{{settings.audioContextClass}}{{else}}--default{{/if}}{{#if settings.audioClasses}} {{settings.audioClasses}}{{/if}}" data-css="c-audio" {{settings.audioOptions}} >
{{#if content.audiompeg}}
<source src="{{getUrl content.audiompeg}}" type="audio/mpeg">
{{/if}}
{{#if content.audioogg}}
<source src="{{getUrl content.audioogg}}" type="audio/ogg">
{{/if}}
{{#if content.audioinfo}}
{{content.audioinfo}}
{{/if}}
</audio>
Data File
audio.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default audio",
"sectionCenter": true
},
"settings": {
"audioContextClass": false,
"audioClasses": false,
"audioOptions": "controls"
},
"content": {
"audiompeg":"https://cast.itunes.uni-muenchen.de/clips/qSq6se5sif/vod/audio_only.mp3",
"audioogg":"",
"audioinfo":"Ihr Browser unterstützt leider nicht das Audio Element."
}
}
}
}
Styles
audio.scss
/* ===================================================
component: audio
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-audio"] {
width: 100%;
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-audio--default {
}
HTML Output
Default audio
<audio class="c-audio--default" data-css="c-audio" controls>
<source src="https://cast.itunes.uni-muenchen.de/clips/qSq6se5sif/vod/audio_only.mp3" type="audio/mpeg">
Ihr Browser unterstützt leider nicht das Audio Element.
</audio>