Putar otomatis file audio di iPad dengan HTML5

Saya mencoba mendapatkan file audio untuk diputar otomatis di Safari pada iPad. Jika saya membuka halaman menggunakan Safari di Mac saya, tidak masalah. Di iPad, putar otomatis tidak berfungsi.

PEMBARUAN: Ini adalah retasan dan tidak berfungsi lagi di iOS 4.X dan yang lebih baru. Yang ini bekerja di IOS 3.2.X.

Itu tidak benar. Apple tidak ingin memutar video dan audio secara otomatis di iPad karena banyaknya lalu lintas yang dapat Anda gunakan di jaringan seluler. Saya tidak akan menggunakan putar otomatis untuk konten online. Untuk situs HTML Offline, ini adalah fitur yang hebat dan untuk itulah saya menggunakannya.

Berikut ini solusi "klik palsu javascript": http://www.roblaplaca.com/examples/html5AutoPlay/

Salin & Tempel Kode dari situs:

<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> 

Ini bukan sumber saya. Saya telah menemukan ini beberapa waktu lalu dan menguji kodenya pada iPad dan iPhone dengan IOS 3.2.X.

Saya juga ingin menekankan bahwa alasan Anda tidak dapat melakukan ini adalah keputusan bisnis yang dibuat Apple, bukan keputusan teknis. Intinya, tidak ada alasan teknis yang rasional bagi Apple untuk menonaktifkan suara dari aplikasi web di iPod Touch. Itu adalah perangkat WiFi saja, bukan telepon yang mungkin dikenakan biaya bandwidth mahal, sehingga argumen itu tidak ada gunanya untuk perangkat itu. Mereka mungkin mengatakan bahwa mereka membantu manajemen jaringan WiFi, tetapi masalah apa pun dengan bandwidth di jaringan WiFi saya adalah perhatian saya, bukan Apple.

Selain itu, jika yang benar-benar mereka pedulikan adalah mencegah konsumsi bandwidth yang berlebihan dan tidak diinginkan, mereka akan memberikan pengaturan yang memungkinkan pengguna untuk ikut serta dalam suara aplikasi web. Selain itu, mereka akan melakukan sesuatu untuk membatasi situs web mengonsumsi bandwidth yang setara dengan cara lain. Tetapi tidak ada batasan seperti itu. Situs web dapat mengunduh file besar di latar belakang berulang kali dan Apple tidak peduli tentang itu. Dan akhirnya, saya yakin suaranya tetap bisa diunduh, jadi TIDAK ADA BANDWIDTH YANG BENAR-BENAR TERSIMPAN! Apple hanya tidak mengizinkan mereka untuk bermain secara otomatis tanpa interaksi pengguna, membuatnya tidak dapat digunakan untuk permainan, yang tentu saja merupakan niat mereka yang sebenarnya.

Apple memblokir suara karena mereka mulai memperhatikan bahwa aplikasi HTML5 bisa sama kemampuannya dengan aplikasi asli, jika tidak lebih. Jika Anda menginginkan suara di Aplikasi Web, Anda perlu melobi Apple untuk berhenti bersikap anti-persaingan seperti Microsoft. Tidak ada masalah teknis yang bisa diperbaiki disini.

Apple menolak banyak standar web HTML5 di perangkat iOS mereka, karena berbagai alasan bisnis. Pada akhirnya, Anda tidak dapat mempramuat atau memutar file suara secara otomatis sebelum acara sentuh, itu hanya memutar satu suara pada satu waktu, dan tidak mendukung Ogg / Vorbis. Namun, saya menemukan satu solusi bagus agar Anda memiliki sedikit lebih banyak kendali atas audio.

<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>

Pada dasarnya, Anda mulai memutar file audio pada acara sentuh pertama, lalu Anda segera menjedanya. Sekarang, Anda dapat menggunakan perintah soundHandle.play () dan soundHandle.pause () di seluruh Javascript dan mengontrol audio tanpa peristiwa sentuh. Jika Anda bisa mengatur waktunya dengan sempurna, cukup minta jeda masuk tepat setelah suaranya selesai. Kemudian lain kali Anda memainkannya lagi, itu akan mengulang kembali ke awal. Ini tidak akan menyelesaikan semua kekacauan yang dibuat Apple di sini, tetapi ini satu solusi.

Mulai iOS 4.2.1, baik klik palsu maupun trik .load () tidak akan berfungsi untuk memutar audio secara otomatis di perangkat iOS mana pun. Satu-satunya pilihan yang saya tahu adalah meminta pengguna benar-benar melakukan tindakan klik dan memulai pemutaran di penangan peristiwa klik tanpa membungkus panggilan .play () dalam asynchronous (ajax, setTimeout, dll).

Seseorang tolong beri tahu saya jika saya salah. Saya memiliki celah yang berfungsi untuk iPad dan iPhone sebelum pembaruan terbaru, dan semuanya sepertinya sudah ditutup.

Saya mengonfirmasi bahwa audio tidak berfungsi seperti yang dijelaskan (setidaknya di iPad yang menjalankan 4.3.5). Masalah khususnya adalah audio tidak dapat dimuat dalam metode asinkron (ajax, acara pengatur waktu, dll) tetapi akan diputar jika sudah dimuat sebelumnya. Masalahnya adalah beban harus berada pada peristiwa yang dipicu oleh pengguna. Jadi jika Anda dapat memiliki tombol bagi pengguna untuk memulai permainan, Anda dapat melakukan sesuatu seperti:

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

Kemudian untuk memainkannya, misalnya dalam permintaan ajax, Anda dapat melakukannya

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

Bukan solusi terbaik, tetapi ini dapat membantu, terutama mengetahui pelakunya adalah fungsi pemuatan dalam peristiwa yang dipicu oleh bukan pengguna.

Sunting: Saya menemukan penjelasan Apple, dan itu memengaruhi iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Coba panggil metode .load () sebelum metode .play () pada tag audio atau video ... yang masing-masing akan menjadi HTMLAudioElement atau HTMLVideoElement. Itu adalah satu-satunya cara untuk bekerja di iPad saya!

Putar otomatis tidak berfungsi di iPad atau iPhone baik untuk video atau tag audio. Ini adalah batasan yang ditetapkan oleh Apple untuk menghemat bandwidth pengguna.

Menurut saya, jawaban untuk pertanyaan ini (setidaknya sekarang) didokumentasikan dengan jelas di dokumen HTML5 Safari :

Kontrol Pengguna Download Melalui Jaringan Seluler

Di Safari di iOS (untuk semua perangkat, termasuk iPad), di mana pengguna mungkin berada di jaringan seluler dan dikenai biaya per unit data, preload dan autoplay dinonaktifkan. Tidak ada data yang dimuat sampai pengguna memulainya. Ini berarti metode JavaScript play () dan load () juga tidak aktif sampai pengguna memulai pemutaran, kecuali jika metode play () atau load () dipicu oleh tindakan pengguna. Dengan kata lain, tombol Putar yang dimulai oleh pengguna berfungsi, tetapi acara onLoad = "play ()" tidak.

Ini memainkan film: <input type="button" value="Play" onClick="document.myMovie.play()">

Ini tidak melakukan apa-apa di iOS: <body onLoad="document.myMovie.play()">

Bingung dengan ini saat mengembangkan aplikasi web prototipe cepat di bawah iOS4.2 (dev build). Solusi sebenarnya cukup sederhana. Perhatikan bahwa Anda sepertinya belum memiliki tag di halaman HTML, Anda sebenarnya perlu memasukkan tag ke dalam dokumen secara dinamis (perhatikan contoh ini menggunakan Prototipe 1.7 untuk beberapa tambahan ketidaknyamanan 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();

Karena Anda belum menyetel pengontrol, tidak perlu melakukan sesuatu yang rumit dengan CSS untuk menyembunyikannya / memposisikannya di luar layar.

Ini sepertinya bekerja dengan sempurna.

Apple tidak mendukung standar sepenuhnya, tetapi ada solusinya. Alasan mereka adalah kemacetan jaringan seluler, mungkin karena Anda akan membuka halaman yang memutar audio acak. Perilaku ini tidak berubah saat perangkat menggunakan wifi, mungkin untuk konsistensi. Ngomong-ngomong, halaman-halaman itu biasanya merupakan ide yang buruk. Anda tidak boleh mencoba memasang soundtrack di setiap halaman web. Itu salah. :)

html5 audio akan diputar jika dimulai sebagai hasil dari tindakan pengguna. Memuat halaman tidak dihitung. Jadi, Anda perlu merestrukturisasi aplikasi web Anda menjadi aplikasi all-in-one-page. Alih-alih link yang membuka halaman yang memutar audio, Anda memerlukan link tersebut untuk memutarnya di halaman saat ini, tanpa perubahan halaman. Aturan "interaksi pengguna" ini berlaku untuk metode html5 yang dapat Anda panggil di elemen audio atau video. Panggilan kembali tanpa efek apa pun jika diaktifkan secara otomatis saat pemuatan halaman, tetapi berfungsi saat dipanggil dari penangan peristiwa.

Solusi saya adalah pemicu dari peristiwa sentuhan nyata di menu sebelumnya. Mereka tidak memaksa Anda untuk menggunakan antarmuka pemain tertentu tentunya. Untuk tujuan saya, ini bekerja dengan baik. Jika Anda tidak memiliki antarmuka untuk digunakan, afaik Anda buggered. Mungkin Anda bisa mencoba acara miring atau sesuatu ...

Jika Anda membuat elemen Audio menggunakan:

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

Dan tambahkan suspendpendengar acara melalui:

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

Dan kemudian memuat file ke Safari seluler (iPad atau iPhone), Anda akan melihat 'ditangguhkan' masuk di konsol pengembang. Menurut spesifikasi HTML5, ini berarti, "Agen pengguna dengan sengaja tidak sedang mengambil data media, tetapi tidak mengunduh seluruh sumber daya media."

Memanggil a.load () berikutnya, menguji event "canplay" dan kemudian menggunakan a.play () sepertinya merupakan metode yang cocok untuk memicu suara secara otomatis.

Bekerja dengan jQuery, diuji di Ipad v.5.1.1

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

Anda harus menambahkan / menghapus elemen video dari halaman.

Saya menangani ini dengan melampirkan event handler untuk semua event yang Anda izinkan untuk memicu audio ke elemen body yang memicu elemen audio html dengan autoplay untuk diputar sekali.

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

Ini sepertinya berhasil:

<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>

Lihat aksinya di sini: http://www.johncoles.co.uk/ipad/test/1.html (Diarsipkan)

Mulai iOS 4.2, ini tidak lagi berfungsi. Maaf.