יצירת ספר אינטראקטיבי - חלק 26 - קולות רקע בעזרת HTML5

יריב 02/06/2013 (נערך לאחרונה ב-04/06/2013)

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

בשלב הראשון צריך למצוא קובץ אודיו מתאים.

מחיפוש קצר בגוגל מצאתי אתרים רבים ומאחד הראשונים בתוצאות החיפוש מצאתי קובץ אודיו יחסית מתאים, לפחות להדגמה זה מספיק טוב, מהאתר www.freesound.org.

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

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

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

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

הדפדפנים השונים תומכים נכון להיום ב-3 קידודים שונים: MP3, WAV, OGG.

לא כל הדפדפנים תומכים בכולם לכן בדרך כלל מומלץ לכלול את שלושתם כפי שמוסבר ב- w3schools.

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

בקובץ index.html נוסיף את השורות הבאות:

</audio>

<audio> הוא התג החדש לניהול והגדרת צלילים.

הגדרנו לו id כדי שנוכל לנהל ולשנות פרמטרים כמו גובה הווליום דרך קוד ה- JavaScript.

בקובץ fire.js נוסיף את הקוד הבא:

var snd = document.getElementById('fire_sound');

snd.volume = 1;

snd.loop = true;

snd.play();

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

זהו. די פשוט לא?

<-- חלק 25 חלק 27 -->