ต้องแก้ไข Code อย่างไร จึงจะรองรับการ autoplay กับ HTML5 audio tag ในมือถือ iOS แบบเดียวกับเว็บ Captain Marvel

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ต้องแก้ไข Code อย่างไร จึงจะรองรับการ autoplay กับ HTML5 audio tag ในมือถือ iOS แบบเดียวกับเว็บ Captain Marvel

ต้องแก้ไข Code อย่างไร จึงจะรองรับการ autoplay กับ HTML5 audio tag ในมือถือ iOS แบบเดียวกับเว็บ Captain Marvel (เปิดเว็บ Captain Marvel ใน iOS แค่เลื่อนจอ ก็เล่นดนตรีแบบ autoplay ทันที) ได้ครับ

เว็บ Captain Marvel ครับ

https://www.marvel.com/captainmarvel/

ชุดไฟล์ + Code ทั้งหมดครับ

1. index.php

<!DOCTYPE html>
<html>
<body>

<h1>The audio autoplay attribute</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay>
  <source src="sound1.mp3" type="audio/mpeg">
  <source src="sound1.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

2. sound1.mp3 โหลดได้ที่ Link ด้านล่างครับ

https://doanga2007.github.io/sound1.mp3

3. sound1.ogg โหลดได้ที่ Link ด้านล่างครับ

https://doanga2007.github.io/sound1.ogg

Sumate Mephokkij 159.192.223.xxx 13-04-2020 20:59:14

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

น่าจะเป็นเงื่อนไข ข้อจำกัดใหม่ของ การใช้งาน autoplay ทั้งกับใน video

และก็ audio ลองอ่านจากนี้ดู

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

แต่กรณี video เราสามารถใส่ autoplay ได้ แต่ต้องกำหนดพร้อมกับ muted หรือปิดเสียง

โดยวิดีโอ จะเล่นอัตโนมัติ แต่ผู้ใช้ต้องเปิดเสียงเอง ตัวอย่าง

<video id="video1" width="320" height="240" controls autoplay muted>
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

ส่วนกรณีของ audio จะเล่นได้ ก็ต่อเมื่อมีการกระทำ อย่างใดอย่างหนึ่งของผู้ใช้งาน

ก่อนเท่านั้น ดังนั้น แนวทางคงเป็นการประยุกต์ การจับ event หรือการกระทำของผู้ใช้

ตัวอย่างเช่น บางกรณีใช้วิธีการ สร้าง popup แจ้งเตือน เพื่อให้ผู้ใช้ปิด popup นั้น แล้วจับ

event onclick ที่ element ตัวนั้นให้ทำการเริ่มเล่นไฟล์เสียง

ส่วนกรณีมือถือ จะมี event พวก touch อย่าง touchstart touchmove เหล่านี้น่าจะเป็นส่วน

ช่วย แต่ก็ใช้ว่า เมื่อผู้ใช้เริ่ม touch หรือเลื่อนหน้าเพจ จะทำให้ audio เล่นทันที บางกรณี

อาจจะรอจังหวะ ให้มี event อืนๆ ร่วมด้วยก็ได้ ซึ่งจะวิธีไหนก็ตาม เมื่อมีการกระทำเกิดขึ้น

จากผู้ใช้ที่ช้ดเจนแล้ว เราก็จะสามารถจัดการกับ audio ให้เล่นเสียงที่ต้องการได้

ดูแนวทางคร่าวๆ จากโค้ดด้านล่าง เช่น เมื่อเปิดขึ้นมา ให้ popup คลุมทั้งเพจ อาจจะใช้วิธี

กำหนด opacity หรือความโปร่งใส ประกอบ เมื่อผู้ใช้พยายามลาก เลื่อน หรือสุดท้ายคลิก

ที่ element นั้น ก็จะทำให้สามารถเรียกใช้งานไฟล์เสียงให้เล่นได้

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>
  <style>
    #overlay{
      background: #000;
      position: fixed;
      opacity:0.3;
      display:none;
      width: 100%;
      height: 100vh;
    }
  </style>
  <div id="overlay"></div>
<h1>The audio autoplay attribute</h1>
  <br/>
  <audio id="myaudio" controls autoplay>
  <source src="https://doanga2007.github.io/sound1.mp3" type="audio/mpeg">
  <source src="https://doanga2007.github.io/sound1.ogg">
  Your browser does not support the audio element.
</audio>  
  <br/>
 <script>

  var myaudio = document.querySelector('#myaudio');
  var _overlay = document.querySelector('#overlay');
  
   _overlay.addEventListener('click', function(e) {
     myaudio.play();
     _overlay.remove();
   },false);  

   setTimeout(function(){
       _overlay.style.display = 'block';
   },1000);
   
  document.addEventListener('touchmove', function(e) {
    e.preventDefault();
  //  _overlay.style.display = 'block';
  }, false);
   
   
  </script>
  
</body>
</html>

ตัวอย่าง DEMO

ninenik 27.55.69.xxx 14-04-2020

ความคิดเห็นที่ 2

ขอบคุณครับ สำหรับคำตอบ Code ใช้งานได้แล้ว ซึ่งปรับปรุงเป็นฉบับของตัวเอง ได้ดังนี้ครับ

1. index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
  <style>
    #overlay{
      background: #000;
      position: fixed;
      opacity:0.0;
      display:none;
      width: 100%;
      height: 100vh;
    }
  </style>
  <div id="overlay"></div>
<h1>The audio autoplay attribute</h1>
  <br/>
  <audio id="myaudio" controls autoplay>
  <source src="https://doanga2007.github.io/sound1.mp3" type="audio/mpeg">
  <source src="https://doanga2007.github.io/sound1.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>  
  <br/>
 <script>
  var myaudio = document.querySelector('#myaudio');
  var _overlay = document.querySelector('#overlay');
   
   _overlay.addEventListener('click', function(e) {
     myaudio.play();
     _overlay.remove();
   },false);  
 
   setTimeout(function(){
       _overlay.style.display = 'block';
   },1000);
    
  document.addEventListener('touchmove', function(e) {
    e.preventDefault();
  //  _overlay.style.display = 'block';
  }, false); 
  </script>
</body>
</html>

Sumate Mephokkij 159.192.218.xxx 15-04-2020 20:42

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน