Pada September 2017, kami mengumumkan perubahan mendatang pada cara audio ditangani dengan kebijakan perilaku pemutaran otomatis di Chrome. Perubahan kebijakan dirilis dengan Chrome 66 Stabil pada Mei 2018.
Setelah menerima masukan dari komunitas pengembangan Web Audio, kami menunda rilis bagian Web Audio dari kebijakan putar otomatis untuk memberi developer lebih banyak waktu guna memperbarui situs mereka. Kami juga telah melakukan beberapa perubahan pada penerapan kebijakan untuk Audio Web yang akan mengurangi jumlah situs yang perlu menyesuaikan kodenya, terutama game web, sehingga memberikan pengalaman yang lebih baik bagi pengguna kami.
Perubahan kebijakan ini sekarang dijadwalkan untuk diluncurkan dengan Chrome 71 pada Desember 2018.
Apa yang sebenarnya dilakukan perubahan kebijakan ini?
Autoplay adalah nama yang diberikan untuk potongan konten yang langsung diputar saat halaman web dimuat. Untuk situs yang diharapkan dapat memutar otomatis kontennya, perubahan ini akan mencegah pemutaran secara default. Dalam sebagian besar kasus, pemutaran akan dilanjutkan, tetapi dalam kasus lain, penyesuaian kecil pada kode akan diperlukan. Secara khusus, developer harus menambahkan kode yang melanjutkan konten mereka jika pengguna berinteraksi dengan halaman web.
Namun, jika pengguna membuka halaman dengan konten putar otomatis dan mereka membuka halaman tersebut dari halaman dengan origin yang sama, konten tersebut tidak akan pernah diblokir. Baca postingan blog kami sebelumnya tentang kebijakan pemutaran otomatis untuk mengetahui contoh yang lebih mendetail.
Selain itu, kami menambahkan heuristik untuk mempelajari perilaku pengguna sebelumnya terkait 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 autoplay untuk situs tersebut.
Kami melakukannya dengan indeks yang disimpan secara lokal per profil Chrome di perangkat – indeks ini tidak disinkronkan di seluruh perangkat dan hanya dibagikan sebagai bagian dari statistik pengguna anonim. Kami menyebut indeks ini sebagai Indeks Engagement Media (MEI) dan Anda dapat melihatnya melalui chrome://media-engagement.
MEI melacak jumlah kunjungan ke situs yang menyertakan pemutaran audio 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 intent pengguna di masa mendatang.
Jika pengguna sering mengizinkan domain situs memutar audio selama lebih dari 7 detik, kami akan mengasumsikan bahwa pengguna mengharapkan situs ini memiliki hak untuk memutar audio secara otomatis di masa mendatang. Oleh karena itu, kami memberikan hak kepada situs tersebut untuk memutar audio secara otomatis 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 7 detik selama beberapa kunjungan – kami akan menghapus hak situs untuk putar otomatis.
Penggunaan elemen HTML media (video dan audio) dan Audio Web (objek AudioContext yang dibuat instance-nya oleh 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 bahwa kami sudah dapat mengantisipasi intent yang diinginkan pengguna terkait autoplay dan situs yang biasa mereka kunjungi.
Perlu diperhatikan bahwa iframe hanya dapat memperoleh hak untuk diputar otomatis tanpa interaksi pengguna jika halaman induk yang menyematkan iframe memperluas hak tersebut ke iframe yang diberikan.
Menunda perubahan untuk mendukung komunitas
Komunitas developer Web Audio – terutama bagian developer game web dan developer WebRTC dari komunitas ini – memperhatikan saat perubahan ini muncul di saluran Chrome Stabil.
Masukan dari komunitas adalah banyak game web dan pengalaman audio web akan terpengaruh secara negatif oleh perubahan ini – khususnya, banyak situs yang tidak diupdate tidak akan lagi memutar audio kepada pengguna. Oleh karena itu, tim kami memutuskan untuk menunda perubahan ini agar developer audio web memiliki lebih banyak waktu untuk mengupdate situs mereka.
Selain itu, kami meluangkan waktu ini untuk:
- Pertimbangkan dengan serius apakah perubahan kebijakan ini adalah tindakan terbaik atau tidak.
- Pelajari cara kami dapat membantu mengurangi jumlah situs dengan audio yang akan terpengaruh.
Untuk yang pertama, kami akhirnya memutuskan bahwa perubahan kebijakan memang diperlukan untuk meningkatkan pengalaman pengguna bagi sebagian besar pengguna kami. Detail selengkapnya tentang masalah yang diselesaikan oleh perubahan kebijakan ini dapat dibaca di bagian berikutnya dalam artikel ini.
Untuk yang terakhir, kami telah melakukan penyesuaian pada penerapan kami untuk Audio Web yang akan mengurangi jumlah situs yang awalnya terpengaruh. Dari situs yang kami ketahui rusak karena perubahan ini – yang sebagian besar diberikan sebagai contoh oleh komunitas pengembangan game web – penyesuaian ini berarti lebih dari 80% situs tersebut akan berfungsi secara otomatis. Analisis dan pengujian kami terhadap contoh situs ini dapat dilihat di sini. Penyesuaian baru ini dijelaskan secara lebih mendetail di bawah.
Kami juga melakukan perubahan untuk mendukung aplikasi WebRTC; saat ada sesi perekaman aktif, pemutaran otomatis akan diizinkan.
Masalah apa yang ingin diselesaikan dengan perubahan perilaku ini?
Browser secara historis kurang membantu pengguna mengelola suara. Saat pengguna membuka halaman web dan menerima suara yang tidak mereka harapkan atau inginkan, mereka akan mendapatkan pengalaman pengguna yang buruk. Pengalaman pengguna yang buruk ini adalah masalah yang kami coba pecahkan. Suara bising yang tidak diinginkan adalah alasan utama pengguna tidak ingin browser mereka memutar konten secara otomatis.
Namun, terkadang pengguna ingin konten diputar secara otomatis, dan sejumlah besar pemutaran otomatis yang diblokir di Chrome kemudian diputar oleh pengguna.
Oleh karena itu, kami yakin dengan belajar dari pengguna – dan mengantisipasi niat mereka berdasarkan situs – kami dapat menciptakan pengalaman pengguna terbaik. Jika pengguna cenderung membiarkan konten diputar dari situs, kami akan memutar otomatis konten dari situs tersebut pada masa mendatang. Sebaliknya, jika pengguna cenderung menghentikan konten yang diputar otomatis dari situs 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 sebaiknya hentikan pengalaman putar otomatis 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 secara aktif dengan konten tersebut. Jika tidak, pengguna mungkin akan melewatkan sebagian pengalaman audio.
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:
- AudioContext
- Dan AudioNodes, yang dilampirkan ke konteks
Developer audio web akan membuat AudioContext untuk memutar audio. Untuk melanjutkan audio setelah kebijakan putar otomatis otomatis menangguhkan AudioContext, pengguna harus 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. AudioNodes yang mengimplementasikan antarmuka AudioScheduledSourceNode biasanya disebut sebagai node sumber (seperti AudioBufferSourceNode, ConstantSourceNode, dan OscillatorNode). Node sumber menerapkan metode start().
Node sumber biasanya mewakili setiap cuplikan audio yang diputar game, misalnya: suara yang diputar saat pemain mengumpulkan koin atau musik latar belakang yang diputar di tahap saat ini. Developer game sangat mungkin memanggil fungsi start() pada node sumber setiap kali salah satu suara ini diperlukan untuk game.
Setelah mengenali pola umum ini dalam game web, kami memutuskan untuk menyesuaikan penerapan kami dengan hal berikut:
AudioContext akan dilanjutkan secara otomatis jika dua kondisi terpenuhi:
- Pengguna telah berinteraksi dengan halaman.
- Metode start() dari node sumber dipanggil.
Karena perubahan ini, sebagian besar game web kini akan melanjutkan audionya saat pengguna mulai memainkan game.
Memajukan web
Untuk memajukan platform web, terkadang perlu melakukan perubahan yang dapat merusak kompatibilitas. Sayangnya, pemutaran otomatis audio bersifat kompleks dan termasuk dalam kategori perubahan ini. Namun, melakukan pergeseran ini sangat penting untuk memastikan bahwa web tidak mengalami stagnasi atau kehilangan keunggulan inovatifnya.
Namun, kami menyadari bahwa menerapkan perbaikan untuk situs tidak selalu memungkinkan dalam jangka pendek karena berbagai alasan:
- Developer web mungkin berfokus pada project baru dan pemeliharaan situs lama tidak dapat dilakukan dengan segera.
- Portal game web mungkin tidak memiliki kontrol atas penerapan game dalam katalognya dan mengupdate ratusan, bahkan ribuan game dapat menghabiskan waktu dan biaya bagi penayang.
- Beberapa situs mungkin sudah sangat lama dan – karena satu dan lain hal – tidak lagi dikelola, tetapi masih dihosting untuk tujuan historis.
Berikut adalah cuplikan kode JavaScript singkat yang menangkap pembuatan objek AudioContext baru dan akan otomatis memicu fungsi lanjutan objek ini saat pengguna melakukan berbagai interaksi pengguna. Kode ini harus dieksekusi 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 AudioContext 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 ini, 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 karena perubahan ini. 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 Izinkan.
Bagaimana MEI dibuat untuk pengguna baru?
Seperti yang disebutkan sebelumnya, kami membuat MEI secara otomatis dari waktu ke waktu berdasarkan perilaku pengguna untuk mengantisipasi intent yang diinginkan terkait 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, daftar pra-benih berdasarkan skor MEI gabungan pengguna anonim digunakan untuk menentukan situs mana yang dapat diputar otomatis, bukan memblokir putar otomatis di mana saja. Data ini hanya menentukan status awal MEI saat pembuatan profil pengguna. Saat pengguna menjelajahi web dan berinteraksi dengan situs yang berisi konten putar otomatis, MEI pribadi mereka akan mengganti konfigurasi default.
Daftar situs yang telah diisi sebelumnya dibuat secara algoritmis, bukan diseleksi secara manual, dan situs apa pun memenuhi syarat untuk disertakan. Situs ditambahkan ke daftar jika cukup banyak pengguna yang mengunjungi situs tersebut yang mengizinkan pemutaran otomatis di situs tersebut. Batas ini berbasis persentase agar tidak menguntungkan situs yang lebih besar.
Menemukan keseimbangan
Kami telah memposting dokumentasi baru untuk memberikan lebih banyak insight tentang proses pengambilan keputusan dan alasan desain di balik kebijakan ini. Serta dokumentasi baru tentang cara kerja daftar situs yang telah diisi sebelumnya.
Kami selalu mengutamakan pengguna, tetapi kami juga tidak ingin mengecewakan komunitas pengembangan web. Terkadang, menjadi browser berarti kedua sasaran ini harus diseimbangkan dengan cermat. Kami yakin bahwa dengan penyesuaian kami pada penerapan kebijakan, dan waktu tambahan yang kami berikan kepada developer audio web untuk mengupdate kode mereka, kami akan mencapai keseimbangan ini dengan Chrome 71.