- Word Smiley: Smilies + Zeichen in Word Dokumente einfügen!
- Linux uptime / runtime: So lange ist der PC bereits an!
- chmod Rechner: Werte für Linux Rechte berechnen!
- Aus für Flash: Google will Flash-Support im Chrome Browser abschalten
- Word Smiley: Smilies + Zeichen in Word Dokumente einfügen!
- chmod Rechner: Werte für Linux Rechte berechnen!
Webmaster: Audio mit Javascript / HTML5 abspielen
Um auf Webseiten Sounds und Audio-Dateien abzuspielen, braucht man keinen Flash-Player: Das <audio> Element aus dem HTML5 Standard kann Töne oder Lieder problemlos abspielen. Das funktioniert entweder als eigener Player mit Steuer-Buttons oder unsichtbar – oder zum Beispiel, um als Ton mit Javascript auf ein Ereignis zu reagieren und dann einen Sound abzuspielen.
Audio Player: Sound mit HTML 5 abspielen:
Der Code dazu:
<audio controls> <source src="musik.ogg" type="audio/ogg"> <source src="musik.mp3" type="audio/mpeg"> </audio>
Hier wird die Datei einmal als OGG-Vorbis und einmal als MP3 Datei übergeben – wobei das MP3 Format mittlerweile (anders als OGG) von allen Browsern unterstützt wird und daher die bessere Wahl ist.
Audio-Player ohne Steuer-Buttons:
Ohne Steuerung würde der Player nicht mehr angezeigt:
<audio> <source src="musik.mp3" type="audio/mpeg"> </audio>
Ohne Steuerung, also unsichtbar – dafür mit “Autoplay” – der Player startet einen Sound direkt beim Laden der Seite:
<audio autoplay> <source src="musik.mp3" type="audio/mpeg"> </audio>
Sound mit Javascript abspielen:
Um mit Javascript sehr schnell einen Sound zu laden und abzuspielen, hilft dieses kurze Skript, das ohne den HTML5 Audio-Player auskommt:
<script type="text/javascript"> var audio = new Audio('musik.mp3'); audio.play(); </script>
Hier wird ein neues Audio-Objekt definiert und anschließend mit “audio.play()” abgespielt. Möchte man stattdessen doch die Audio-Funktionen von HTML5 nutzen, hilft das folgende kleine Script. Es erstellt einen lehren DIV-Layer, der per CSS unsichtbar ist. Klickt man auf den Link, wird in diesen DIV der nötige HTML-Code geladen, um den Ton in dem Player (unsichtbar und mit autoplay) abzuspielen.
<script type="text/javascript"> function ton() { var x=document.getElementById("audio"); x.innerHTML='<audio autoplay><source src="mein-ton.mp3" type="audio/mpeg"/></audio>'; } </script> <a href="javascript:void(0);" onclick="ton();">Mein Link!</a> <div id="audio" style="visibility:hidden;height:1px;width:1px;"></div>
Da bei Klick auf einen normalen Link die Seite allerdings neu geladen wird, wird der Ton auch nicht abgespielt. Dieses Beispiel eignet sich also vor allem, wenn bei einem Klick eine Javascript-Aktion ausgeführt wird, die Inhalte auf der Seite aktualisiert oder neulädt, ohne die Seite selbst neu zu laden. Alternativ kann man den Link so setzen, dass das Ziel des Links ein neues Fenster oder ein anderer Frame ist:
<a href="seite-2.html" target="haupt-frame" onclick="ton();">Mein Link!</a>
-
http://www.amazon.de/gp/product/B005N82HDC/ref=as_li_ss_tl?ie=UTF8&tag=computerhilfen&linkCode=as2&camp=1638&creative=19454&creativeASIN=B005N82HDC
(7x gelesen) -
http://www.amazon.de/gp/product/B005N82HDC/ref=as_li_ss_tl?ie=UTF8&tag=computerhilfen&linkCode=as2&camp=1638&creative=19454&creativeASIN=B005N82HDC
(7x gelesen) - pc-einsteigerkurs-4-4 (6x gelesen)
- pc-einsteigerkurs-4-3 (5x gelesen)
- pc-einsteigerkurs-4-5 (5x gelesen)
Mehr Tipps zu Webmaster: Audio mit Javascript / HT...
-
Apple Mac: ZIP Datei mit Passwort schützen (ohne Zusatz-Tools)!
Durch das Zippen oder Komprimieren von Dateien spart man leicht Speicherplatz und kann mehrere Dateien als einzenes, praktisches Archiv weitergeben: Das Erstellen einer ZIP Datei...
-
ELSE IF mit Python: So geht’s!
Jede Programmiersprache hat ihre Eigenheiten: Während man in PHP und JavaScript die IF/ELSE Syntax mit "ELSE IF" um eine zweite Abfrage erweitert, funktioniert das nicht...
-
Webmaster: Tabellenzeile mit CSS automatisch abwechselnd färben
Um die Hintergrundfarbe einer HTML Tabellenzeile mit einer Farbe zu versehen, hilft CSS. Für eine gute Lesbarkeit kann es aber gerade bei längeren Tabellen hilfreich...
-
Webmaster: Element im Druck nicht anzeigen (visibility: hidden)
Wer Webseiten ausdrucken möchte, braucht oft nicht alle Elemente. Mit Media-Queries lassen sich verschiedene Layouts und Designs für verschiedene Medien erstellen: Vom Desktop-Bildschirm über das...
-
Apple Watch mit neuem iPhone koppeln: Schritt-für-Schritt Anleitung
Um die Apple Watch mit einem neuen iPhone zu koppeln, muss zunächst die Verbindung mit dem alten iPhone getrennt werden. Ist die Apple Watch noch...
Webmaster: Audio mit Javascript / HTML5 abspielen