Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| de:create:audio [26.09.2025 09:17] – angelegt admin | de:create:audio [26.09.2025 09:44] (aktuell) – admin | ||
|---|---|---|---|
| Zeile 8: | Zeile 8: | ||
| - | ==== mp3 einfach einbinden ==== | + | ===== mp3 einfach einbinden |
| Hat man die Audio-Datei im mp3-Format kodiert und auf den Befragungsserver hochgeladen, | Hat man die Audio-Datei im mp3-Format kodiert und auf den Befragungsserver hochgeladen, | ||
| - | ==== mp3 via HTML5 einbinden ==== | + | ===== mp3 via HTML5 einbinden ===== |
| - | + | ||
| - | Das HTML5-Tag ''< | + | |
| - | + | ||
| - | Damit die Audio-Datei in allen aktuellen Browsern funktioniert, | + | |
| Für die Einbindung legen Sie unter **Textbausteine u. Beschriftungen** einen neuen Textbaustein mit folgendem Inhalt und // | Für die Einbindung legen Sie unter **Textbausteine u. Beschriftungen** einen neuen Textbaustein mit folgendem Inhalt und // | ||
| Zeile 24: | Zeile 20: | ||
| <audio id=" | <audio id=" | ||
| <source src=" | <source src=" | ||
| - | <source src=" | ||
| Ihr Browser kann diese Audio-Datei leider nicht abspielen | Ihr Browser kann diese Audio-Datei leider nicht abspielen | ||
| </ | </ | ||
| Zeile 31: | Zeile 26: | ||
| Der/die Dateinamen werden in den ''< | Der/die Dateinamen werden in den ''< | ||
| - | Mit CSS-Formatierungen kann man die Größe des Players einstellen | + | Mit CSS-Formatierungen kann man die Größe des Players einstellen. |
| <code html> | <code html> | ||
| Zeile 38: | Zeile 33: | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| + | ===== Einfacher Abspiel-Knopf ===== | ||
| + | |||
| + | Eine Positionierung außerhalb des sichtbaren Bereichs lässt den Player komplett verschwinden. Sie können das Abspielen dann durch einen eigenen Knopf und ein wenig JavaScript starten. | ||
| <code html> | <code html> | ||
| - | <audio id="audio03" | + | <audio id="stimulus" |
| <source src=" | <source src=" | ||
| </ | </ | ||
| + | |||
| + | <div style=" | ||
| + | <button id=" | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | let button = document.getElementById(" | ||
| + | let audio = document.getElementById(" | ||
| + | |||
| + | button.addEventListener(" | ||
| + | // Automatisch zurückspulen (optional) | ||
| + | audio.currentTime = 0; | ||
| + | // Abspielen starten | ||
| + | audio.play(); | ||
| + | }); | ||
| + | </ | ||
| </ | </ | ||
| - | **Hinweis: | + | |
| + | ===== Audio ohne sichtbaren Player ===== | ||
| + | |||
| + | Mit dem Attribut '' | ||
| + | |||
| + | **Hinweis: | ||
| + | |||
| + | <code html> | ||
| + | <audio id=" | ||
| + | <source src=" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | Für diesen Fall sollten Sie ein JavaScript vorsehen, welches die Bedienelemente nach kurzer Zeit einblendet, wenn die Mediendatei nicht startet. Zum Beispiel: | ||
| <code html> | <code html> | ||
| Zeile 51: | Zeile 79: | ||
| <source src=" | <source src=" | ||
| </ | </ | ||
| + | |||
| <script type=" | <script type=" | ||
| <!-- | <!-- | ||
| Zeile 59: | Zeile 88: | ||
| audio.setAttribute(" | audio.setAttribute(" | ||
| } | } | ||
| - | }, 250); | + | }, 500); |
| }); | }); | ||
| // --> | // --> | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| + | |||
| + | ===== Automatisch Weiter ===== | ||
| Ebenfalls mittels JavaScript kann man die Steuerung der Audio-Datei auch noch weiter verfeinern. So kann man über das JavaScript-Ereignis (Event) '' | Ebenfalls mittels JavaScript kann man die Steuerung der Audio-Datei auch noch weiter verfeinern. So kann man über das JavaScript-Ereignis (Event) '' | ||
| Zeile 71: | Zeile 103: | ||
| <source src=" | <source src=" | ||
| </ | </ | ||
| + | |||
| <script type=" | <script type=" | ||
| <!-- | <!-- | ||
| Zeile 83: | Zeile 116: | ||
| // Nach dem Abspielen automatisch weiter zur nächsten Seite | // Nach dem Abspielen automatisch weiter zur nächsten Seite | ||
| audio.addEventListener(" | audio.addEventListener(" | ||
| - | }, 250); | + | }, 500); |
| }); | }); | ||
| // --> | // --> | ||
| Zeile 93: | Zeile 126: | ||
| - | ==== Hinweise zu Hörstudien ==== | + | ===== Hinweise zu Hörstudien ===== |
| + | |||
| + | Nahezu alle aktuellen Browser unterstützen der mp3 Format. Optional können Sie die Audio-Datei zusätzlich im Format ogg hochladen und dem Browser beide Varianten anbieten. Um Audio-Dateien in die komprimierten Formate zu konvertieren, | ||
| + | |||
| + | <code html> | ||
| + | <audio id=" | ||
| + | <source src=" | ||
| + | <source src=" | ||
| + | Ihr Browser kann diese Audio-Datei leider nicht abspielen | ||
| + | </ | ||
| + | </ | ||
| Wenn der Audio-Stimulus nicht nur Musik oder Sprache transportieren soll, sondern wenn es um feinste Nuance geht, dann kann die verlustbehaftete mp3-Kompression zum Problem werden. Diese ist zum Beispiel nicht darauf optimiert, das Klopfen eines Spechts zu komprimieren. | Wenn der Audio-Stimulus nicht nur Musik oder Sprache transportieren soll, sondern wenn es um feinste Nuance geht, dann kann die verlustbehaftete mp3-Kompression zum Problem werden. Diese ist zum Beispiel nicht darauf optimiert, das Klopfen eines Spechts zu komprimieren. | ||
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
