Web Audio, Otomatik Oynatma Politikası ve Oyunlar

Tom Greenaway
Hongchan Choi

Eylül 2017'de Chrome'daki otomatik oynatma davranışı politikasıyla sesin işlenme biçiminde yapılacak bir değişikliği duyurmuştuk. Politika değişikliği, Mayıs 2018'de Chrome 66'nın Mevcut Ürün sürümünde kullanıma sunuldu.

Web Audio geliştirme topluluğundan gelen geri bildirimlerden sonra, geliştiricilere web sitelerini güncellemeleri için daha fazla zaman tanımak amacıyla otomatik oynatma politikasının Web Sesi bölümünün yayınlanmasını erteledik. Web Sesi politikasının uygulanmasında da bazı değişiklikler yaptık. Bu değişiklikler, kodlarını düzenlemesi gereken web sitelerinin (özellikle web oyunlarının) 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'de kullanıma sunulması planlanmıştır.

Bu politika değişikliği tam olarak ne işe yarıyor?

Otomatik oynatma, bir web sayfası yüklendiğinde hemen oynatılan içerik parçasına verilen addır. Bu değişiklik, içeriklerini otomatik oynatabilmesi beklenen web siteleri için varsayılan olarak oynatmayı engelleyecektir. Çoğu durumda, oynatma devam ettirilir, ancak diğerlerinde kodda küçük bir düzenleme yapılması gerekir. Özellikle, geliştiriciler, kullanıcı web sayfasıyla etkileşimde bulunursa içeriklerini devam ettirecek bir kod eklemelidir.

Ancak kullanıcı otomatik oynatılan içerik bulunan bir sayfaya gelirse ve bu sayfaya aynı kaynaklı bir sayfadan gelmişse 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.

Buna ek olarak, kullanıcıların otomatik ses çalan web siteleriyle ilgili geçmiş davranışlarından bilgi edinmek için bulgusal bir yöntem ekledik. Kullanıcıların, bir web sitesini ziyaretlerinin çoğunda düzenli olarak sesin 7 saniyeden uzun sürmesine izin verdiği durumları tespit ederiz ve bu web sitesi için otomatik oynatmayı etkinleştiririz.

Bunu, bir cihazdaki Chrome profiline göre yerel olarak depolanan bir dizinle yaparız. Bu dizin, cihazlar arasında senkronize edilmez ve yalnızca anonimleştirilmiş kullanıcı istatistiklerinin bir parçası olarak paylaşılır. Bu dizini Medya Etkileşim Endeksi (MEI) olarak adlandırıyoruz ve chrome://media-engagement sayfasında görüntüleyebilirsiniz.

MEI, bir siteye yapılan ziyaretlerden kaçının 7 saniyeden uzun süren ses çalma içerdiğini izler. Bir kullanıcının MEI'sine dayanarak, bir kullanıcının belirli bir web sitesinden ses bekleyip beklemediğini anlayabileceğimize ve gelecekteki niyetini tahmin edebileceğimize inanırız.

Kullanıcı, bir web sitesinin alan adının genellikle 7 saniyeden uzun bir süre ses çalmasına izin verirse ileride kullanıcının bu web sitesinde sesi otomatik olarak çalma hakkına sahip olmasını beklediğini varsayarız. Bu nedenle, söz konusu web sitesine, kullanıcının söz konusu alandaki bir sekmeyle etkileşimde bulunmasına gerek kalmadan sesi otomatik olarak oynatma hakkı tanıyoruz.

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

Hem medya HTML öğelerinin (video ve ses) hem de Web Sesi (JavaScript somutluğuyla oluşturulan AudioBağlam nesneleri) kullanımı MEI'ye katkıda bulunur. Web Audio ile ilgili bu politikanın kullanıma sunulmasına hazırlık olarak, Chrome 70 ve sonraki sürümlerde MEI'ye katkıda bulunmaya başlanacaktır. Bu sayede, otomatik oynatma ve sıklıkla ziyaret ettikleri web siteleri konusunda kullanıcının ne amaçladığını önceden tahmin edebiliyoruz.

iframe'lerin, kullanıcı etkileşimi olmadan otomatik oynatma hakkı kazanabilmesi için iframe'i yerleştiren üst web sayfasının söz konusu iframe'e genişlemesi gerektiğini unutmayın.

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

Bu değişiklik Chrome'un Kararlı kanalında göründüğünde Web Audio geliştirici topluluğu (özellikle de bu topluluğun web oyun geliştiricisi ve WebRTC geliştirici kısmı) tarafından fark edildi.

Topluluktan alınan geri bildirimler, birçok web oyununun ve web ses deneyiminin bu değişiklikten olumsuz etkileneceği yönündeydi. Özellikle, güncellenmeyen birçok site artık kullanıcılara ses çalmayacaktı. Sonuç olarak ekibimiz, web ses içerik geliştiricilerine web sitelerini güncellemeleri için daha fazla zaman tanımak amacıyla bu değişikliği ertelemenin yararlı olduğuna karar verdi.

Ayrıca bu etkinlikte şunları da yaptık:

  • Bu politika değişikliğinin atılacak en doğru hareket olup olmadığını mutlaka değerlendirin.
  • Bu durumdan etkilenecek ses içeren web sitelerinin sayısını azaltmaya yardımcı olabileceğimiz yolları keşfedin.

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

Bu durumdan etkilenen web sitelerinin sayısını azaltacak şekilde Web Audio uygulamamızda bir ayarlama yaptık. Değişimden dolayı bozulduğunu bildiğimiz sitelerin (çoğu web oyunu geliştirme topluluğu tarafından örnek olarak sunulmuştur) bu yeni düzenleme, sitelerin% 80'inden fazlasının otomatik olarak çalışacağı anlamına geliyordu. Bu örnek sitelere ilişkin analizlerimiz ve testlerimiz burada görüntülenebilir. Bu yeni ayarlama aşağıda daha ayrıntılı olarak açıklanmaktadır.

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

Çözülmeyi amaçlayan bu davranış değişikliğinin amacı nedir?

Tarayıcılar, eskiden beri kullanıcıların sesi yönetmesine yardımcı olma konusunda yetersiz kaldı. Kullanıcılar bir web sayfasını açıp beklemedikleri veya istemedikleri bir ses duyduğunda kötü bir kullanıcı deneyimi yaşarlar. Bu kötü kullanıcı deneyimi, çözmeye çalıştığımız sorundur. İstenmeyen gürültü, kullanıcıların tarayıcılarının içeriği otomatik olarak oynatmasını istememesinin birincil nedenidir.

Bununla birlikte, kullanıcılar bazen içeriğin otomatik olarak oynatılmasını isterler ve bunun ardından kullanıcı, Chrome'da önemli sayıda engellenmiş otomatik oynatmayı oynatır.

Dolayısıyla, kullanıcıdan bir şeyler öğrenerek ve her web sitesi için niyetini tahmin ederek en iyi kullanıcı deneyimini oluşturabileceğimize inanıyoruz. Kullanıcılar içeriğin bir web sitesinden oynatılmasını tercih ederse ileride bu sitedeki içeriği otomatik olarak oynatırız. Bunun aksine, kullanıcılar belirli bir web sitesindeki otomatik oynatmayı durdurma eğilimindeyse bu içerik için otomatik oynatmayı varsayılan olarak engelleriz.

Topluluk tarafından sunulan bir teklif, otomatik oynatmayı duraklatmak yerine sekme sesinin kapatılmasını sağlamaktı. Bununla birlikte, web sitesinin otomatik oynatmanın engellendiğini bilmesi ve web sitesi geliştiricisinin bu duruma tepki vermesine olanak tanımak için otomatik oynatma deneyimini durdurmanın daha iyi olduğuna inanıyoruz. Örneğin, bazı geliştiriciler sadece sesi kapatmak isterken diğer geliştiriciler, kullanıcı içerikle aktif olarak etkileşim kurana 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'sını en yaygın şekilde kullanma şekli, ses çalmak için iki tür nesne oluşturmaktır:

Web ses geliştiricileri, ses çalmak için bir AudioContext oluşturur. Otomatik oynatma politikası AudioContext'in otomatik olarak askıya alınmasının ardından sesin devam ettirilmesi için, kullanıcı sekmeyle etkileşimde bulunduktan sonra bu nesnede subject() işlevini çağırması 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 devralan birçok arayüz vardır. Aralarından biri AudioScheduledSourceNode arayüzüdür. AudioScheduleSourceNode arayüzünü uygulayan AudioNode'lar, genellikle kaynak düğümler (AudioBufferSourceNode, ConstantSourceNode ve OscillatorNode gibi) olarak adlandırılır. Kaynak düğümler bir start() yöntemi uygular.

Kaynak düğümleri genellikle oyunların çaldığı bağımsız ses snippet'lerini temsil eder. Örneğin, bir oyuncu para topladığında çalınan ses veya mevcut sahnede çalan arka plan müziği. Oyun geliştiricileri, oyun için bu seslerden herhangi biri gerekli olduğunda kaynak düğümlerde start() işlevini çağırabilirler.

Web oyunlarındaki bu yaygın kalıbı fark ettikten sonra uygulamamızı aşağıdakilere göre düzenlemeye karar verdik:

İki koşul karşılandığında AudioContext otomatik olarak devam ettirilir:

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

Bu değişiklik nedeniyle, kullanıcı oyunu oynamaya başladığında çoğu web oyununda ses kaydı devam ettirilecektir.

Web'i ileriye taşıma

Web platformunu ileriye taşımak için bazen uyumluluğu bozabilecek değişiklikler yapmak gerekebilir. Maalesef ses otomatik oynatma karmaşık bir süreçtir ve bu değişiklik kategorisine girer. Ancak bu geçişin yapılması, web'in durağanlaşmasını veya yenilikçiliğini kaybetmemesini sağlamak açısından çok önemlidir.

Bununla birlikte, çeşitli nedenlerle web sitelerinde düzeltme uygulamanın kısa vadede her zaman uygun olmadığının da farkındayız:

  • Web geliştiricileri yeni bir projeye odaklanmış olabilir ve eski bir web sitesinin bakımını yapmak hemen mümkün değildir.
  • Web oyunu portalları, kendi kataloglarındaki oyunların uygulanması üzerinde kontrol sahibi olmayabilir ve yüzlerce (binlerce olmasa da) oyunun güncellenmesi yayıncılar için zaman alıcı ve pahalı olabilir.
  • Bazı web siteleri çok eski olabilir ve bir nedenle artık barındırılmamakta ancak tarihsel amaçlarla barındırılmaya devam etmektedir.

Burada, yeni AudioContext nesnelerinin oluşturulmasını engelleyen ve kullanıcı çeşitli kullanıcı etkileşimleri gerçekleştirdiğinde bu nesnelerin devam ettirme 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ın 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'in kendi içeriğinin kapsamına dahil edilmediği sürece, bir iFrame içinde örneklenen AudioContext'lerin devam ettirilmesine bu kod snippet'inin yardımcı olmayacağına dikkat edilmelidir.

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

Politika değişikliğiyle birlikte, kullanıcıların otomatik öğrenme politikasını devre dışı bırakabilecekleri veya otomatik öğrenmenin beklendiği gibi çalışmadığı durumları veya değişiklikle kullanılamaz hale gelen web sitelerini de kapsayacak bir mekanizma kullanıma sunuyoruz. Bu değişiklik, Chrome 71'de yeni politika ile kullanıma sunulacak olup Ses Ayarları'nda bulunabilir. Kullanıcının otomatik oynatmaya izin vermek istediği siteler, İzin verilenler listesine eklenebilir.

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

Daha önce de belirtildiği gibi, otomatik oynatılan içerik barındıran belirli bir web sitesinde kullanıcının istediği niyeti 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 söz konusu web sitesinden içerik oynatılmasını beklediğini gösterir.

Bununla birlikte, yeni kullanıcı profilleri söz konusu olduğunda veya kullanıcı tarama verilerini temizlerse otomatik oynatmayı her yerde engellemek yerine hangi web sitelerinin otomatik oynatılabileceğini belirlemek için kullanıcılardan anonimleştirilmiş toplu MEI puanlarını temel alan bir ön başlangıç listesi kullanılır. Bu veriler yalnızca kullanıcı profilinin oluşturulması sırasındaki MEI'nin başlangıç durumunu belirler. Kullanıcı web'e göz atarken ve otomatik oynatılan içerik barındıran web siteleriyle etkileşimde bulunurken kişisel MEI'leri varsayılan yapılandırmayı geçersiz kılar.

Önceden başlatılmış site listesi manuel olarak seçilmek yerine algoritmik olarak oluşturulur ve tüm web siteleri dahil edilmeye uygundur. Siteyi ziyaret eden yeterli sayıda kullanıcı söz konusu sitede otomatik oynatmaya izin veriyorsa siteler listeye eklenir. Bu eşik, daha büyük sitelere öncelik vermemek için yüzdeye dayalıdır.

Bakiye bulunuyor

Karar verme sürecimiz ve bu politikanın tasarım gerekçesi hakkında daha fazla bilgi sağlamak için yeni dokümanlar yayınladık. Ayrıca, önceden hazırlanmış site listesinin işleyiş şekliyle ilgili yeni dokümanlar da sunulur.

Kullanıcılarımıza her zaman öncelik veriyoruz ancak web geliştirme topluluğunu yarı yolda bırakmak istemeyiz. Bazen bir tarayıcı olmak, bu iki hedefin dikkatli bir şekilde 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 ayırdığımız ek süre sayesinde, Chrome 71'de bu dengeyi yakalayacağımıza inanıyoruz.

Geri bildirim