עבודה עם קבצי אודיו ב - HTML5

עד לאחרונה היכולת לנגן קבצי שמע המוטמעים בדפדפן הייתה תלויה לחלוטין בתוספים (Plugin) שונים כגון Flash, Quicktime וגם Silverlight. או במקרים מסוימים נאלצו כותבי אתרים להשתמש בספריות Javascript מיוחדות. HTML5 משנה את התמונה הזו ומאפשרת למתכנתים להוסיף שמע לאתרים שלהם ללא שימוש בתוספים אלא בעזרת תגי שפת HTML בלבד.

ב - HTML5 התג <audio> ישמש אותנו כדי לשלב צלילים בתוך דף כגון מוסיקה או צלילים אחרים. בין תחילת התג לסופו ניתן לשלב טקסט המיועד להצגה על ידי דפדפנים שאינם תומכים ב - HTML 5. ניתן למקם טקסט בין תחילת התג לסופו, אשר יוצג במקרה שהדפדפן של הגולש אינו תומך בתג זה שהינו חדש וכאמור הוצג לראשונה בגרסת HTML 5.

דוגמת קוד לשימוש בתג <audio>

<audio src="Notify.wav" autoplay="autoplay" controls="controls"></audio>

מאפיינים (Attributes)

התג audio תומך בכל המאפיינים הסטנדרטיים ומלבד זאת הינו בעל מספר מאפיינים ייחודיים:

מאפיין ערכים מהות
autoplay autoplay אם מוגדר אזי האודיו יתנגן מיד עם עליית הדף
controls controls אם מוגדר אזי יוצגו בדף לחצני שליטה כגון התחל, הפסק, עצור.
loop loop אם מוגדר יגרום לאודיו להתנגן בלולאה שוב ושוב.
preload preload מציין האם על האודיו להיטען כאשר הדף נטען. אם מוגדר autoplay אז מתעלמים מהגדרה זו.
src src הנתיב המצביע על מיקום קובץ האודיו.

רשימת הדפדפנים התומכים בתג Audio והפורמטים הנתמכים על ידם

הטבלה הבאה מציגה את כל הדפדפנים התומכים בתג <audio> וכן באיזה פורמטים של קבצי שמע הם תומכיים:

דפדפן aac mp3 ogg webm
כרום 12+ קיימת תמיכה קיימת תמיכה קיימת תמיכה קיימת תמיכה
פיירפוקס 3.6+     קיימת תמיכה קיימת תמיכה
אקספלורר 9+   קיימת תמיכה    
אופרה 10.6+ קיימת תמיכה   קיימת תמיכה קיימת תמיכה
ספארי 5+ קיימת תמיכה קיימת תמיכה    

מעיון בטבלה למעלה ביכולתנו לזהות שני מכשולים העומדים בפני מי שרוצה להטמיע קבצי שמע באתר שלו באמצעות התג <audio> והן:

  1. כפי שודאי אתם יכולים להתרשם אין אפילו פורמט אודיו אחד הנתמך על ידי כל הדפדפנים. אי לכך, אם נרצה שקובץ השמע שלנו ייתמך על ידי כל הדפדפנים המובילים נצטרך להתאים את קובץ השמע לסוג הדפדפן של הגולש.
  2. רק הגרסאות המתקדמות יחסית של הדפדפנים המובילים תומכים בתג <audio> כך שאם נרצה שכל הגולשים באתר יוכלו להאזין לקבצי השמע שלנו ניתקל בבעיה.

בהמשך מדריך זה אנסה להציע מספר פתרונות לבעיות שלעיל כך שלמרות כל המכשולים נוכל  מחד להשתמש בתג <audio> ומאידך לתת מענה לבעיות שלעיל.

מענה לבעיית המחסור בפורמט אחיד לקבצי שמע

לצערנו, מסיבות "פוליטיות" שלא זה המקום להיכנס אליהן, לא קיים פורמט שמע אחד הנתמך על ידי כל הדפדפנים המובילים, אולם שילוב של שניים מהפורמטים מכסה נושא זה על הצד הטוב ביותר. אם נוכל להציע לגולש את אותו קובץ שמע בפורמטים הבאים: ogg ו - mp3 נאפשר לכל הגולשים המשתמשים בדפדפנים התומכים בתג <audio> להאזין לקבצי השמע שלנו. השאלה הנשאלת היא כיצד נעשה זאת. התשובה לכך היא: באמצעות התג <source> שתפקידו הוא להגדיר אלטרנטיבה לקבצי אודיו ווידאו.

דוגמת קוד לשימוש בתג <source> כמענה לבעיית הפורמט האחיד

<audio controls>
   <source src="file.ogg" type="audio/ogg">
   <source src="file.mp3" type="audio/mp3">
</audio>

כאשר דפדפן התומך בתג <audio> נתקל בקוד שלמעלה הוא יבחר בפורמט הראשון שבו הוא תומך ואותו הוא ישמיע. היות וכל הדפדפנים המובילים תומכים באחד משני הפורמטים הללו אזי הקוד שלמעלה מהווה פיתרון לבעיית הפורמט האחיד.

מענה לדפדפנים שאינם תומכים בתג <audio>

כדי לתת מענה לדפדפנים שאינם תומכים בתג <audio> ובכל זאת להמשיך להשתמש בתג זה עלינו ליצור מצב שבו במקרה של חוסר תמיכה בתג נעמיד לרשות הדפדפן אלטרנטיבה אחרת בדמות תוסף לדפדפן (Plugin). היות והתוסף הפופולארי ביותר הוא נגן ה - Flash נשתמש בו כרשת ביטחון למקרה שניתקל בדפדפן שאינו תומך בתג <audio>. לשם כך נשתמש בתג <object>.

דוגמת קוד לשימוש בתוסף מסוג Flash כרשת ביטחון נגד דפדפנים שאינם תומכים בתג <audio>

<audio controls>
   <source src="file.ogg" type="audio/ogg">
   <source src="file.mp3" type="audio/mp3">
   <object data="mediaplayer.swf?audio=file.mp3">
      <param name="movie" value="mediaplayer.swf?audio=file.mp3">
   </object>
</audio>

שימו לב שהתג <audio> מאפשר לנו להכניס לתוכו תגים מקננים נוספים שבאמצעותם אנו גם יכולים לתת מענה לבעיית הפורמט (אנו עושים זאת באמצעות תגי ה - source) וכמו כן אנו נותנים מענה לבעיית חוסר התמיכה בתג audio על ידי שימוש בתג object המקנן אף הוא בתוך התג audio.

כמובן שהמדקדקים יכולים לטעון נגד הקוד שלמעלה שייתכן בהחלט מצב שבו דפדפן מסוים לא יתמוך בתג <audio> וכן לא תהיה בו תמיכה לנגן מסוג פלאש. ובכן בדיוק למקרה כזה נצטרך ליצור רשת ביטחון נוספת למקרה שרשת הביטחון הראשונה שלנו (הנסיגה לפלאש) תקרוס.

דוגמת קוד לשימוש בקוד audio עם רשת ביטחון מסוג פלאש ורשת ביטחון נוספת עבור מי שאין לו פלאש

כדי לכסות את כל האלטרנטיבות ולתת מענה גם למי שתוסף הפלאש אינו מותקן בדפדפן שלו ביכולתנו להוסיף לקוד שלנו רשת ביטחון נוספת בדמות האפשרות להוריד את קובץ השמע למחשב של המשתמש, שם יוכל להאזין לו בכלים שמחוץ לדפדפן.

<audio controls>
   <source src="file.ogg" type="audio/ogg">
   <source src="file.mp3" type="audio/mp3">
   <object data="mediaplayer.swf?audio=file.mp3">
      <param name="movie" value="mediaplayer.swf?audio=file.mp3">
<p>Your browser doesn't support audio or flash. You can download the audio file <a href="file.mp3">here</a> and listen to it on your computer</p>
</object>
</audio>

נדמה לי שכעת אנו מכוסים ומצד אחד אנו יכולים להשתמש בתג <audio> שהינו חלק בלתי נפרד משפת HTML5 ומצד שני אנו נותנים תמיכה גם לדפדפנים מיושנים שאינם תומכים בתג זה.

אם ברצונכם ליצור קוד זה בקלות ובמהירות עבור הפרוייקטים שלכם ביכולתכם להשתמש בחינם במחולל הקוד להטמעת קבצי אודיו בדפי HTML שבאתר זה.



מדריכים וכלים רלוונטיים נוספים בנושא זה

מחולל קוד להטמעת קבצי אודיו בדפי HTML

המדריך לתג <audio> ב - HTML5

המדריך לתג <source> ב - HTML5

המדריך לתג <object> ב - HTML5

המדריך לתג <param> ב - HTML5

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש