Schritt 1: Flash-Objekt in das Audio-Tag einschließen
In Browsern, die das Audio-Tag nicht erkennen, werden stattdessen die Flash-Inhalte geladen.
<audio>
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
Schritt 2: Quellreferenz hinzufügen
Wir können beliebig viele „Quell“-Zeilen und -Formate hinzufügen. Wenn der Browser ein bestimmtes Format nicht unterstützt, wird auf das nächste Format zurückgegriffen usw.
<audio>
<source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
Schritt 3: Fallback für Flash hinzufügen
Zur Sicherheit müssen wir einen Fallback auf einen Flash-Audioplayer hinzufügen, falls der Browser keines der von uns angegebenen Formate unterstützt. Firefox 3.5 unterstützt beispielsweise nur das Audio-Tag im Ogg-Format, aber wir haben möglicherweise nur die MP3-Datei verfügbar.
<audio>
<source src="test.mp3" type="audio/mpeg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
<div id="player_fallback"></div>
<script type="application/javascript">
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
swfobject.embedSWF(
"player_mp3_mini.swf",
"player_fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"test.mp3"},
{"bgcolor":"#085c68"});
}
}
</script>
Zur Vereinfachung verwenden wir die SWFObject-Bibliothek, um den Flash-Player über JavaScript einzufügen. Um die Bibliothek einzubinden, kannst du einfach die Google AJAX Libraries API verwenden und diese beiden Zeilen in den Header einfügen:
<script src="http://www.google.com/jsapi" type="application/javascript"></script>
<script type="application/javascript">google.load("swfobject", "2.2");</script>
Schritt 4: Standardsteuerelemente hinzufügen, damit der Player angezeigt wird
Diese Steuerelemente können nicht angepasst werden (siehe Beispiele am Ende). Da diese Standardsteuerelemente unabhängig vom unterstützten Format angezeigt werden, müssen wir ihre Sichtbarkeit mit der zuvor erstellten Bedingung steuern.
<audio id="audio_with_controls" controls="controls">
<source src="test.mp3" type="audio/mpeg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
<div id="player_fallback"></div>
<script type="application/javascript">
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
... SWFObject script line here ...
document.getElementsById('audio_with_controls').style.display = 'none';
}
}
</script>
Alternativ kannst du deinen eigenen Player mit JavaScript und CSS erstellen.
<audio id="audio">
<source src="test.mp3" type="audio/mpeg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
<div id="player_fallback"></div>
<div id="player" style="display: none">
<button onClick="document.getElementById('audio').play()">Play</button>
<button onClick="document.getElementById('audio').pause()">Pause</button>
</div>
<script type="application/javascript">
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
... SWFObject script lines here ...
} else { // HTML5 audio + mp3 support
document.getElementById('player').style.display = 'block';
}
}
</script>