# Audio
# Inhalt in diesem Abschnitt
# Einzelnes Audio
# Komponent einsetzen
Mit HTML5 kannst du einfach deine eigenen lokal abgespeicherten Audios auf deiner Webseite einbetten.
Du kannst verschiedene Quellen mit verschiedenen Dateiformaten angeben, der Browser wählt die für ihn passende
Version aus. Storytellr bietet dir einige CSS-Klassen, die dir den Einsatz der Audios zusätzlich vereinfachen.
<section class="story-section">
<div class="story-audio-container">
<audio class="story-audio-player" controls>
<source src="../src/assets/audio/audio.ogg" type="audio/ogg">
<source src="../src/assets/audio/audio.mp3" type="audio/mpeg">
Leider unterstützt dein Browser keine Audio-Tags. Wenn du möchtest, kannst du das Audio
<a href="../src/assets/audio/audio.mp3">herunterladen</a> und in deinem eigenen Audio-Player
anhören.
</audio>
<div class="story-audio-caption">
Caption 1
</div>
</div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Du kannst deinen HTML5-Audios verschiedene Attribute für die Steuerung deiner Audios mitgeben.
| Attribute | Beschreibung |
|---|---|
src* | Pfad zum Audio. |
autoplay | Automatisches Abspielen des Audios. Funktioniert in modernen Browsern nur, wenn das Audio stumm muted geschalten wurde. |
controls | Zeigt die Steuerelemente des Audios an. |
loop | Audio wird in einer Schlaufe wiedergegeben. |
muted | Audio wird stumm abgespielt. |
# Verfügbare CSS-Klassen für Styling
Die folgenden CSS-Klassen können für ein individuelles Styling genutzt werden.
| CSS-Klasse | Beschreibung |
|---|---|
.story-audio-container | Klasse für das Styling des Containers für das Audio. |
.story-audio-player | Klasse für das Styling des <audio> Element. |
.story-audio-caption | Klasse für das Styling der Beschreibung des Audios. |
# Slideshow
# Komponent einsetzen
Mit Storytellr kannst du einfach deine eigenen lokal abgespeicherten Audios auf deiner Webseite einbetten und eine Slideshow generieren lassen. Du kannst verschiedene Quellen mit verschiedenen Dateiformaten angeben, der Browser wählt die für ihn passende Version aus. Storytellr bietet dir zusätzlich einige CSS-Klassen, die dir den Einsatz der Audios zusätzlich vereinfachen.
<section class="story-section">
<div class="story-audio-slideshow" id="audioSlideshow">
<div class="story-audio-slideshow-container">
<div class="story-audio-slideshow-text">
<p>Alfredo</p>
</div>
<audio class="story-audio-player" controls>
<source src="../src/assets/audio/audio01.ogg" type="audio/ogg">
<source src="../src/assets/audio/audio01.mp3" type="audio/mpeg">
Leider unterstützt dein Browser keine Audio-Tags. Wenn du möchtest, kannst du das Audio
<a href="../src/assets/audio/audio01.mp3">herunterladen</a> und in deinem eigenen Audio-Player
anhören.
</audio>
<div class="story-audio-slideshow-caption">
Beschreibung zu Audio eins.
</div>
</div>
<div class="story-audio-slideshow-container">
<div class="story-audio-slideshow-text">
<p>Affra</p>
</div>
<audio class="story-audio-player" controls>
<source src="../src/assets/audio/audio02.ogg" type="audio/ogg">
<source src="../src/assets/audio/audio02.mp3" type="audio/mpeg">
Leider unterstützt dein Browser keine Audio-Tags. Wenn du möchtest, kannst du das Audio
<a href="../src/assets/audio/audio02.mp3">herunterladen</a> und in deinem eigenen Audio-Player
anhören.
</audio>
<div class="story-audio-slideshow-caption">
Beschreibung zu Audio zwei.
</div>
</div>
<div class="story-audio-slideshow-container">
<div class="story-audio-slideshow-text">
<p>Bernardo</p>
</div>
<audio class="story-audio-player" controls>
<source src="../src/assets/audio/audio03.ogg" type="audio/ogg">
<source src="../src/assets/audio/audio03.mp3" type="audio/mpeg">
Leider unterstützt dein Browser keine Audio-Tags. Wenn du möchtest, kannst du das Audio
<a href="../src/assets/audio/audio03.mp3">herunterladen</a> und in deinem eigenen Audio-Player
anhören.
</audio>
<div class="story-audio-slideshow-caption">
Beschreibung zu Audio drei.
</div>
</div>
</div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
Sobald das Grundgerüst für die Audio-Slideshow steht, kannst du diese nun mit der Storytellr.js-Funktion generieren lassen.
new $story.AudioSlideshow({
id: "audioSlideshow", // deine definierte ID
count: true, // default: false
autoplay: true // default: true
})
1
2
3
4
5
2
3
4
5
| Parameter | Type | Wert | Beschreibung |
|---|---|---|---|
id* | String | audioSlideshow | Deine zuvor definierte ID im HTML. |
count | Boolean | true / false | Nummerierung der einzelnen Audios. |
autoplay | Boolean | true / false | Automatisches Abspielen beim durchklicken. |
# Generierter HTML-Code
Aus den obenstehenden Konfigurationen wird folgender HTML-Code generiert.
<section class="story-section">
<div class="story-audio-slideshow" id="audioSlideshow">
<div class="story-audio-slideshow-container" style="display: block;">
<div class="story-audio-slideshow-text">
<p>Alfredo</p>
</div>
<audio class="story-audio-player" controls="">
<source src="../src/assets/audio/audio01.ogg" type="audio/ogg">
<source src="../src/assets/audio/audio01.mp3" type="audio/mpeg">
Leider unterstützt dein Browser keine Audio-Tags. Wenn du möchtest, kannst du das Audio
<a href="../src/assets/audio/audio01.mp3">herunterladen</a> und in deinem eigenen Audio-Player
anhören.
</audio>
<div class="story-audio-controllers">
<span class="story-audio-controller story-audio-controller-0 active-audio-controller" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 0)"></span>
<span class="story-audio-controller story-audio-controller-1" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 1)"></span>
<span class="story-audio-controller story-audio-controller-2" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 2)"></span>
</div>
<div class="story-audio-slideshow-caption">(1 / 3) Beschreibung zu Audio eins.</div>
</div>
<div class="story-audio-slideshow-container" style="display: none;">
<div class="story-audio-slideshow-text">
<p>Affra</p>
</div>
<audio class="story-audio-player" controls="">
<source src="../src/assets/audio/audio02.ogg" type="audio/ogg">
<source src="../src/assets/audio/audio02.mp3" type="audio/mpeg">
Leider unterstützt dein Browser keine Audio-Tags. Wenn du möchtest, kannst du das Audio
<a href="../src/assets/audio/audio02.mp3">herunterladen</a> und in deinem eigenen Audio-Player
anhören.
</audio>
<div class="story-audio-controllers">
<span class="story-audio-controller story-audio-controller-0 active-audio-controller" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 0)"></span>
<span class="story-audio-controller story-audio-controller-1" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 1)"></span>
<span class="story-audio-controller story-audio-controller-2" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 2)"></span>
</div>
<div class="story-audio-slideshow-caption">(2 / 3) Beschreibung zu Audio zwei.</div>
</div>
<div class="story-audio-slideshow-container" style="display: none;">
<div class="story-audio-slideshow-text">
<p>Bernardo</p>
</div>
<audio class="story-audio-player" controls="">
<source src="../src/assets/audio/audio03.ogg" type="audio/ogg">
<source src="../src/assets/audio/audio03.mp3" type="audio/mpeg">
Leider unterstützt dein Browser keine Audio-Tags. Wenn du möchtest, kannst du das Audio
<a href="../src/assets/audio/audio03.mp3">herunterladen</a> und in deinem eigenen Audio-Player
anhören.
</audio>
<div class="story-audio-controllers">
<span class="story-audio-controller story-audio-controller-0 active-audio-controller" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 0)"></span>
<span class="story-audio-controller story-audio-controller-1" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 1)"></span>
<span class="story-audio-controller story-audio-controller-2" onclick="$story.AudioSlideshow.showCurrentAudio("audioSlideshow", true, 2)"></span>
</div>
<div class="story-audio-slideshow-caption">(3 / 3) Beschreibung zu Audio drei.</div>
</div>
</div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# Verfügbare CSS-Klassen für Styling
Die folgenden CSS-Klassen können für ein individuelles Styling genutzt werden.
| CSS-Klasse | Beschreibung |
|---|---|
.story-audio-slideshow | Klasse für das Styling des Wrappers der Slideshow. |
.story-audio-slideshow-container | Klasse für das Styling des Containers der Slideshow. |
.story-audio-slideshow-text | Klasse für das Styling des Textes oberhalb des Audio. |
.story-audio-player | Klasse für das <audio> Element. |
.story-audio-controllers | Klasse für das Styling des Wrappers der Controller. |
.story-audio-controller | Klasse für das Styling der einzelnen Controller. |
.active-audio-controller | Klasse für das Styling des aktiven Controllers. |
← Bilder Multimediales →