เล่นไฟล์เสียงอัตโนมัติบน iPad ด้วย HTML5

ฉันกำลังพยายามรับไฟล์เสียงเพื่อเล่นอัตโนมัติใน Safari บน iPad ถ้าฉันไปที่เพจโดยใช้ Safari บน Mac ก็ใช้ได้ บน iPad การเล่นอัตโนมัติไม่ทำงาน

อัพเดท:นี่เป็นการแฮ็กและใช้งานไม่ได้อีกต่อไปบน IOS 4.X ขึ้นไป อันนี้ใช้ได้กับ IOS 3.2.X.

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

นี่คือวิธีแก้ "javascript fake click": http://www.roblaplaca.com/examples/html5AutoPlay/

คัดลอกและวางรหัสจากเว็บไซต์:

<script type="text/javascript"> 
        function fakeClick(fn) {
            var $a = $('<a href="#" id="fakeClick"></a>');
                $a.bind("click", function(e) {
                    e.preventDefault();
                    fn();
                });

            $("body").append($a);

            var evt, 
                el = $("#fakeClick").get(0);

            if (document.createEvent) {
                evt = document.createEvent("MouseEvents");
                if (evt.initMouseEvent) {
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    el.dispatchEvent(evt);
                }
            }

            $(el).remove();
        }

        $(function() {
            var video = $("#someVideo").get(0);

            fakeClick(function() {
                video.play();
            });
        });

        </script> 

นี่ไม่ใช่แหล่งที่มาของฉัน ฉันเคยพบสิ่งนี้มาแล้วและทดสอบรหัสบน IPad และ iPhone ด้วย IOS 3.2.X.

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

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

Apple ปิดกั้นเสียงเนื่องจากพวกเขาเริ่มสังเกตเห็นว่าแอพ HTML5 สามารถทำได้เช่นเดียวกับแอพเนทีฟหากไม่เป็นเช่นนั้น หากคุณต้องการเสียงใน Web Apps คุณต้องล็อบบี้ Apple เพื่อหยุดการต่อต้านการแข่งขันเช่น Microsoft ไม่มีปัญหาทางเทคนิคที่สามารถแก้ไขได้ที่นี่

Apple ปฏิเสธมาตรฐานเว็บ HTML5 จำนวนมากบนอุปกรณ์ iOS ของตนอย่างน่ารำคาญด้วยเหตุผลทางธุรกิจหลายประการ ท้ายที่สุดแล้วคุณไม่สามารถโหลดล่วงหน้าหรือเล่นไฟล์เสียงอัตโนมัติก่อนเหตุการณ์สัมผัสได้โดยจะเล่นทีละเสียงเท่านั้นและไม่รองรับ Ogg / Vorbis อย่างไรก็ตามฉันพบวิธีแก้ปัญหาที่ดีอย่างหนึ่งเพื่อให้คุณควบคุมเสียงได้มากขึ้นเล็กน้อย

<audio id="soundHandle" style="display:none;"></audio>

<script type="text/javascript">

var soundHandle = document.getElementById('soundHandle');

$(document).ready(function() {
    addEventListener('touchstart', function (e) {
        soundHandle.src = 'audio.mp3';
        soundHandle.loop = true;
        soundHandle.play();
        soundHandle.pause();
    });
});

</script>

โดยทั่วไปคุณจะเริ่มเล่นไฟล์เสียงในกิจกรรมสัมผัสแรกจากนั้นคุณจะหยุดเล่นชั่วคราวทันที ตอนนี้คุณสามารถใช้คำสั่ง soundHandle.play () และ soundHandle.pause () ตลอด Javascript ของคุณและควบคุมเสียงโดยไม่มีเหตุการณ์สัมผัส หากคุณสามารถจับเวลาได้อย่างสมบูรณ์เพียงแค่ให้หยุดชั่วคราวหลังจากที่เสียงจบลง แล้วครั้งต่อไปที่คุณเล่นอีกครั้งมันจะวนกลับไปที่จุดเริ่มต้น สิ่งนี้จะไม่ช่วยแก้ปัญหาทั้งหมดที่ Apple ทำที่นี่ แต่เป็นทางออกเดียว

สำหรับ iOS 4.2.1 การคลิกปลอมหรือเคล็ดลับ. load () จะไม่ทำงานเพื่อเล่นเสียงอัตโนมัติบนอุปกรณ์ iOS ใด ๆ ตัวเลือกเดียวที่ฉันรู้คือให้ผู้ใช้ดำเนินการคลิกและเริ่มเล่นในตัวจัดการเหตุการณ์คลิกโดยไม่ต้องตัดการเรียก. play () ในทุกสิ่งที่ไม่ตรงกัน (ajax, setTimeout เป็นต้น)

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

ฉันยืนยันว่าเสียงไม่ทำงานตามที่อธิบายไว้ (อย่างน้อยบน iPad ที่ใช้ 4.3.5) ปัญหาเฉพาะคือเสียงจะไม่โหลดด้วยวิธีอะซิงโครนัส (ajax เหตุการณ์จับเวลา ฯลฯ ) แต่จะเล่นได้หากโหลดไว้ล่วงหน้า ปัญหาคือการโหลดจะต้องอยู่ในเหตุการณ์ที่ผู้ใช้ทริกเกอร์ ดังนั้นหากคุณสามารถมีปุ่มสำหรับผู้ใช้เพื่อเริ่มการเล่นคุณสามารถทำสิ่งต่อไปนี้:

function initSounds() {
    window.sounds = new Object();
    var sound = new Audio('assets/sounds/clap.mp3');
    sound.load();
    window.sounds['clap.mp3'] = sound;
}

จากนั้นในการเล่นเช่นในคำขอ ajax คุณสามารถทำได้

function doSomething() {
    $.post('testReply.php',function(data){
        window.sounds['clap.mp3'].play();
    }); 
}

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

แก้ไข: ฉันพบคำอธิบายของ Apple และมีผลกับ iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

ลองเรียกเมธอด. load () ก่อนเมธอด. play () บนแท็กเสียงหรือวิดีโอ ... ซึ่งจะเป็น HTMLAudioElement หรือ HTMLVideoElement ตามลำดับ นั่นเป็นวิธีเดียวที่จะใช้ได้กับ iPad สำหรับฉัน!

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

สำหรับฉันแล้วดูเหมือนว่าคำตอบสำหรับคำถามนี้คือ (อย่างน้อยก็ตอนนี้) ที่บันทึกไว้อย่างชัดเจนในเอกสารSafari HTML5 :

ผู้ใช้ควบคุมการดาวน์โหลดผ่านเครือข่ายเซลลูล่าร์

ใน Safari บน iOS (สำหรับอุปกรณ์ทั้งหมดรวมถึง iPad) ซึ่งผู้ใช้อาจอยู่ในเครือข่ายเซลลูลาร์และถูกเรียกเก็บเงินต่อหน่วยข้อมูลการโหลดล่วงหน้าและการเล่นอัตโนมัติจะถูกปิดใช้งาน ไม่มีการโหลดข้อมูลจนกว่าผู้ใช้จะเริ่มต้น ซึ่งหมายความว่าเมธอด JavaScript play () และ load () จะไม่ทำงานเช่นกันจนกว่าผู้ใช้จะเริ่มเล่นเว้นแต่เมธอด play () หรือ load () จะถูกทริกเกอร์โดยการกระทำของผู้ใช้ กล่าวอีกนัยหนึ่งคือปุ่ม Play ที่เริ่มโดยผู้ใช้จะทำงาน แต่เหตุการณ์ onLoad = "play ()" ไม่ทำงาน

นี่เล่นหนัง: <input type="button" value="Play" onClick="document.myMovie.play()">

สิ่งนี้ไม่ได้ทำอะไรบน iOS: <body onLoad="document.myMovie.play()">

งงงวยกับเรื่องนี้ในขณะที่พัฒนาเว็บแอปต้นแบบอย่างรวดเร็วภายใต้ iOS4.2 (รุ่น dev) วิธีแก้ปัญหาค่อนข้างง่าย โปรดทราบว่าคุณไม่สามารถมีแท็กในหน้า HTML ของคุณได้คุณจำเป็นต้องแทรกแท็กลงในเอกสารแบบไดนามิก (โปรดทราบว่าตัวอย่างนี้ใช้ Prototype 1.7 สำหรับความยุ่งเหยิงของ Javascript เพิ่มเติม):

this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();

เนื่องจากคุณไม่ได้ตั้งค่าคอนโทรลเลอร์จึงไม่จำเป็นต้องทำอะไรให้ยุ่งยากกับ CSS เพื่อซ่อน / วางตำแหน่งไว้นอกหน้าจอ

ดูเหมือนว่าจะทำงานได้อย่างสมบูรณ์

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

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

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

หากคุณสร้างองค์ประกอบเสียงโดยใช้:

var a = new Audio("my_audio_file.wav");

และเพิ่มsuspendผู้ฟังเหตุการณ์ผ่าน:

a.addEventListener("suspend", function () {console.log('suspended')}, false);

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

การเรียกใช้ a.load () ที่ตามมาทดสอบเหตุการณ์ "canplay" จากนั้นใช้ a.play () ดูเหมือนจะเป็นวิธีที่เหมาะสมสำหรับการเรียกใช้เสียงโดยอัตโนมัติ

ทำงานร่วมกับ jQuery ทดสอบบน Ipad v.5.1.1

$('video').get(0).play();

คุณต้องต่อท้าย / ลบองค์ประกอบวิดีโอออกจากหน้า

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

var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
    $('body').on('touchstart click doubleclick keydown', function() {
        $("audio[autoplay='autoplay']").each(
            function(){
                this.play();
                this.removeAttribute('autoplay');
            });
    });
}

ดูเหมือนว่าจะได้ผล:

<html>
<title>
iPad Sound Test  - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript"> 
    window.onload = function() {
        var audioPlayer = document.getElementById("audio");
        audioPlayer.load();
        audioPlayer.play();
    };
    </script> 

</body>
</html>

ดูการใช้งานจริงที่นี่: http://www.johncoles.co.uk/ipad/test/1.html (ที่เก็บถาวร)

สำหรับ iOS 4.2 สิ่งนี้ใช้ไม่ได้อีกต่อไป ขออภัย.