Medya deneyimini geliştirin
Bu web uygulamasını ingilizce veya almanca yerel ayarıyla kullanıyorsanız, makalenin başında bir ses çalma düğmesi göreceksiniz. Düğmeye tıklamak, yazılı metin için yüksek sesle okunan bir ses parçasını başlatır. Herhangi bir değişiklik olmadan, bu çok güzel çalışıyor, ancak bunu geliştirebileceğimi düşündüm.
Daha fazla veri ve hatta oynatma kontrolleri sağlamak için artık “Media Session API” adı verilen aşamalı web uygulamaları için mevcut olan yeni bir API kullanabilirsiniz. Bir tarayıcının desteği varsa, uygulama medya deneyimini önemli ölçüde geliştirebilir.
- bir albüm resmi sağlayın
- başlık, albüm adı veya sanatçı adı gibi ses parçası hakkında daha fazla bilgi sağlayın
- kullanıcıların web uygulamanızın dışındaki ses parçasının bölümlerini duraklatabilmeleri veya atlayabilmeleri için oynatma kontrolleri sağlayın
Basitçe söyledi, basitçe yaptı
"Media Session API" uygulaması çok basittir ve yalnızca birkaç satır kod gerektirir.
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' }]
});
TypeScript kullanıyorsanız, NPM'de ilgili tür tanımlarını içeren bir paket de vardır.
Değişiklikler eklendikten sonra, ses parçasını Google Chrome gibi API desteği olan bir tarayıcıda çalarak uygulamanızı doğrulayabilirsiniz. Her şey doğru ayarlanmışsa, Chrome'daki medya penceresi artık uygulamanıza bağlı olarak sağlanan adları, albüm resimlerini ve kontrolleri gösterecektir.
Kapanış sözleri
"Media Session API", PWA'nıza yapılan çok basit bir eklentidir ve kullanıcılarınızın gelişmiş meta veriler ve kontrollerle şarkı veya video deneyimi yaşamasına olanak tanır. API şu anda deneysel olarak işaretlenmiştir, ancak çoğu modern tarayıcıyla zaten kullanılabilir.
