מדריך מהיר להטמעת תג אודיו של HTML5

ארנסט דלגדו
ארנסט דלגדו
X

שלב 1: עטוף את אובייקט ה-Flash בתג האודיו

דפדפנים שלא מזהים את תג האודיו ייטענו את תוכן ה-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 תומך רק בתג אודיו בפורמט 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. כדי לכלול את הספרייה, תוכל פשוט להשתמש ב-Google AJAX Libraries API ולהוסיף את שתי השורות הבאות בכותרת שלך:

<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