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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ต้องแก้ไข 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

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

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


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


  • ( หรือ เข้าใช้งานด้วย Facebook คลิก )
 ความคิดเห็นที่ 1
น่าจะเป็นเงื่อนไข ข้อจำกัดใหม่ของ การใช้งาน autoplay ทั้งกับใน video
และก็ audio ลองอ่านจากนี้ดู
 
 
แต่กรณี 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>

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

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

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

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


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






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ