Web Audio, Otomatik Oynatma Politikası ve Oyunlar

Tom Greenaway
Hongchan Choi

Eylül 2017'de, Chrome'daki otomatik oynatma davranışı politikası kapsamında seslerin işlenmesiyle ilgili bir değişiklik yapacağımızı duyurmuştuk. Politika değişikliği, Mayıs 2018'de Chrome 66 kararlı sürümüyle kullanıma sunuldu.

Web Audio geliştirme topluluğundan gelen geri bildirimler doğrultusunda, geliştiricilerin web sitelerini güncellemeleri için daha fazla zaman tanımak amacıyla otomatik oynatma politikasının Web Audio bölümünün yayınlanmasını erteledik. Ayrıca, Web Audio politikasının uygulanmasında bazı değişiklikler yaptık. Bu değişiklikler, özellikle web oyunları olmak üzere kodlarını düzenlemesi gereken web sitelerinin sayısını azaltacak ve böylece kullanıcılarımıza daha iyi bir deneyim sunacaktır.

Bu politika değişikliğinin Aralık 2018'de Chrome 71 ile kullanıma sunulması planlanmaktadır.

Politika değişikliği tam olarak neyi değiştiriyor?

Otomatik oynatma, bir web sayfası yüklendiğinde hemen oynatılan bir içeriğe verilen addır. İçeriklerini otomatik oynatabilecekleri beklenen web sitelerinde bu değişiklik, oynatmayı varsayılan olarak engelleyecektir. Çoğu durumda oynatma devam eder ancak bazı durumlarda kodda küçük bir ayarlama yapılması gerekir. Daha açık belirtmek gerekirse, geliştiriciler kullanıcı web sayfasıyla etkileşim kurduğunda içeriklerini devam ettiren kod eklemelidir.

Ancak kullanıcı, otomatik oynatma içeriği içeren bir sayfaya aynı kaynaktaki bir sayfadan giderse bu içerik hiçbir zaman engellenmez. Daha ayrıntılı örnekler için otomatik oynatma politikasıyla ilgili önceki blog yayınımızı okuyun.

Ayrıca, sesleri otomatik olarak oynatan web siteleriyle ilgili olarak kullanıcıların geçmiş davranışlarından bilgi edinmek için bir sezgisel kural ekledik. Kullanıcıların bir web sitesine yaptıkları ziyaretlerin çoğunda sesin 7 saniyeden uzun süre oynatılmasına izin verdiğini tespit ettiğimizde söz konusu web sitesi için otomatik oynatma özelliğini etkinleştiririz.

Bunu, cihazdaki her Chrome profili için yerel olarak depolanan bir dizinle yaparız. Bu dizin cihazlar arasında senkronize edilmez ve yalnızca anonimleştirilmiş kullanıcı istatistikleri kapsamında paylaşılır. Bu dizin, Medya Etkileşimi Dizini (MEI) olarak adlandırılır ve chrome://media-engagement adresinden görüntülenebilir.

MEI, bir siteye yapılan ziyaretlerden kaç tanesinin 7 saniyeden uzun ses oynatımı içerdiğini izler. Kullanıcının MEI'sine göre, kullanıcının belirli bir web sitesinden ses bekleyip beklemediğini anlayabileceğimizi ve gelecekteki niyetini tahmin edebileceğimizi düşünüyoruz.

Kullanıcı, bir web sitesinin alanının 7 saniyeden uzun süre ses çalmasına sık sık izin veriyorsa gelecekte bu web sitesinin sesi otomatik olarak çalma hakkına sahip olmasını beklediğini varsayıyoruz. Bu nedenle, söz konusu web sitesine, kullanıcının ilgili alandaki bir sekmeyle etkileşim kurmasını gerektirmeden sesi otomatik oynatma hakkı tanırız.

Ancak bu hak süresiz olarak garanti edilmez. Kullanıcının davranışı değişirse (ör. birkaç ziyaret boyunca ses oynatmayı durdurma veya sekmeyi 7 saniyelik eşik içinde kapatma) web sitesinin otomatik oynatma hakkı kaldırılır.

Hem medya HTML öğelerinin (video ve ses) hem de Web Audio'nun (JavaScript tarafından oluşturulan AudioContext nesneleri) kullanımı MEI'ye katkıda bulunur. Bu politikanın kullanıma sunulmasına hazırlanırken, Web Audio ile ilgili kullanıcı davranışları Chrome 70 ve sonraki sürümlerde MEI'ye katkıda bulunmaya başlayacak. Bu sayede, kullanıcının otomatik oynatma ve sık ziyaret ettiği web siteleriyle ilgili niyetlerini önceden tahmin edebiliriz.

Iframe'lerin, kullanıcı etkileşimi olmadan otomatik oynatma hakkını yalnızca iframe'i yerleştiren üst web sayfası bu hakkı ilgili iframe'e genişletirse kazanabileceğini unutmayın.

Topluluğu desteklemek için değişikliği erteleme

Web Audio geliştirici topluluğu (özellikle de bu topluluğun web oyunu geliştirici ve WebRTC geliştirici bölümleri) bu değişikliğin Chrome kararlı kanalında göründüğünü fark etti.

Topluluktan gelen geri bildirimlere göre, birçok web oyunu ve web ses deneyimi bu değişiklikten olumsuz yönde etkilenecekti. Özellikle, güncellenmemiş birçok sitede artık kullanıcılara ses oynatılmayacaktı. Sonuç olarak ekibimiz, web ses geliştiricilerine web sitelerini güncellemek için daha fazla zaman tanımak amacıyla bu değişikliği ertelemenin faydalı olacağına karar verdi.

Ayrıca bu süre zarfında şunları yaptık:

  • Bu politika değişikliğinin en iyi seçenek olup olmadığını ciddi şekilde değerlendirin.
  • Etkilenecek ses içeren web sitelerinin sayısını azaltmamıza yardımcı olabilecek yolları keşfedin.

İlk olarak, politika değişikliğinin kullanıcılarımızın büyük bir kısmının kullanıcı deneyimini iyileştirmek için gerçekten gerekli olduğuna karar verdik. Politika değişikliğinin hangi sorunu çözdüğüyle ilgili daha fazla bilgiyi bu makalenin sonraki bölümünde bulabilirsiniz.

İkincisi için, Web Audio uygulamamızda, başlangıçta etkilenen web sitelerinin sayısını azaltacak bir düzenleme yaptık. Değişiklik nedeniyle çalışmadığını bildiğimiz sitelerin (çoğu web oyunu geliştirme topluluğu tarafından örnek olarak sağlanan) %80'den fazlası bu düzenlemeden sonra otomatik olarak çalışmaya başladı. Bu örnek sitelerle ilgili analiz ve testlerimizi buradan görüntüleyebilirsiniz. Bu yeni ayarlama aşağıda daha ayrıntılı olarak açıklanmıştır.

WebRTC uygulamalarını desteklemek için de bir değişiklik yaptık. Etkin bir yakalama oturumu varken otomatik oynatmaya izin verilecek.

Bu davranış değişikliğinin amacı nedir?

Tarayıcılar, kullanıcıların sesi yönetmesine yardımcı olma konusunda geçmişte pek başarılı olamadı. Kullanıcılar bir web sayfasını açtıklarında beklemedikleri veya istemedikleri bir ses alırlarsa kötü bir kullanıcı deneyimi yaşarlar. Bu kötü kullanıcı deneyimini çözmeye çalışıyoruz. Kullanıcıların tarayıcılarında içeriğin otomatik olarak oynatılmasını istememesinin birincil nedeni, istenmeyen gürültüdür.

Ancak bazen kullanıcılar içeriğin otomatik olarak oynatılmasını ister ve Chrome'da engellenen otomatik oynatma işlemlerinin önemli bir kısmı daha sonra kullanıcı tarafından oynatılır.

Bu nedenle, kullanıcılardan bilgi edinerek ve web sitesi bazında niyetlerini öngörerek en iyi kullanıcı deneyimini sunabileceğimizi düşünüyoruz. Kullanıcılar bir web sitesinden içerik oynatmaya izin veriyorsa gelecekte bu sitedeki içerikler otomatik olarak oynatılır. Buna karşılık, kullanıcılar belirli bir web sitesinden gelen içeriğin otomatik oynatılmasını durdurma eğilimindeyse bu içeriğin otomatik oynatılmasını varsayılan olarak engelleriz.

Topluluk tarafından önerilen bir çözüm, otomatik oynatmayı duraklatma yerine sekmenin sesini kapatmaktır. Ancak web sitesinin otomatik oynatmanın engellendiğinin farkında olması ve web sitesi geliştiricisinin buna tepki vermesi için otomatik oynatma deneyimini durdurmanın daha iyi olduğuna inanıyoruz. Örneğin, bazı geliştiriciler sesi yalnızca kapatmak isterken diğer geliştiriciler, kullanıcı içerikle aktif olarak etkileşime geçene kadar ses içeriğinin duraklatılmasını tercih edebilir. Aksi takdirde kullanıcı, ses deneyiminin bir kısmını kaçırabilir.

Web oyunu geliştiricilerine yardımcı olacak yeni düzenlemeler

Geliştiricilerin Web Audio API'yi kullanmanın en yaygın yolu, ses çalmak için iki tür nesne oluşturmaktır:

Web ses geliştiricileri, ses oynatmak için bir AudioContext oluşturur. Otomatik oynatma politikası, AudioContext'i otomatik olarak askıya aldıktan sonra seslerini devam ettirmek için kullanıcı sekmeyle etkileşime geçtikten sonra bu nesnede resume() işlevini çağırmaları gerekir:

    const context = new AudioContext();

    // Setup an audio graph with AudioNodes and schedule playback.
    ...

    // Resume AudioContext playback when user clicks a button on the page.
    document.querySelector('button').addEventListener('click', function() {
      context.resume().then(() => {
        console.log('AudioContext playback resumed successfully');
      });
    });

AudioNode'dan devralınan birçok arayüz vardır. Bunlardan biri AudioScheduledSourceNode arayüzüdür. AudioScheduledSourceNode arayüzünü uygulayan AudioNode'lar genellikle kaynak düğümler (ör. AudioBufferSourceNode, ConstantSourceNode ve OscillatorNode) olarak adlandırılır. Kaynak düğümler bir start() yöntemi uygular.

Kaynak düğümleri genellikle oyunlarda çalınan ses snippet'lerini temsil eder. Örneğin: Bir oyuncu para toplarken çalınan ses veya mevcut aşamada çalan arka plan müziği. Oyun geliştiricilerinin, oyun için bu seslerden herhangi biri gerektiğinde kaynak düğümlerde start() işlevini çağırma olasılığı yüksektir.

Web oyunlarında bu yaygın kalıbı fark ettikten sonra uygulamamızı aşağıdaki şekilde ayarlamaya karar verdik:

AudioContext, iki koşul karşılandığında otomatik olarak devam ettirilir:

  • Kullanıcı bir sayfayla etkileşime geçti.
  • Bir kaynak düğümünün start() yöntemi çağrılır.

Bu değişiklik nedeniyle, çoğu web oyununda ses artık kullanıcı oyun oynamaya başladığında devam eder.

Web'i ileri taşıma

Web platformunu ileriye taşımak için bazen uyumluluğu bozabilecek değişiklikler yapılması gerekir. Maalesef seslerin otomatik oynatılması karmaşık bir konudur ve bu değişiklik kategorisine girer. Ancak web'in durgunlaşmaması veya yenilikçi avantajını kaybetmemesi için bu geçişin yapılması kritik önem taşıyor.

Bununla birlikte, web sitelerinde düzeltmelerin uygulanmasının çeşitli nedenlerden dolayı kısa vadede her zaman mümkün olmadığını biliyoruz:

  • Web geliştiricileri yeni bir projeye odaklanmış olabilir ve eski bir web sitesinin bakımı hemen yapılamaz.
  • Web oyun portalları, kataloglarındaki oyunların uygulanması üzerinde kontrol sahibi olmayabilir. Ayrıca, yüzlerce hatta binlerce oyunu güncellemek yayıncılar için zaman alıcı ve pahalı olabilir.
  • Bazı web siteleri çok eski olabilir ve bir nedenden dolayı artık bakımı yapılmasa da tarihi nedenlerle barındırılmaya devam ediyor olabilir.

Aşağıda, yeni AudioContext nesnelerinin oluşturulmasını engelleyen ve kullanıcı çeşitli kullanıcı etkileşimleri gerçekleştirdiğinde bu nesnelerin devam işlevini otomatik olarak tetikleyen kısa bir JavaScript kod snippet'i verilmiştir. Bu kod, web sayfanızda herhangi bir AudioContext nesnesi oluşturulmadan önce yürütülmelidir. Örneğin, bu kodu web sayfanızı oluşturan etiketine ekleyebilirsiniz:

(function () {
  // An array of all contexts to resume on the page
  const audioContextList = [];

  // An array of various user interaction events we should listen for
  const userInputEventNames = [
    'click',
    'contextmenu',
    'auxclick',
    'dblclick',
    'mousedown',
    'mouseup',
    'pointerup',
    'touchend',
    'keydown',
    'keyup',
  ];

  // A proxy object to intercept AudioContexts and
  // add them to the array for tracking and resuming later
  self.AudioContext = new Proxy(self.AudioContext, {
    construct(target, args) {
      const result = new target(...args);
      audioContextList.push(result);
      return result;
    },
  });

  // To resume all AudioContexts being tracked
  function resumeAllContexts(event) {
    let count = 0;

    audioContextList.forEach(context => {
      if (context.state !== 'running') {
        context.resume();
      } else {
        count++;
      }
    });

    // If all the AudioContexts have now resumed then we
    // unbind all the event listeners from the page to prevent
    // unnecessary resume attempts
    if (count == audioContextList.length) {
      userInputEventNames.forEach(eventName => {
        document.removeEventListener(eventName, resumeAllContexts);
      });
    }
  }

  // We bind the resume function for each user interaction
  // event on the page
  userInputEventNames.forEach(eventName => {
    document.addEventListener(eventName, resumeAllContexts);
  });
})();

Bu kod snippet'i, iframe'ın içeriğinin kapsamına dahil edilmediği sürece, iframe içinde oluşturulan AudioContext'lerin devam ettirilmesine yardımcı olmaz.

Kullanıcılarımıza daha iyi hizmet sunma

Politika değişikliğiyle birlikte, otomatik öğrenmenin beklendiği gibi çalışmadığı veya değişiklik nedeniyle kullanılamaz hale gelen web siteleri için kullanıcıların otomatik oynatma politikasını devre dışı bırakabileceği bir mekanizma da sunuyoruz. Bu değişiklik, Chrome 71'de yeni politikayla birlikte kullanıma sunulacaktır ve Ses Ayarları'nda bulunabilir. Kullanıcının otomatik oynatmaya izin vermek istediği siteler İzin ver listesine eklenebilir.

MEI, yeni kullanıcılar için nasıl oluşturulur?

Daha önce de belirtildiği gibi, otomatik oynatma içeriği olan belirli bir web sitesiyle ilgili olarak kullanıcının arzuladığı amacı tahmin etmek için MEI'yi zaman içinde kullanıcının davranışına göre otomatik olarak oluştururuz. Her web sitesinin bu dizinde sıfır ile bir arasında bir puanı vardır. Yüksek puanlar, kullanıcının içeriğin o web sitesinden oynatılmasını beklediğini gösterir.

Ancak yeni kullanıcı profilleri için veya kullanıcı tarama verilerini temizlediğinde, otomatik oynatma her yerde engellenmez. Hangi web sitelerinin otomatik oynatılabileceğini belirlemek için anonimleştirilmiş kullanıcı toplu MEI puanlarına dayalı bir ön ekim listesi kullanılır. Bu veriler yalnızca kullanıcı profili oluşturulurken MEI'nin ilk durumunu belirler. Kullanıcı web'de gezinirken ve otomatik oynatma içeren web siteleriyle etkileşim kurarken kişisel MEI'si varsayılan yapılandırmayı geçersiz kılar.

Önceden eklenen site listesi, manuel olarak seçilmek yerine algoritmik olarak oluşturulur ve tüm web siteleri listeye dahil edilebilir. Siteyi ziyaret eden yeterli sayıda kullanıcı, sitede otomatik oynatmaya izin veriyorsa siteler listeye eklenir. Bu eşik, daha büyük sitelerin tercih edilmemesi için yüzdelik bir değere sahiptir.

Dengeyi bulma

Bu politikanın karar verme sürecimiz ve tasarım gerekçemiz hakkında daha fazla bilgi vermek için yeni dokümanlar yayınladık. Ayrıca, önceden eklenen site listesinin işleyiş şekli hakkında yeni dokümanlar da yayınladık.

Her zaman kullanıcılarımızı ön planda tutuyoruz ancak web geliştirme topluluğunu da hayal kırıklığına uğratmak istemiyoruz. Tarayıcı olmak bazen bu iki hedefin dikkatlice dengelenmesi gerektiği anlamına gelir. Politikanın uygulanmasında yaptığımız düzenlemeler ve web ses geliştiricilerinin kodlarını güncellemeleri için verdiğimiz ek süreyle, Chrome 71'de bu dengeyi sağlayacağımıza inanıyoruz.

Geri bildirim