HTML5 ses etiketini uygulamaya yönelik hızlı kılavuz

Ernest Delgado
Ernest Delgado
X

1. Adım: Flash nesnenizi ses etiketiyle sarmalayın

Ses etiketini tanımayan tarayıcılar, bunun yerine Flash içeriğini yükler.

<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. Adım: Kaynak referansı ekleyin

İstediğiniz kadar "kaynak" satırı ve biçimi ekleyebiliriz. Tarayıcı belirli bir biçimi desteklemiyorsa, sonraki biçime yedeklenir ve bu şekilde devam eder.

<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. Adım: Flash'a yedek ekleyin

Tarayıcının belirttiğimiz biçimlerden herhangi birini desteklememesi ihtimaline karşı, güvenliği sağlamak için yedeği bir Flash ses çalara eklememiz gerekir. Örneğin Firefox 3.5 yalnızca Ogg biçimli ses etiketini destekler, ancak yalnızca mp3 dosyası kullanılabilir.

<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>

İşlemi kolaylaştırmak amacıyla, Flash oynatıcıyı JavaScript aracılığıyla eklemek için SWFObject kitaplığını kullanıyoruz. Kitaplığı eklemek için, şu iki satırı başlığınıza ekleyerek Google AJAX Libraries API'sini kullanabilirsiniz:

<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>

4. adım: Oynatıcıyı göstermek için varsayılan kontrolleri ekleyin

Bu denetimler özelleştirilemez (sondaki örneklere bakın). Bu varsayılan denetimler desteklenen biçimden bağımsız olarak gösterileceği için görünürlüklerini daha önce oluşturduğumuz koşulla işlememiz gerekir.

// TODO: DevSite - Code sample removed as it used inline event handlers

Alternatif olarak, JavaScript ve CSS kullanarak kendi oynatıcınızı da oluşturabilirsiniz.

// TODO: DevSite - Code sample removed as it used inline event handlers