PracticU

השמעת קובץ מוזיקה

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

השמעת קובץ מוזיקה
בשיעור לומדים להשמיע קובץ מוזיקה במכשיר המשתמש בעזרת PhoneGap, ולשלוט בהשמעה: הפעלה, עצירה, קפיצה למיקום, הצגת זמן וכוונון עוצמת קול.
השלבים העיקריים
1. טעינת השיר בעת עליית האפליקציה: נרשמים לאירוע deviceready, ובתוכו יוצרים אובייקט Media עם כתובת הקובץ ופונקציות להצלחה ולכישלון.
2. הפעלה ועצירה: play() מתחיל את ההשמעה, ו-stop() עוצר אותה. אחרי העצירה קוראים ל-release() כדי להחזיר את המשאבים למערכת.
3. הצגת זמן נוכחי: מגדירים טיימר עם setInterval כל 1000 מילישניות. בכל פעם קוראים ל-getCurrentPosition ומציגים את השניות הנוכחיות מתוך משך השיר הכולל. בעצירה מבטלים את הטיימר עם clearInterval.
4. קפיצה למיקום: seekTo מקבל מיקום במילישניות ומקפיץ את ההשמעה לשם.
5. שליטה בעוצמה: משתנה גלובלי שומר את העוצמה בין 0 ל-1. הכפתורים מוסיפים או מורידים 0.1 וקוראים ל-setVolume.
שימו לב
משך השיר (getDuration) עשוי להחזיר -1 כשאינו ידוע. לכן בתצוגה מטפלים בערך הזה כאילו הוא אפס. בנוסף, מספר בתצוגה שאינו מספר מוצג כ-NaN ואפשר להתעלם ממנו.
בסיום השיעור יש בידיכם יכולת להשמיע מוזיקה, להציג את הזמן, לקפוץ בשיר ולשלוט בעוצמה מתוך האפליקציה עצמה.
השיעור הבא בקורס: הצגת אתר אינטרנט באפליקציה

פרקי ההרצאה: השמעת קובץ מוזיקה

  1. 00:00

    השמעת קובץ מוזיקה ב-PhoneGap

  2. 01:12

    רישום לאירוע deviceReady

  3. 01:56

    טעינת קובץ MP3 לאובייקט Media

  4. 04:42

    השמעת השיר עם play

  5. 05:48

    עצירת השיר ושחרור הזיכרון

  6. 07:14

    הצגת זמן השיר עם setInterval

  7. 08:11

    קבלת מיקום השיר עם getCurrentPosition

תמלול ההרצאה: השמעת קובץ מוזיקה

הטקסט המלא של הדקות הראשונות בהרצאה «השמעת קובץ מוזיקה» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:01

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

  2. 00:36

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

  3. 00:58

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

  4. 01:10

    יש לנו את הדוקיומנט Add Event Listener, אנחנו רוצים להירשם ל-Device Ready, ובפונקציה הזאת שמופעלת כאשר המשתמש, או יותר נכון האפליקציה, מוכנה לפעולה, מה שאנחנו רוצים לעשות זה להתחבר לאיזשהו קובץ, בואו ניקח כרגע איזשהו קובץ mp3 שנמצא איפשהו באינטרנט.

  5. 01:44

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

  6. 02:19

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

  7. 02:46

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

  8. 03:05

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

  9. 03:51

    ניקח span איזשהו message, מאתר את ה-span הזאת ונרשום פה done עכשיו יש לנו כאן את הפונקציה הזאת שבעצם מתבצעת ב-device ready ומאפשרת להשמיע את ה-song אז הפונקציה הזאת שהתבצעה ב-device רדי טענה אותו לזיכרון של הטלפון הנייד אבל לא השמיע אותו עדיין כאשר אנחנו רושמים mymedia.play כאן בעצם אנחנו משמיעים

  10. 04:55

    לראשונה את השיר בואו נריץ אנחנו רואים את האפליקציה ואנחנו לא שומעים עדיין את השיר בואו נלחץ על play song אמור להיות נשנה את זה ואנחנו שומעים בעצם את השיר מתנגן ברקע אוקיי איך אנחנו מפסיקים אותו בואו ניקח לחצה נוסף בינתיים השיר

  11. 05:35

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

  12. 06:23

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

  13. 07:01

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

  14. 07:19

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

  15. 07:42

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

  16. 07:53

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

  17. 08:05

    אנחנו רוצים כל 1000 מילי. בואו ניכנס לתוך הפונקציה של הסט אינטרוויל שהיא הולכת לקרוא לה כל 1000 מילי שניות. ומה שאנחנו רוצים לעשות זה לגשת למיימדיה נקודה get current position.

  18. 08:25

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

  19. 08:59

    אובייקט שמתאר את השגיאה בואו נכתוב את שתי הפונקציות האלה יש לנו פה את הפונקציה הראשונה ואת הפונקציה השנייה של ה-error בואו נתחיל עם ה-error שיהיה פשוט נאתר את אותה לייבל שנקראת lbl-message ונכניס לתוך ה-HTML שלה איזשהו אירו למרות שלא בטוח שזה הדבר הנכון שיכולנו לעשות יכולנו פשוט להשאיר את זה ריק כאשר יש הצלחה מה שאנחנו

  20. 09:44

    רוצים לעשות קודם כל לקבל כמה שניות כרגע השיר קיים בהם וכמה שניות בעצם בדיוק ברגע זה השיר נמצא בהם ניקח seconds ונעגל את זה על ידי math של javascript אז ה-position זה מספר השניות הנוכחי.

  21. 10:16

    בנוסף, בואו ניקח את ה-duration הכללית, כמה סך הכל שניות תשאיר את זה. והפונקציה

לקורס המלא: קורס PhoneGap אונליין

ההרצאה הקודמת: אנשי קשר בטלפון

ההרצאה הבאה: הצגת אתר אינטרנט באפליקציה

הרצאות קשורות מקורסים אחרים

  • השמעת צלילים
  • קובץ YAML - Kubernetes
  • שחזור קובץ ב-Veeam
  • קובץ עם 14 מילון סיסמאות

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA
  • קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון