וובמאסטר - תיכנות ובניית אתרים

מדריך HTML5 - אודיו (התגית audio)

רן בר-זיק ,‏ אינטרנט ישראל‏ ‏/‏ 18 מרץ, 2011
F+
F-

בדומה לוידאו, תקן HTML 5 מאפשר לנו חירות גדולה מאד בכל הנוגע לשילוב אודיו בדף שלנו. כמו בוידאו, גם אודיו בעבר חייב אותנו לשימוש בפתרונות של צדדים שלישיים כגון פלאש או Real Media (למי שמכיר) שחייבו את הגולש להוריד תוספים. כיום, באמצעות HTML 5 ניתן לשלב אודיו בדף ללא בעיה ולשלוט על הפקדים שלו באמצעות CSS בקלות וביעילות.

בואו וניצור קובץ MP3 כלשהו וניצור איתו נגן. מאד פשוט לעשות את זה - עושים זאת כך:

<audio src="music.mp3" controls="controls">
הדפדפן שלך אינו תומך בתקן HTML 5. אנו מצטערים.
</audio>

וזה יראה כך בדפדפן:

נגן אודיו

בדומה לוידאו, גם כאן אנו יכולים להכניס תגיות שונות שיקבעו את ההתנהגות. בנוסף ל-controls, אנו יכולים להוסיף autoplay שיגרום לנגן לעבוד מיד עם טעינת הדף ו-loop על מנת לגרום לנגן להתחיל מחדש.

קידוד

הקידוד שבו אינטרנט אקספלורר 9, כרום וספארי תומכים בו הוא mp3. פיירפוקס תומך כרגע ב-ogg. כרגע עדיין לא נקבע הקידוד הסופי שתקן HTML 5 יעבוד איתו. כל עוד אין תקן מוסכם אנו צריכים לספק מספר קידודים על מנת שהאודיו יעבוד בכל הדפדפנים. עושים זאת כך:

<audio controls="controls">
       <source src="music.mp3" />
       <source src="music.ogg" />
הדפדפן שלך אינו תומך בתקן HTML 5. אנו מצטערים.
</audio>

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

רן בר-זיק, אינטרנט ישראל

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.

אינטרנט ישראל: www.internet-israel.com
תגיות: HTML5‏  /  מדריך‏  /  פיתוח‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות