- 169.254.1.1: So geht's zur Fritzbox! (137x gelesen)
- Festplatte formatieren: Format C (121x gelesen)
- Irfanview auf deutsch (118x gelesen)
- Windows Reparatur: XP reparieren (112x gelesen)
- Malwarebytes Anleitung (111x gelesen)
|
|
|||||
|
Webmaster: Audio mit Javascript / HTML5 abspielenUm 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: <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> <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>
Fragen zu diesem Tipp? In unserem Webmaster-Forum helfen wir weiter!
|
Mehr Tipps zu Webmaster: Audio mit Javascript / HTML5 abspielenRealtek HD Audio Codec - Version 2.44 Realtek hat für den vor allem auf Laptop und Onboard Soundchips auf PC Mainboards verbreiteten... Realtek HD Audio - Version R2.16 Realtek hat nur kurz nach der Version R2.15 ein Update auf die Version R2.16 von seinem HD Audi... Realtek HD Audio Codec - Version 2.42 Realtek hat für den vor allem auf Laptop und Onboard Soundchips auf PC Mainboards verbreiteten...
Ähnliche Fragen:
Tipps-Rubriken
© Computerhilfen.de (27746x gelesen) Webmaster: Audio mit Javascript / HTML5 abspielen |
|