מעדיע סעשאַן אַפּי

פֿאַרבעסערן די מידיאַ דערפאַרונג

אויב איר נוצן דעם וועב אַפּ מיט ענגליש אָדער דייַטש, איר וועט זען אַן אַודיאָ פּלייבאַק קנעפּל אין די שפּיץ פון די אַרטיקל. קליקינג אויף דעם קנעפּל סטאַרץ אַ לייענען-געזונט אַודיאָ שפּור פֿאַר די געשריבן טעקסט. אָן קיין מאַדאַפאַקיישאַנז, דאָס אַרבעט זייער פייַן, אָבער איך געדאַנק אַז איך קען פֿאַרבעסערן עס.

צו צושטעלן מער דאַטן און אפילו פּלייבאַק קאָנטראָלס, איר קענט איצט נוצן אַ נייַע אַפּי פֿאַר פּראָגרעסיוו וועב אַפּפּס גערופֿן "מעדיע סעסיע אַפּי". אויב אַ בלעטערער שטיצן עס, די אַפּלאַקיישאַן קענען פֿאַרבעסערן די מידיאַ דערפאַרונג באטייטיק.

• צושטעלן אַן אלבאם אַרטוואָרק
• צושטעלן מער אינפֿאָרמאַציע וועגן די אַודיאָ שפּור, אַזאַ ווי טיטל, אלבאם נאָמען אָדער קינסטלער נאָמען
• צושטעלן פּלייבאַק קאָנטראָלס, אַזוי אַז וסערס קענען פּויזע אָדער האָפּקען טיילן פון די אַודיאָ שפּור אַרויס פון דיין וועב אַפּ

פשוט געזאגט, פשוט געטאן

די ימפּלאַמענטיישאַן פון די "מעדיע סעסיע אַפּי" איז זייער סטרייטפאָרווערד און ריקווייערז בלויז אַ ביסל שורות קאָד.

function setMediaSessionMetaData(props){
  // Progressive enhancement of your PWA,
  // which means we have to check if the
  // new API is available.
  if(!('mediaSession' in navigator)){
    return;
  }
  
  navigator.mediaSession.metadata = new MediaMetadata({
    title: props.title,
    artist: props.artist
    album: props.album,
    artwork: props.artwork
  });
  
  // Add action handlers, if any.
  // For a complete list, check out the
  // MDN-link in the addendum.
  if(props.play){
    navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  }
}

// ... Later in your code ...

setMediaSessionMetaData({
  title: "Song name",
  artist: "Artist name",
  album: "Album name",
  artwork: [{ 
    src: 'https://dummyimage.com/512x512',
    sizes: '512x512',
    type: 'image/png' }]
});

אויב איר נוצן טייפּסקריפּט, עס איז אויך אַ פּעקל מיט די פֿאַרבונדענע טיפּ זוך אויף NPM.

נאָך די ענדערונגען זענען צוגעלייגט, איר קענען באַשטעטיקן דיין ימפּלאַמענטיישאַן דורך פּלייינג די אַודיאָ שפּור אין אַ בלעטערער מיט שטיצן פֿאַר די API, אַזאַ ווי Google Chrome. אויב אַלץ איז באַשטימט ריכטיק, די מעדיע פֿענצטער אין קראָום וועט איצט ווייַזן די צוגעשטעלט נעמען, אלבאם אַרטוואָרק און קאָנטראָלס, דיפּענדינג אויף דיין ימפּלאַמענטיישאַן.

קלאָוזינג ווערטער

די "מעדיע סעסיע אַפּי" איז אַ זייער פּשוט דערצו צו דיין פּוואַ, וואָס אַלאַוז דיין וסערס צו דערפאַרונג לידער אָדער ווידיאס מיט ענכאַנסט מעטאַדאַטאַ און קאָנטראָלס. דער API איז דערווייַל אנגעצייכנט ווי יקספּערמענאַל, אָבער קענען שוין זיין געוויינט מיט רובֿ מאָדערן בראַוזערז.