Musik ohne Flashplayer? HTML5!

    Hallo, heute zeige ich euch wie ihr ohne Flashplayer musik abspielen lassen könnt.


    Gebraucht werden:

    • MP3 Datei

    • OGG Datei (Einfach MP3 zu OGG konvertieren, einen Konverter findet ihr, falls ihr zu faul zum suchen seid, hier)

    • Das HTML(5)-Grundgerüst

    • Ein bisschen gehirn

    • Einen HTML5-fähigen Browser (Neuste version von Chrome, IE, Firefox oder Opera)


    Okay... Das hab' ich alles, und wie läuft das ganze jetzt ab?
    Nun gut, nachdem ihr das HTML-Grundgerüst habt, können wir sofort beginnen, als erstes gehen wir in unseren body-tag und geben diesen tag ein:

    Code
    <audio></audio>


    Das war's natürlich noch lange nicht, wir haben jetzt nur den tag, um jetzt Musik einzubinden könnten wir folgendes machen:

    Code
    <audio src="audio1.mp3"></audio>


    Doch so leicht ist das nicht, denn nicht alle Browser können mp3's abspielen, um die Browserkompatiblität zu erhöhen, brauchen wir noch eine .ogg Datei.
    Konvertieren wir unsere mp3 also in eine .ogg mit einem beliebigem Programm, nachdem dies geschehen ist, gehen wir zurück auf unsere Audio tags und entfernen unsere audio1.mp3:

    Code
    <audio> <source src="audio1.mp3"> <source src="audio1.ogg"> </audio>


    So, was haben wir gemacht? Wir haben die .mp3 und die .ogg eingebunden... Eingebunden heißt nicht dass gleichzeitig auch der Player zum vorschein kommt, dafür müssen wir noch etwas hinzufügen:

    Code
    <audio controls> <source src="audio1.mp3"> <source src="audio1.ogg"> </audio>


    Das "controls" lädt hierbei die Steuerelemente (= Player). Um das ganze nun noch zu optimieren, fügen wir vor dem controls noch ein "preload" hinzu:

    Code
    <audio preload controls> <source src="audio1.mp3"> <source src="audio1.ogg"> </audio>


    Dies sorgt lediglich dafür dass die Dateien vorgeladen werden, somit werden die Dateien schon vor dem drücken auf "Play" geladen.


    Wenn wir nun die html öffnen, erscheint ein MP3-Player, in jedem Browser sieht dieser anders aus, aber die Zusammensetzung ist gleich.


    Falls ihr eine kleine, wenn auch etwas Unqualitative Vorschau haben wollt wie das ganze danach aussieht, habe ich hier eine kleine vorschau gemacht:
    http://munkeezy.mu.funpic.de/html5/index.htm



    Bei positivem Feedback werde ich in Zukunft noch mehr solcher Tutorials machen.


    Mit freundlichen Grüßen
    munkee


    *EDIT: Satz verbessert der das Verständnis beeinträchtigt hat.

    Einmal editiert, zuletzt von munkee ()