Web Audio, นโยบายการเล่นอัตโนมัติ และเกม

ทอม กรีนอเวย์
ฮงจัน ชอย

เมื่อเดือนกันยายน 2017 เราได้ประกาศการเปลี่ยนแปลงที่กำลังจะเกิดขึ้นกับวิธีจัดการเสียงด้วยนโยบายลักษณะการเล่นอัตโนมัติใน Chrome นโยบายนี้เปิดตัวกับ Chrome 66 Stable ในเดือนพฤษภาคม 2018

หลังจากความคิดเห็นจากชุมชนการพัฒนา Web Audio เราได้เลื่อนการเปิดตัวนโยบายการเล่นอัตโนมัติบางส่วนออกไป เพื่อให้นักพัฒนาซอฟต์แวร์มีเวลามากขึ้นในการอัปเดตเว็บไซต์ของตน นอกจากนี้ เรายังทำการเปลี่ยนแปลงการนำนโยบายสำหรับ Web Audio ไปใช้ ซึ่งจะลดจำนวนเว็บไซต์ที่ต้องปรับโค้ด โดยเฉพาะเกมบนเว็บ เพื่อมอบประสบการณ์การใช้งานที่ดีขึ้นสำหรับผู้ใช้ของเรา

ในตอนนี้ การเปลี่ยนแปลงนโยบายนี้ได้กำหนดเวลาที่จะเปิดตัวกับ Chrome 71 ในเดือนธันวาคม 2018 แล้ว

การเปลี่ยนแปลงนโยบายมีผลอย่างไร

การเล่นอัตโนมัติคือชื่อที่ตั้งให้กับเนื้อหาซึ่งเล่นทันทีเมื่อโหลดหน้าเว็บ สำหรับเว็บไซต์ที่คาดว่าจะเล่นเนื้อหาโดยอัตโนมัติได้ การเปลี่ยนแปลงนี้จะป้องกันการเล่นโดยค่าเริ่มต้น ในกรณีส่วนใหญ่ การเล่นจะกลับมาทำงานอีกครั้ง แต่ในบางกรณีจะต้องมีการปรับเปลี่ยนโค้ดเล็กน้อย กล่าวอย่างเจาะจงคือ นักพัฒนาซอฟต์แวร์ต้องเพิ่มโค้ดซึ่งจะทำให้เนื้อหากลับมาทำงานอีกครั้งหากผู้ใช้โต้ตอบกับหน้าเว็บ

อย่างไรก็ตาม หากผู้ใช้เข้ามาที่หน้าเว็บที่มีเนื้อหาที่เล่นอัตโนมัติ และผู้ใช้ไปยังหน้านั้นจากหน้าที่มาจากต้นทางเดียวกัน เนื้อหานั้นจะไม่ถูกบล็อก อ่านบล็อกโพสต์ก่อนหน้านี้ของเราเกี่ยวกับนโยบายการเล่นอัตโนมัติเพื่อดูตัวอย่างโดยละเอียดเพิ่มเติม

นอกจากนี้ เรายังเพิ่มการเรียนรู้ของการเรียนรู้จากพฤติกรรมที่ผ่านมาของผู้ใช้เกี่ยวกับเว็บไซต์ที่เล่นเสียงโดยอัตโนมัติ เราตรวจพบเวลาที่ผู้ใช้มักจะปล่อยให้เสียงเล่นนานกว่า 7 วินาทีเป็นประจำในช่วงการเข้าชมเว็บไซต์ส่วนใหญ่ และเปิดใช้การเล่นอัตโนมัติสำหรับเว็บไซต์นั้น

เราทำเช่นนี้โดยใช้ดัชนีที่จัดเก็บไว้ในโปรไฟล์ Chrome 1 รายการในอุปกรณ์ โดยจะไม่ซิงค์ข้อมูลในอุปกรณ์ต่างๆ และจะแชร์เป็นส่วนหนึ่งของสถิติผู้ใช้ที่ไม่ระบุตัวตนเท่านั้น เราเรียกดัชนีนี้ว่า Media Engagement Index (MEI) และดูรายละเอียดได้ผ่านทาง chrome://media-engagement

MEI จะติดตามจำนวนการเข้าชมเว็บไซต์ที่มีการเล่นเสียงนานกว่า 7 วินาที จาก MEI ของผู้ใช้ เราเชื่อว่าเราสามารถทำความเข้าใจว่าผู้ใช้คาดหวังเสียงจากเว็บไซต์หนึ่งๆ หรือไม่ และคาดเดาความตั้งใจของผู้ใช้ในอนาคต

หากผู้ใช้มักจะให้โดเมนของเว็บไซต์เล่นเสียงได้นานกว่า 7 วินาที เราจะถือว่าในอนาคตผู้ใช้คาดหวังให้เว็บไซต์นี้มีสิทธิ์ในการเล่นเสียงอัตโนมัติ ดังนั้น เราจึงให้สิทธิ์เว็บไซต์ดังกล่าวในการเล่นเสียงอัตโนมัติโดยที่ผู้ใช้ไม่จำเป็นต้องโต้ตอบกับแท็บจากโดเมนนั้น

อย่างไรก็ตาม ไม่มีการรับประกันสิทธิ์นี้อย่างไม่มีที่สิ้นสุด หากพฤติกรรมของผู้ใช้เปลี่ยนไป เช่น การหยุดเล่นเสียงหรือปิดแท็บภายในเกณฑ์ 7 วินาทีจากการเข้าชมหลายครั้ง เราจะนำสิทธิ์ในการเล่นอัตโนมัติของเว็บไซต์ออก

ทั้งการใช้องค์ประกอบ HTML ของสื่อ (วิดีโอและเสียง) และ Web Audio (ออบเจ็กต์ AudioContext ที่เริ่มต้นด้วย JavaScript) จะเป็นส่วนหนึ่งของ MEI เพื่อเตรียมพร้อมสำหรับการเปิดตัวตามพฤติกรรมของผู้ใช้ตามนโยบายนี้ซึ่งเกี่ยวข้องกับ Web Audio จะเริ่มมีส่วนร่วมใน MEI ตั้งแต่ Chrome 70 เป็นต้นไป วิธีนี้ช่วยให้เราคาดการณ์ความตั้งใจของผู้ใช้เกี่ยวกับการเล่นอัตโนมัติและเว็บไซต์ที่ผู้ใช้เข้าชมบ่อยได้อยู่แล้ว

โปรดทราบว่า iframe จะมีสิทธิ์เล่นอัตโนมัติโดยไม่มีการโต้ตอบจากผู้ใช้ในกรณีที่หน้าเว็บหลักที่ฝัง iframe ขยายสิทธิ์นั้นไปยัง iframe ที่ระบุไว้

ชะลอการเปลี่ยนแปลงเพื่อสนับสนุนชุมชน

ชุมชนนักพัฒนาซอฟต์แวร์ Web Audio โดยเฉพาะอย่างยิ่งนักพัฒนาซอฟต์แวร์เกมบนเว็บและส่วนนักพัฒนา WebRTC ของชุมชนนี้ ได้รับการแจ้งเตือนเมื่อการเปลี่ยนแปลงนี้ปรากฏในช่อง Chrome Stable

ความคิดเห็นของชุมชนระบุว่าประสบการณ์การเล่นเกมบนเว็บและเสียงบนเว็บจำนวนมากจะได้รับผลกระทบเชิงลบจากการเปลี่ยนแปลงนี้ โดยเฉพาะเว็บไซต์จำนวนมากที่ไม่ได้อัปเดตจะไม่เล่นเสียงให้กับผู้ใช้อีกต่อไป ด้วยเหตุนี้ ทีมของเราจึงตัดสินใจว่าควรชะลอการเปลี่ยนแปลงนี้ เพื่อให้นักพัฒนาแอปเสียงบนเว็บมีเวลามากขึ้นในการอัปเดตเว็บไซต์ของตน

นอกจากนี้ เรายังใช้เวลาดำเนินการต่อไปนี้

  • โปรดพิจารณาอย่างจริงจังว่าการเปลี่ยนแปลงนโยบายนี้เป็นการดำเนินการที่ดีที่สุดหรือไม่
  • สำรวจวิธีที่เราสามารถช่วยลดจำนวนเว็บไซต์ที่มีเสียงซึ่งจะได้รับผลกระทบ

ประการแรก เราได้ตัดสินใจว่าการเปลี่ยนแปลงนโยบายเป็นสิ่งจำเป็นจริงๆ เพื่อปรับปรุงประสบการณ์ของผู้ใช้สำหรับผู้ใช้ส่วนใหญ่ของเรา อ่านรายละเอียดเพิ่มเติมเกี่ยวกับปัญหาที่การเปลี่ยนแปลงนโยบายกำลังแก้ไขได้ในส่วนถัดไปของบทความนี้

หลังจากนั้น เราได้ปรับเปลี่ยนการใช้งาน Web Audio ด้วย ซึ่งจะช่วยลดจำนวนเว็บไซต์ที่ได้รับผลกระทบในตอนแรก ของเว็บไซต์ที่เราตระหนักว่าเสียหายเนื่องจากการเปลี่ยนแปลงนี้ หลายๆ เว็บเป็นตัวอย่างจากชุมชนการพัฒนาเกมบนเว็บ ทำให้กว่า 80% ของเว็บไซต์เหล่านั้นจะทำงานโดยอัตโนมัติ ดูการวิเคราะห์และทดสอบดูเว็บไซต์ตัวอย่างเหล่านี้ได้ที่นี่ เราจะอธิบายการปรับใหม่นี้อย่างละเอียดด้านล่าง

เรายังได้ทำการเปลี่ยนแปลงเพื่อให้สนับสนุนแอปพลิเคชัน WebRTC ด้วย ในขณะที่มีเซสชันการจับภาพที่ใช้งานอยู่ ระบบจะอนุญาตให้เล่นอัตโนมัติได้

การเปลี่ยนแปลงพฤติกรรมนี้มีจุดมุ่งหมายเพื่อแก้ปัญหาอะไร

ที่ผ่านมาเบราว์เซอร์ช่วยผู้ใช้จัดการเสียงได้ไม่ดี เมื่อผู้ใช้เปิดหน้าเว็บแล้วได้รับเสียงที่ไม่ได้คาดหวังหรือไม่ต้องการ แสดงว่าผู้ใช้จะได้รับประสบการณ์ที่ไม่ดี ประสบการณ์การใช้งานที่แย่นี้คือปัญหาที่เราพยายามแก้ไข เสียงรบกวนที่ไม่พึงประสงค์เป็นเหตุผลหลักที่ผู้ใช้ไม่ต้องการให้เบราว์เซอร์เล่นเนื้อหาอัตโนมัติ

อย่างไรก็ตาม บางครั้งผู้ใช้ต้องการให้เนื้อหาเล่นอัตโนมัติ และระบบจะเล่นการเล่นอัตโนมัติที่ถูกบล็อกหลังจากนั้นจำนวนหนึ่งใน Chrome ในภายหลัง

เราจึงเชื่อมั่นในการเรียนรู้จากผู้ใช้และคาดการณ์ความตั้งใจของผู้ใช้สำหรับแต่ละเว็บไซต์ว่าเราจะมอบประสบการณ์ที่ดีที่สุดให้แก่ผู้ใช้ได้ หากผู้ใช้มีแนวโน้มที่จะให้เนื้อหาเล่นจากเว็บไซต์ เราก็จะเปิดเนื้อหาจากเว็บไซต์นั้นโดยอัตโนมัติในอนาคต ในทางกลับกัน หากผู้ใช้มีแนวโน้มที่จะหยุดเล่นเนื้อหาอัตโนมัติจากเว็บไซต์ใดเว็บไซต์หนึ่ง เราจะป้องกันการเล่นอัตโนมัติของเนื้อหานั้นโดยค่าเริ่มต้น

ข้อเสนออย่างหนึ่งที่ชุมชนเสนอขึ้นมาคือการปิดเสียงแท็บแทนการหยุดเล่นอัตโนมัติชั่วคราว อย่างไรก็ตาม เราเชื่อว่าควรหยุดประสบการณ์เล่นอัตโนมัติเพื่อให้เว็บไซต์ทราบว่าการเล่นอัตโนมัติถูกบล็อก และอนุญาตให้นักพัฒนาเว็บไซต์ตอบสนองต่อเรื่องนี้ ตัวอย่างเช่น แม้ว่านักพัฒนาแอปบางรายอาจต้องการแค่ปิดเสียง แต่นักพัฒนาแอปรายอื่นๆ อาจต้องการให้หยุดเนื้อหาเสียงไว้ชั่วคราวจนกว่าผู้ใช้จะมีส่วนร่วมกับเนื้อหาอย่างต่อเนื่อง มิเช่นนั้นผู้ใช้อาจพลาดบางส่วนของประสบการณ์เสียง

การปรับปรุงใหม่ๆ ที่จะช่วยนักพัฒนาเกมบนเว็บ

วิธีที่นักพัฒนาซอฟต์แวร์ใช้ Web Audio API มากที่สุดคือการสร้างออบเจ็กต์ 2 ประเภทเพื่อเล่นเสียง

นักพัฒนาเสียงบนเว็บจะสร้าง AudioContext สำหรับการเล่นเสียง หากต้องการเปิดเสียงต่อหลังจากที่นโยบายการเล่นอัตโนมัติระงับ AudioContext โดยอัตโนมัติ ผู้ใช้ต้องเรียกใช้ฟังก์ชันดำเนินการต่อ() ในออบเจ็กต์นี้หลังจากที่ผู้ใช้โต้ตอบกับแท็บ

    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 ซึ่งหนึ่งในนั้นคืออินเทอร์เฟซ AudioScheduledSourceNode AudioNodes ที่ใช้อินเทอร์เฟซ AudioscheduleSourceNode เรียกโดยทั่วไปว่าโหนดแหล่งที่มา (เช่น AudioBufferSourceNode, ConstantSourceNode และ OscillatorNode) โหนดต้นทางใช้เมธอด start()

โหนดแหล่งที่มามักจะแสดงข้อมูลโค้ดเสียงแต่ละรายการที่เกมเล่น เช่น เสียงที่เล่นเมื่อผู้เล่นเก็บเหรียญหรือเพลงพื้นหลังที่เล่นในช่วงปัจจุบัน นักพัฒนาเกมมีแนวโน้มที่จะเรียกฟังก์ชัน start() ในโหนดแหล่งที่มาเมื่อใดก็ตามที่เสียงเหล่านี้จำเป็นสำหรับเกม

เมื่อเราทราบถึงรูปแบบที่พบบ่อยนี้ในเกมบนเว็บแล้ว เราตัดสินใจที่จะปรับการใช้งานของเราตามรูปแบบต่อไปนี้

AudioContext จะกลับมาทำงานอีกครั้งโดยอัตโนมัติเมื่อเป็นไปตามเงื่อนไข 2 ข้อต่อไปนี้

  • ผู้ใช้มีการโต้ตอบกับหน้าเว็บ
  • เมธอด start() ของโหนดแหล่งที่มาจะมีการเรียก

การเปลี่ยนแปลงนี้จะทำให้เกมบนเว็บส่วนใหญ่เล่นต่อได้เมื่อผู้ใช้เริ่มเล่นเกม

นำเว็บไปข้างหน้า

ในการขับเคลื่อนแพลตฟอร์มเว็บให้ก้าวไปข้างหน้า บางครั้งเราจำเป็นต้องทำการเปลี่ยนแปลงซึ่งอาจทำให้ความเข้ากันได้ใช้งานไม่ได้ ขออภัย การเล่นอัตโนมัติเป็นเรื่องซับซ้อนและอยู่ในหมวดหมู่นี้ของการเปลี่ยนแปลง แต่การเปลี่ยนแปลงนี้มีความสำคัญอย่างยิ่งต่อการทำให้เว็บไม่หยุดนิ่งหรือสูญเสียขอบด้านนวัตกรรม

อย่างไรก็ตาม เราตระหนักดีว่าการใช้การแก้ไขสำหรับเว็บไซต์นั้นอาจไม่สามารถกระทำได้ในระยะสั้นด้วยเหตุผลต่างๆ ดังนี้:

  • นักพัฒนาเว็บอาจมุ่งเน้นที่โครงการใหม่ ทำให้ไม่สามารถบำรุงรักษาเว็บไซต์เก่าได้ในทันที
  • เว็บพอร์ทัลเกมอาจไม่สามารถควบคุมการนำเกมมาใช้ในแคตตาล็อกของตน และการอัปเดตเกมหลายร้อยเกม หรือถ้าไม่ได้เป็นหลายพันเกม อาจต้องใช้เวลาและต้นทุนสูงสำหรับผู้เผยแพร่
  • บางเว็บไซต์อาจเก่ามากแล้วหรือไม่ก็เพราะสาเหตุใดสาเหตุหนึ่งที่ไม่ได้รับการบำรุงรักษาอีกต่อไปแต่ยังคงโฮสต์ไว้เพื่อวัตถุประสงค์ทางประวัติศาสตร์

นี่คือข้อมูลโค้ด JavaScript สั้นๆ ที่ขัดขวางการสร้างออบเจ็กต์ AudioContext ใหม่และจะทริกเกอร์ฟังก์ชัน กลับมาทำงานอีกครั้งของออบเจ็กต์เหล่านี้โดยอัตโนมัติ เมื่อผู้ใช้ทำการโต้ตอบหลายรายการกับผู้ใช้ คุณควรเรียกใช้โค้ดนี้ก่อนการสร้างออบเจ็กต์ AudioContext ใดๆ ในหน้าเว็บ เช่น คุณสามารถเพิ่มโค้ดนี้ลงในแท็กของหน้าเว็บได้

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

โปรดทราบว่าข้อมูลโค้ดนี้จะไม่ช่วยในการทำให้ AudioContexts ที่สร้างขึ้นภายใน iframe กลับมาทำงานอีกครั้ง ยกเว้นกรณีที่ข้อมูลโค้ดนี้รวมอยู่ในขอบเขตของเนื้อหาของ iframe เอง

ให้บริการผู้ใช้ได้ดียิ่งขึ้น

นอกจากนี้ เรายังเพิ่มกลไกสำหรับผู้ใช้ในการปิดใช้นโยบายการเล่นอัตโนมัติเพื่อให้สอดคล้องกับการเปลี่ยนแปลงนโยบายด้วย เพื่อให้ครอบคลุมกรณีที่การเรียนรู้อัตโนมัติไม่ทำงานตามที่คาดไว้ หรือสำหรับเว็บไซต์ที่แสดงผลไม่ได้จากการเปลี่ยนแปลง การเปลี่ยนแปลงนี้จะเปิดตัวโดยใช้นโยบายใหม่ใน Chrome 71 ซึ่งจะดูได้ในการตั้งค่าเสียง และเพิ่มเว็บไซต์ที่ผู้ใช้ต้องการอนุญาตการเล่นอัตโนมัติลงในรายการอนุญาตได้

MEI สร้างขึ้นอย่างไรสำหรับผู้ใช้ใหม่

ดังที่กล่าวไว้ก่อนหน้านี้ เราสร้าง MEI โดยอัตโนมัติเมื่อเวลาผ่านไปโดยอิงตามพฤติกรรมของผู้ใช้เพื่อคาดการณ์ความตั้งใจที่ต้องการในเว็บไซต์ที่มีเนื้อหาเล่นอัตโนมัติ แต่ละเว็บไซต์จะมีคะแนนระหว่าง 0 ถึง 1 ในดัชนีนี้ คะแนนที่สูงขึ้นบ่งชี้ว่าผู้ใช้คาดหวังให้เนื้อหาเล่นจากเว็บไซต์นั้น

อย่างไรก็ตาม สำหรับโปรไฟล์ผู้ใช้ใหม่หรือหากผู้ใช้ล้างข้อมูลการท่องเว็บของตน ระบบจะใช้รายการ Pre-Seed ที่อิงตามคะแนน MEI ที่รวบรวมโดยไม่ระบุตัวตนของผู้ใช้เพื่อกำหนดเว็บไซต์ที่สามารถเล่นอัตโนมัติ แทนการบล็อกการเล่นอัตโนมัติในทุกที่ ข้อมูลนี้จะระบุสถานะเริ่มต้นของ MEI ขณะสร้างโปรไฟล์ผู้ใช้เท่านั้น เมื่อผู้ใช้ท่องเว็บและโต้ตอบกับเว็บไซต์ที่มีเนื้อหาที่เล่นอัตโนมัติ MEI ส่วนตัวของผู้ใช้จะลบล้างการกำหนดค่าเริ่มต้น

รายการเว็บไซต์ที่สร้างขึ้นล่วงหน้าสร้างขึ้นด้วยอัลกอริทึม ไม่ใช่การดูแลจัดการด้วยตนเอง และเว็บไซต์ต่างๆ จะมีสิทธิ์อยู่ในการรวม เว็บไซต์ต่างๆ จะถูกเพิ่มลงในรายการหากมีผู้ใช้ที่เข้าชมเว็บไซต์นั้นเพียงพอที่อนุญาตให้มีการเล่นอัตโนมัติบนเว็บไซต์นั้น เกณฑ์นี้อ้างอิงตามเปอร์เซ็นต์ เพื่อที่จะได้ไม่เข้าข้างเว็บไซต์ขนาดใหญ่

ผลการสืบค้นคงเหลือ

เราได้โพสต์เอกสารประกอบใหม่เพื่อให้ข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับกระบวนการตัดสินใจและเหตุผลในการออกแบบของนโยบายนี้ รวมถึงเอกสารใหม่เกี่ยวกับวิธีการทำงานของรายการเว็บไซต์ที่สร้างขึ้นล่วงหน้า

เราให้ความสำคัญกับผู้ใช้เป็นอันดับแรกเสมอ แต่เราก็ไม่ต้องการให้ชุมชนการพัฒนาเว็บแย่ลง บางครั้งการเป็นเบราว์เซอร์หมายความว่าเป้าหมายทั้ง 2 อย่างนี้ต้องสมดุลกันอย่างระมัดระวัง เราเชื่อว่าการปรับเปลี่ยนการบังคับใช้นโยบายและเวลาที่ให้นักพัฒนาซอฟต์แวร์เสียงบนเว็บอัปเดตโค้ดของตนเพิ่มเติม จะทำให้เราสามารถรักษาสมดุลของ Chrome 71 นี้ได้

ความคิดเห็น