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

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תכנות
  3. האזנה בJS ללחיצה על מקש שיר קודם/הבא במקלדת - אפשרי?

האזנה בJS ללחיצה על מקש שיר קודם/הבא במקלדת - אפשרי?

מתוזמן נעוץ נעול הועבר תכנות
12 פוסטים 3 כותבים 355 צפיות 2 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • צדיק תמיםצ צדיק תמים

    האם אפשרי להאזין בJS לאירוע לחיצה על כפתור שיר קודם/הבא במקלדת - מסומן בתמונה, לא מצאתי תמונה יותר ברורה:
    CleanShot 2022-09-14 at 23.15.16@2x.png
    ולבצע פעולות בהתאם?
    המטרה היא להחליף שיר בנגן אינטרנטי באמצעות המקשים הרגילים, כרגע אני עושה את זה עם מקשי החיצים הרגילים במקלדת - ימינה ושמאלה, השאלה האם שייך להאזין לכפתורים הנ"ל, לפחות כאשר נמצאים על האתר, כך שתהיה חוויית שימוש דומה יותר לתוכנה רגילה שמותקנת על המחשב.
    אשמח אם יש למישהו מידע, תודה מראש.

    dovidD מנותק
    dovidD מנותק
    dovid
    ניהול
    כתב ב נערך לאחרונה על ידי dovid
    #2

    @צדיק-תמים שמתי קוד כזה בקונסול:

     document.addEventListener("keydown", console.log);
    

    ולחצתי על הכפתורים האלה, וזה אכן לא "תפס" את האירוע.
    פתחתי את MDN בדף שמתאר את כל המקשים, ואיתרתי את שם המקש: MediaTrackNext.

    חיפשתי בגוגל: javascript keydwon MediaTrackNext
    הגעתי בתוצאה הראשונה של סטאק לתשובה זו https://stackoverflow.com/a/67046309/1271037
    שמפנה בתורה לתשובה זו:
    https://stackoverflow.com/a/65132225/1271037

    ניסיתי את הקוד הזה:

      navigator.mediaSession.metadata = new MediaMetadata({
        title: 'Unforgettable',
        artist: 'Nat King Cole',
        album: 'The Ultimate Collection (Remastered)',
        artwork: [
          { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
          { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
          { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
          { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
          { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
          { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
        ]
      });
    
    navigator.mediaSession.setActionHandler('previoustrack', x=> console.log('previoustrack'));
    navigator.mediaSession.setActionHandler('nexttrack', x=> console.log('previoustrack'));
    

    ומה? לא עובד לי.
    אז למה כתבתי הכל? אולי זה יקדם אותך.

    • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
    • בכל נושא אפשר ליצור קשר dovid@tchumim.com
    I תגובה 1 תגובה אחרונה
    11
    • dovidD dovid

      @צדיק-תמים שמתי קוד כזה בקונסול:

       document.addEventListener("keydown", console.log);
      

      ולחצתי על הכפתורים האלה, וזה אכן לא "תפס" את האירוע.
      פתחתי את MDN בדף שמתאר את כל המקשים, ואיתרתי את שם המקש: MediaTrackNext.

      חיפשתי בגוגל: javascript keydwon MediaTrackNext
      הגעתי בתוצאה הראשונה של סטאק לתשובה זו https://stackoverflow.com/a/67046309/1271037
      שמפנה בתורה לתשובה זו:
      https://stackoverflow.com/a/65132225/1271037

      ניסיתי את הקוד הזה:

        navigator.mediaSession.metadata = new MediaMetadata({
          title: 'Unforgettable',
          artist: 'Nat King Cole',
          album: 'The Ultimate Collection (Remastered)',
          artwork: [
            { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
            { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
            { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
            { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
            { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
            { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
          ]
        });
      
      navigator.mediaSession.setActionHandler('previoustrack', x=> console.log('previoustrack'));
      navigator.mediaSession.setActionHandler('nexttrack', x=> console.log('previoustrack'));
      

      ומה? לא עובד לי.
      אז למה כתבתי הכל? אולי זה יקדם אותך.

      I מנותק
      I מנותק
      ivrtikshoret
      כתב ב נערך לאחרונה על ידי
      #3

      @dovid
      ניסיתי פה ואני רואה שזה כן תופס:
      a1972b01-b764-4b27-84c1-a27864ea34f7-image.png

      dovidD צדיק תמיםצ 2 תגובות תגובה אחרונה
      1
      • I ivrtikshoret

        @dovid
        ניסיתי פה ואני רואה שזה כן תופס:
        a1972b01-b764-4b27-84c1-a27864ea34f7-image.png

        dovidD מנותק
        dovidD מנותק
        dovid
        ניהול
        כתב ב נערך לאחרונה על ידי
        #4

        @ivrtikshoret כתב בהאזנה בJS ללחיצה על מקש שיר קודם/הבא במקלדת - אפשרי?:

        ניסיתי פה ואני רואה שזה כן תופס:

        אולי כי זה בתיבת טקסט פעילה? אני ניסיתי בדף אינטרנט פעיל אבל ללא פקד טקסטואלי, זה כנראה המקרה הנדרש בשאלה.

        • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
        • בכל נושא אפשר ליצור קשר dovid@tchumim.com
        I תגובה 1 תגובה אחרונה
        1
        • dovidD dovid

          @ivrtikshoret כתב בהאזנה בJS ללחיצה על מקש שיר קודם/הבא במקלדת - אפשרי?:

          ניסיתי פה ואני רואה שזה כן תופס:

          אולי כי זה בתיבת טקסט פעילה? אני ניסיתי בדף אינטרנט פעיל אבל ללא פקד טקסטואלי, זה כנראה המקרה הנדרש בשאלה.

          I מנותק
          I מנותק
          ivrtikshoret
          כתב ב נערך לאחרונה על ידי
          #5

          @dovid
          לא מבין למה אצלך לא אצלי עובד מצוין:
          faa031ab-be81-4890-a715-6e2d999f1214-image.png

          dovidD תגובה 1 תגובה אחרונה
          0
          • I ivrtikshoret

            @dovid
            לא מבין למה אצלך לא אצלי עובד מצוין:
            faa031ab-be81-4890-a715-6e2d999f1214-image.png

            dovidD מנותק
            dovidD מנותק
            dovid
            ניהול
            כתב ב נערך לאחרונה על ידי
            #6

            @ivrtikshoret באמת מעניין.

            • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
            • בכל נושא אפשר ליצור קשר dovid@tchumim.com
            תגובה 1 תגובה אחרונה
            1
            • I ivrtikshoret

              @dovid
              ניסיתי פה ואני רואה שזה כן תופס:
              a1972b01-b764-4b27-84c1-a27864ea34f7-image.png

              צדיק תמיםצ מנותק
              צדיק תמיםצ מנותק
              צדיק תמים
              כתב ב נערך לאחרונה על ידי
              #7

              @ivrtikshoret אצלי לא...

              Don’t comment bad code — rewrite it." — Brian W. Kernighan and P. J. Plaugher"
              טיפים

              I תגובה 1 תגובה אחרונה
              0
              • צדיק תמיםצ צדיק תמים

                @ivrtikshoret אצלי לא...

                I מנותק
                I מנותק
                ivrtikshoret
                כתב ב נערך לאחרונה על ידי
                #8

                @צדיק-תמים כתב בהאזנה בJS ללחיצה על מקש שיר קודם/הבא במקלדת - אפשרי?:

                @ivrtikshoret אצלי לא...

                ניסית בלי fn או עם?

                dovidD תגובה 1 תגובה אחרונה
                0
                • I ivrtikshoret

                  @צדיק-תמים כתב בהאזנה בJS ללחיצה על מקש שיר קודם/הבא במקלדת - אפשרי?:

                  @ivrtikshoret אצלי לא...

                  ניסית בלי fn או עם?

                  dovidD מנותק
                  dovidD מנותק
                  dovid
                  ניהול
                  כתב ב נערך לאחרונה על ידי
                  #9

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

                  • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                  • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                  dovidD תגובה 1 תגובה אחרונה
                  0
                  • dovidD dovid

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

                    dovidD מנותק
                    dovidD מנותק
                    dovid
                    ניהול
                    כתב ב נערך לאחרונה על ידי dovid
                    #10

                    כעת פתאום עובד לי...
                    (הkeydown הרגיל כמו ל@ivrtikshoret).

                    • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
                    • בכל נושא אפשר ליצור קשר dovid@tchumim.com
                    תגובה 1 תגובה אחרונה
                    1
                    • צדיק תמיםצ מנותק
                      צדיק תמיםצ מנותק
                      צדיק תמים
                      כתב ב נערך לאחרונה על ידי צדיק תמים
                      #11

                      @ivrtikshoret בלי, וכאשר נמצאים בתוך תוכנת מוזיקה זה אכן מעביר שיר וכו'.
                      עדכון: אני ניסיתי עד עכשיו במחשב MacBook, ואף אחד מהם לא נקלט, גם לא ההגברה/הנמכה. העצירה נקלט בדפדפן - השמע נעצר, אבל לא נרשם בJS.
                      כעת בדקתי גם במחשב וינדוס, ושם הכפתורי הגברה/הנמכה נקלטו, אבל רק כשנמצאים בפוקוס בתוך התיבת טקסט. במחשב הוינדוס אין כפתורים של שיר קודם/הבא אז לא יכלתי לבדוק.

                      Don’t comment bad code — rewrite it." — Brian W. Kernighan and P. J. Plaugher"
                      טיפים

                      תגובה 1 תגובה אחרונה
                      1
                      • צדיק תמיםצ מנותק
                        צדיק תמיםצ מנותק
                        צדיק תמים
                        כתב ב נערך לאחרונה על ידי צדיק תמים
                        #12

                        טוב, אז התגלתה התעלומה! מי שמאפשר את זה הוא API בשם Media Session API
                        https://web.dev/media-session/#about-the-media-session-api

                        כאן יש דמו, וגם ביוטיוב מיישמים את זה בפלייליסטים.

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

                        Don’t comment bad code — rewrite it." — Brian W. Kernighan and P. J. Plaugher"
                        טיפים

                        תגובה 1 תגובה אחרונה
                        3
                        תגובה
                        • תגובה כנושא
                        התחברו כדי לפרסם תגובה
                        • מהישן לחדש
                        • מהחדש לישן
                        • הכי הרבה הצבעות


                        בא תתחבר לדף היומי!
                        • התחברות

                        • אין לך חשבון עדיין? הרשמה

                        • התחברו או הירשמו כדי לחפש.
                        • פוסט ראשון
                          פוסט אחרון
                        0
                        • דף הבית
                        • קטגוריות
                        • פוסטים אחרונים
                        • משתמשים
                        • חיפוש
                        • חוקי הפורום