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

Tom Greenaway

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ชุมชนนักพัฒนา Web Audio โดยเฉพาะนักพัฒนาเกมบนเว็บและนักพัฒนา WebRTC ของชุมชนนี้สังเกตเห็นการเปลี่ยนแปลงนี้เมื่อปรากฏในช่อง Chrome ที่เสถียร

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

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

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

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

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

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

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

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

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

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

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

การปรับใหม่เพื่อช่วยเหลือนักพัฒนาเกมบนเว็บ

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

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

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

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

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

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

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

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

พัฒนาเว็บให้ก้าวหน้า

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

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

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

ต่อไปนี้คือข้อมูลโค้ด JavaScript สั้นๆ ที่ขัดขวางการสร้างออบเจ็กต์ AudioContext ใหม่ และจะทริกเกอร์ฟังก์ชัน resume ของออบเจ็กต์เหล่านี้โดยอัตโนมัติเมื่อผู้ใช้ทำการโต้ตอบต่างๆ โค้ดนี้ควรทำงานก่อนการสร้างออบเจ็กต์ 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);
  });
})();

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

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

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

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

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

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

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

ค้นหาสมดุล

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

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

ความคิดเห็น