Шаг 1. Оберните объект Flash тегом audio.
Те браузеры, которые не распознают аудиотег, вместо этого загружают Flash-контент.
<audio>
</span><span class="old">
<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>
</span><span class="new">
</audio>
Шаг 2. Добавьте ссылку на источник
Мы можем добавить столько «исходных» строк и форматов, сколько захотим. Если браузер не поддерживает один конкретный формат, он перейдет к следующему и так далее.
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" /></span><span class="old">
<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></span>
Шаг 3. Добавьте резервную версию Flash.
На всякий случай нам нужно добавить резервный вариант Flash-аудиоплеера на случай, если браузер не поддерживает ни один из указанных нами форматов. Например, Firefox 3.5 поддерживает только тег audio в формате Ogg , но у нас может быть доступен только файл mp3 .
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
<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>
</span><span class="new">
<div id="player_fallback"></div>
<script>
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></span>
Чтобы упростить задачу, мы используем библиотеку SWFObject для вставки Flash-плеера через JavaScript. Чтобы включить библиотеку, вы можете просто использовать API библиотек Google AJAX , вставив эти две строки в заголовок:
<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>
Шаг 4. Добавьте элементы управления по умолчанию, чтобы показать плееру
Эти элементы управления не подлежат настройке (см. примеры в конце). Поскольку эти элементы управления по умолчанию будут отображаться независимо от поддерживаемого формата, нам нужно будет обеспечить их видимость с помощью условия, которое мы создали ранее.
// TODO: DevSite - Code sample removed as it used inline event handlers
Кроме того, вы можете создать свой собственный плеер, используя JavaScript и CSS.
// TODO: DevSite - Code sample removed as it used inline event handlers