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

בדומה לוידאו, תקן 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 יכול לחסוך הרבה כאב ראש ולהבטיח חוויה טובה בכל הדפדפנים והמערכות המודרניים.