Audio Web, Kebijakan Putar Otomatis, dan Game

Tom Greenaway
Hongchan Choi

Pada September 2017, kami mengumumkan perubahan mendatang terkait cara penanganan audio dengan kebijakan perilaku putar otomatis di Chrome. Perubahan kebijakan ini dirilis di Chrome 66 Stabil pada Mei 2018.

Setelah mendapatkan masukan dari komunitas pengembangan Audio Web, kami menunda rilis bagian Audio Web dari kebijakan putar otomatis agar developer memiliki waktu tambahan untuk memperbarui situs mereka. Kami juga telah melakukan beberapa perubahan pada penerapan kebijakan untuk Audio Web yang akan mengurangi jumlah situs yang perlu menyesuaikan kode mereka – terutama game web – dan oleh karena itu memberikan pengalaman yang lebih baik bagi pengguna kami.

Perubahan kebijakan ini kini dijadwalkan untuk diluncurkan dengan Chrome 71 pada Desember 2018.

Apa sebenarnya yang dilakukan perubahan kebijakan?

Putar otomatis adalah nama yang diberikan pada bagian konten yang langsung diputar setelah halaman web dimuat. Untuk situs yang diharapkan dapat memutar otomatis kontennya, perubahan ini akan mencegah pemutaran secara default. Pada umumnya, pemutaran akan dilanjutkan, tetapi pada kasus lainnya, diperlukan penyesuaian kecil pada kode. Secara khusus, developer harus menambahkan kode yang melanjutkan kontennya jika pengguna berinteraksi dengan halaman web.

Namun, jika pengguna membuka halaman dengan konten yang diputar otomatis dan membuka halaman tersebut dari halaman dengan origin yang sama, konten tersebut tidak akan pernah diblokir. Baca postingan blog kami sebelumnya tentang kebijakan putar otomatis untuk contoh yang lebih mendetail.

Selain itu, kami menambahkan heuristik untuk belajar dari perilaku pengguna di masa lalu sehubungan dengan situs yang memutar audio secara otomatis. Kami mendeteksi saat pengguna secara rutin membiarkan audio diputar selama lebih dari 7 detik selama sebagian besar kunjungan mereka ke situs, dan mengaktifkan putar otomatis untuk situs tersebut.

Kami melakukannya dengan indeks yang disimpan secara lokal per profil Chrome di perangkat – indeks tidak disinkronkan di seluruh perangkat dan hanya dibagikan sebagai bagian dari statistik pengguna yang dianonimkan. Kami menyebut indeks ini sebagai Indeks Engagement Media (MEI) dan Anda dapat melihatnya melalui chrome://media-engagement.

MEI melacak jumlah kunjungan ke suatu situs yang mencakup pemutaran audio yang berdurasi lebih dari 7 detik. Berdasarkan MEI pengguna, kami yakin bahwa kami dapat memahami apakah pengguna mengharapkan audio dari situs tertentu atau tidak – dan mengantisipasi niat pengguna di masa mendatang.

Jika pengguna sering membiarkan domain situs memutar audio selama lebih dari 7 detik, ke depannya kami berasumsi bahwa pengguna mengharapkan situs ini memiliki hak untuk memutar audio secara otomatis. Oleh karena itu, kami memberikan hak kepada situs tersebut untuk memutar otomatis audio tanpa mengharuskan pengguna berinteraksi dengan tab dari domain tersebut.

Namun, hak ini tidak dijamin tanpa batas waktu. Jika perilaku pengguna berubah – misalnya menghentikan pemutaran audio atau menutup tab dalam batas waktu 7 detik selama beberapa kunjungan – kami akan menghapus hak situs untuk memutar otomatis.

Penggunaan elemen HTML media (video dan audio) dan Audio Web (objek AudioContext yang dibuat instance JavaScript) akan berkontribusi pada MEI. Sebagai persiapan untuk peluncuran kebijakan ini, perilaku pengguna terkait Audio Web akan mulai berkontribusi pada MEI mulai Chrome 70 dan seterusnya. Hal ini akan memastikan kami dapat mengantisipasi niat yang diinginkan pengguna terkait dengan putar otomatis dan situs yang biasanya mereka kunjungi.

Perlu diperhatikan bahwa iframe hanya dapat memperoleh hak untuk memutar otomatis tanpa interaksi pengguna jika halaman induk yang menyematkan iframe memperluas hak tersebut ke iframe yang ditentukan.

Menunda perubahan untuk mendukung komunitas

Komunitas developer Audio Web – khususnya developer game web dan bagian developer WebRTC dari komunitas ini – memperhatikan saat perubahan ini muncul di saluran Chrome Stabil.

Berdasarkan masukan dari komunitas, banyak game web dan pengalaman audio web akan terkena dampak negatif oleh perubahan ini – khususnya, banyak situs yang tidak diupdate tidak akan lagi memutar audio bagi pengguna. Oleh karena itu, tim kami memutuskan bahwa perubahan ini perlu ditunda untuk memberi developer audio web lebih banyak waktu untuk memperbarui situs mereka.

Selain itu, kami meluangkan waktu untuk:

  • Pertimbangkan dengan serius apakah perubahan kebijakan ini adalah tindakan terbaik atau bukan.
  • Pelajari cara kami dapat membantu mengurangi jumlah situs dengan audio yang akan terpengaruh.

Untuk yang pertama, kami pada akhirnya memutuskan bahwa perubahan kebijakan memang diperlukan untuk meningkatkan pengalaman pengguna bagi sebagian besar pengguna kami. Detail selengkapnya tentang masalah yang dapat diselesaikan oleh perubahan kebijakan dapat dibaca di bagian berikutnya dalam artikel ini.

Untuk yang terakhir, kami telah melakukan penyesuaian pada penerapan untuk Audio Web yang akan mengurangi jumlah situs yang awalnya terkena dampak. Situs yang kami ketahui rusak karena perubahan – banyak di antaranya diberikan sebagai contoh oleh komunitas pengembangan game web – penyesuaian ini berarti lebih dari 80% situs akan berfungsi secara otomatis. Analisis dan pengujian kami terhadap situs contoh ini dapat dilihat di sini. Penyesuaian baru ini dijelaskan secara lebih mendetail di bawah.

Kami juga melakukan perubahan untuk mendukung aplikasi WebRTC; meskipun ada sesi pengambilan gambar yang aktif, putar otomatis akan diizinkan.

Masalah apa yang ingin diselesaikan dengan perubahan perilaku ini?

Secara historis, browser memiliki kemampuan yang kurang baik dalam membantu pengguna mengelola suara. Saat pengguna membuka halaman web dan menerima suara yang tidak mereka harapkan atau inginkan, mereka mengalami pengalaman pengguna yang buruk. Pengalaman pengguna yang buruk ini adalah masalah yang sedang kita coba selesaikan. Kebisingan yang tidak diinginkan adalah alasan utama pengguna tidak ingin browser mereka memutar otomatis konten.

Namun, terkadang pengguna menginginkan konten diputar otomatis, dan sejumlah besar putar otomatis yang diblokir di Chrome kemudian diputar oleh pengguna.

Oleh karena itu, kami percaya dengan belajar dari pengguna – dan mengantisipasi niat mereka per situs – kami dapat menciptakan pengalaman pengguna yang terbaik. Jika pengguna cenderung mengizinkan konten diputar dari situs, kami akan otomatis memutar konten dari situs tersebut pada masa mendatang. Sebaliknya, jika pengguna cenderung menghentikan konten putar otomatis dari situs web tertentu, kami akan mencegah pemutaran otomatis untuk konten tersebut secara default.

Salah satu proposal yang diajukan oleh komunitas adalah membisukan audio tab, bukan menjeda putar otomatis. Namun, kami yakin akan lebih baik menghentikan pengalaman putar otomatis tersebut agar situs mengetahui bahwa putar otomatis diblokir, dan memungkinkan developer situs bereaksi terhadap hal ini. Misalnya, meskipun beberapa developer mungkin hanya ingin membisukan audio, developer lain mungkin lebih memilih konten audio mereka dijeda hingga pengguna berinteraksi dengan konten secara aktif – jika tidak, pengguna mungkin melewatkan bagian dari pengalaman audio tersebut.

Penyesuaian baru untuk membantu developer game web

Cara paling umum yang digunakan developer untuk menggunakan Web Audio API adalah dengan membuat dua jenis objek untuk memutar audio:

Developer audio web akan membuat AudioContext untuk memutar audio. Untuk melanjutkan audio setelah kebijakan putar otomatis menangguhkan AudioContext secara otomatis, pengguna perlu memanggil fungsi resume() pada objek ini setelah pengguna berinteraksi dengan tab:

    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');
      });
    });

Ada banyak antarmuka yang diwarisi dari AudioNode, salah satunya adalah antarmuka AudioScheduledSourceNode. AudioNode yang menerapkan antarmuka AudioScheduleSourceNode umumnya disebut sebagai node sumber (seperti AudioBufferSourceNode, ConstantSourceNode, dan OscillatorNode). Node sumber menerapkan metode start().

Node sumber biasanya merepresentasikan cuplikan audio individual yang diputar game, misalnya: suara yang diputar saat pemain mengumpulkan koin atau musik latar belakang yang diputar pada tahap saat ini. Developer game sangat mungkin memanggil fungsi start() pada node sumber setiap kali suara ini diperlukan untuk game.

Setelah kami mengenali pola umum ini di game web, kami memutuskan untuk menyesuaikan penerapan dengan hal berikut:

AudioContext akan otomatis dilanjutkan jika dua kondisi terpenuhi:

  • Pengguna telah berinteraksi dengan sebuah halaman.
  • Metode start() node sumber dipanggil.

Karena perubahan ini, sebagian besar game web kini akan melanjutkan audio saat pengguna mulai memainkan game.

memajukan web

Untuk memajukan platform web, terkadang perlu melakukan perubahan yang dapat merusak kompatibilitas. Sayangnya, pemutaran otomatis audio itu rumit dan termasuk dalam kategori perubahan ini. Namun, melakukan perubahan ini sangat penting untuk memastikan web tidak stagnan atau kehilangan keunggulan inovatifnya.

Meskipun demikian, kami menyadari bahwa menerapkan perbaikan untuk situs tidak selalu dapat dilakukan dalam jangka pendek karena berbagai alasan:

  • Pengembang web mungkin berfokus pada proyek baru dan pemeliharaan situs web lama tidak dapat dilakukan secara langsung.
  • Portal game web mungkin tidak memiliki kontrol atas implementasi game di katalog mereka dan memperbarui ratusan – bahkan ribuan – game bisa memakan waktu dan mahal bagi penerbit.
  • Beberapa situs web mungkin sudah sangat lawas dan – karena satu atau lain alasan – tidak lagi dikelola tetapi masih di-host untuk tujuan historis.

Berikut adalah cuplikan kode JavaScript singkat yang mencegat pembuatan objek AudioContext baru dan akan memicu fungsi lanjutkan objek ini secara otomatis saat pengguna melakukan berbagai interaksi pengguna. Kode ini harus dijalankan sebelum pembuatan objek AudioContext di halaman web Anda – misalnya, Anda dapat menambahkan kode ini ke tag halaman web Anda:

(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);
  });
})();

Perlu diperhatikan bahwa cuplikan kode ini tidak akan membantu melanjutkan proses AudioContexts yang dibuat instance-nya dalam iframe, kecuali jika cuplikan kode ini disertakan dalam cakupan konten iframe itu sendiri.

Melayani pengguna kami dengan lebih baik

Untuk menyertai perubahan kebijakan tersebut, kami juga memperkenalkan mekanisme bagi pengguna untuk menonaktifkan kebijakan putar otomatis guna mencakup kasus saat pembelajaran otomatis tidak berfungsi seperti yang diharapkan, atau untuk situs yang tidak dapat digunakan oleh perubahan tersebut. Perubahan ini akan diluncurkan dengan kebijakan baru di Chrome 71 dan dapat ditemukan di Setelan Suara; situs tempat pengguna ingin mengizinkan putar otomatis dapat ditambahkan ke Daftar yang diizinkan.

Bagaimana MEI dibuat untuk pengguna baru?

Seperti yang disebutkan sebelumnya, kami membuat MEI secara otomatis dari waktu ke waktu berdasarkan perilaku pengguna untuk mengantisipasi niat yang diinginkan sehubungan dengan situs tertentu dengan konten putar otomatis. Setiap situs memiliki skor antara nol dan satu dalam indeks ini. Skor yang lebih tinggi menunjukkan bahwa pengguna mengharapkan konten diputar dari situs tersebut.

Namun, untuk profil pengguna baru atau jika pengguna menghapus data penjelajahan mereka, daripada memblokir putar otomatis di mana saja, daftar pra-awal berdasarkan skor MEI gabungan pengguna anonim digunakan untuk menentukan situs mana yang dapat melakukan putar otomatis. Data ini hanya menentukan status awal MEI saat pembuatan profil pengguna. Saat pengguna menjelajahi web dan berinteraksi dengan situs web yang berisi konten putar otomatis, MEI pribadi mereka akan mengganti konfigurasi default.

Daftar situs pra-unggulan dibuat berdasarkan algoritma, bukan diseleksi secara manual, dan situs mana pun memenuhi syarat untuk disertakan. Situs ditambahkan ke daftar jika cukup banyak pengguna yang mengunjungi situs tersebut mengizinkan putar otomatis di situs tersebut. Ambang ini didasarkan pada persentase agar tidak mengutamakan situs yang lebih besar.

Menemukan keseimbangan

Kami telah memposting dokumentasi baru untuk memberikan lebih banyak insight tentang proses pengambilan keputusan dan alasan desain kami di balik kebijakan ini. Serta dokumentasi baru tentang cara kerja daftar situs pra-unggulan.

Kami selalu mengutamakan pengguna kami, namun kami juga tidak ingin mengecewakan komunitas pengembangan web. Terkadang, menjadi browser berarti kedua tujuan ini harus berimbang dengan cermat. Kami yakin bahwa dengan penyesuaian kami terhadap penerapan kebijakan, dan waktu tambahan yang kami berikan bagi developer audio web untuk memperbarui kode mereka, kami akan mencapai keseimbangan ini dengan Chrome 71.

Masukan