HTML5 ile bir iPad'de ses dosyalarını otomatik oynatma

İPad'de Safari'de otomatik olarak oynatılacak bir ses dosyası almaya çalışıyorum. Mac'imde Safari kullanarak sayfaya gidersem sorun değil. İPad'de otomatik oynatma çalışmıyor.

GÜNCELLEME: Bu bir hack'tir ve artık IOS 4.X ve üzeri sürümlerde çalışmamaktadır. Bu, IOS 3.2.X üzerinde çalıştı.

Bu doğru değil. Apple, mobil ağlarda kullanabileceğiniz yüksek trafik nedeniyle IPad'de video ve sesi otomatik olarak oynatmak istemiyor. Çevrimiçi içerik için otomatik oynatmayı kullanmazdım. Çevrimdışı HTML siteleri için bu harika bir özellik ve onu bunun için kullandım.

İşte bir "javascript sahte tıklama" çözümü: http://www.roblaplaca.com/examples/html5AutoPlay/

Kodu siteden kopyalayıp yapıştırın:

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

Bu benim kaynağım değil. Bunu bir süre önce buldum ve kodu bir IPad ve iPhone'da IOS 3.2.X ile test ettim.

Bunu yapamama nedeninizin teknik bir karar değil, Apple'ın verdiği bir iş kararı olduğunu da vurgulamak isterim. Açıkçası, Apple'ın iPod Touch'taki web uygulamalarından sesi devre dışı bırakması için mantıklı bir teknik gerekçe yoktu. Bu yalnızca bir WiFi cihazıdır, pahalı bant genişliği ücretlerine tabi olabilecek bir telefon değildir, bu nedenle argümanın bu cihaz için sıfır değeri vardır. WiFi ağ yönetimine yardımcı olduklarını söyleyebilirler, ancak WiFi ağımdaki bant genişliğiyle ilgili herhangi bir sorun Apple'ın değil, benim endişemdir.

Ayrıca, gerçekten önemsedikleri şey istenmeyen, aşırı bant genişliği tüketimini önlemek olsaydı, kullanıcıların web uygulamaları seslerini seçmelerine izin verecek bir ayar sağlarlardı. Ayrıca, web sitelerinin diğer yollarla eşdeğer bant genişliği tüketmesini kısıtlamak için bir şeyler yaparlar. Ancak böyle bir kısıtlama yok. Bir web sitesi, arka planda büyük dosyaları defalarca indirebilir ve Apple bununla daha az ilgilenebilir. Son olarak, seslerin yine de indirilebileceğine inanıyorum, bu yüzden HİÇBİR BANT GENİŞLİĞİ GERÇEKTEN TASARRUF EDİLMEMİŞTİR! Apple, kullanıcı etkileşimi olmadan otomatik olarak oynamalarına izin vermiyor, bu da onları oyunlar için kullanılamaz hale getiriyor, ki bu elbette gerçek niyetleri.

Apple sesi engelledi çünkü HTML5 uygulamalarının yerel uygulamalar kadar yetenekli olabileceğini fark etmeye başladılar. Web Uygulamalarında ses istiyorsanız, Microsoft gibi rekabete aykırı davranmayı bırakması için Apple'a lobi yapmanız gerekir. Burada çözülebilecek teknik bir sorun yoktur.

Apple, çeşitli ticari nedenlerden ötürü iOS cihazlarında birçok HTML5 web standardını sinir bozucu bir şekilde reddediyor. Sonuçta, bir dokunma olayından önce ses dosyalarını önceden yükleyemez veya otomatik olarak çalamazsınız, bir seferde yalnızca bir ses çalar ve Ogg / Vorbis'i desteklemez. Ancak, ses üzerinde biraz daha fazla kontrole sahip olmanıza izin verecek şık bir çözüm buldum.

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

Temel olarak, ses dosyasını ilk dokunma olayında çalmaya başlarsınız, ardından hemen duraklatırsınız. Artık, soundHandle.play () ve soundHandle.pause () komutlarını Javascript'inizin tamamında kullanabilir ve dokunma olayları olmadan sesi kontrol edebilirsiniz. Mükemmel bir şekilde zamanlayabilirseniz, duraklamanın ses bittikten hemen sonra gelmesini sağlayın. Sonra bir dahaki sefere tekrar çaldığınızda, başa dönecektir. Bu, Apple'ın burada yaptığı tüm karışıklığı çözmeyecek, ancak bu tek bir çözüm.

İOS 4.2.1'den itibaren, ne sahte tıklama ne de .load () hilesi, herhangi bir iOS cihazında sesi otomatik oynatmak için çalışmayacaktır. Bildiğim tek seçenek kullanıcı aslında bir tıklama işlemi gerçekleştirmek ve tıklama olay işleyicisi oynatma başlamak sahip olmaktır olmadan (ajax, setTimeout, vs) hiçbir şey asenkron .play () çağrısını sarma.

Birisi yanılmıyorsam lütfen söyleyin. En son güncellemeden önce hem iPad hem de iPhone için çalışan boşluklar vardı ve hepsi kapanmış gibi görünüyor.

Sesin açıklandığı gibi çalışmadığını onaylıyorum (en azından 4.3.5 çalıştıran iPad'de). Spesifik sorun, sesin eşzamansız bir yöntemde (ajax, zamanlayıcı olayı, vb.) Yüklenmemesi, ancak önceden yüklenmişse çalmasıdır. Sorun, yükün kullanıcı tarafından tetiklenen bir olay üzerinde olması gerektiğidir. Dolayısıyla, kullanıcının oynatmayı başlatması için bir düğmeniz varsa, aşağıdaki gibi bir şey yapabilirsiniz:

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

Daha sonra, örneğin bir ajax isteğinde oynamak için şunları yapabilirsiniz:

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

En büyük çözüm değil, ancak özellikle suçlunun kullanıcı tarafından tetiklenmeyen bir olaydaki yükleme işlevi olduğunu bilmek yardımcı olabilir.

Düzenleme: Apple'ın açıklamasını buldum ve iOS 4+ üzerinde etki ediyor: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Sırasıyla HTMLAudioElement veya HTMLVideoElement olacak olan ses veya video etiketindeki .play () yönteminden önce .load () yöntemini çağırmayı deneyin. Benim için iPad üzerinde çalışmasının tek yolu buydu!

Otomatik oynatma, video veya ses etiketleri için iPad veya iPhone'da çalışmaz. Bu, kullanıcıların bant genişliğini korumak için Apple tarafından uygulanan bir kısıtlamadır.

Bana öyle geliyor ki, bu sorunun cevabı (en azından şimdi) Safari HTML5 belgelerinde açıkça belgelendi :

Hücresel Ağlar Üzerinden İndirmelerin Kullanıcı Kontrolü

Kullanıcının bir hücresel ağda olabileceği ve veri birimi başına ücretlendirilebileceği iOS'ta Safari'de (iPad dahil tüm cihazlar için), ön yükleme ve otomatik oynatma devre dışı bırakılır. Kullanıcı başlatana kadar hiçbir veri yüklenmez. Bu, play () veya load () yöntemi kullanıcı eylemi tarafından tetiklenmedikçe, kullanıcı oynatmayı başlatana kadar JavaScript play () ve load () yöntemlerinin de etkin olmadığı anlamına gelir. Başka bir deyişle, kullanıcı tarafından başlatılan bir Oynat düğmesi çalışır, ancak bir onLoad = "play ()" olayı çalışmaz.

Bu filmi oynatır: <input type="button" value="Play" onClick="document.myMovie.play()">

Bu iOS'ta hiçbir şey yapmaz: <body onLoad="document.myMovie.play()">

İOS4.2 (geliştirme) altında hızlı bir prototip web uygulaması geliştirirken bu konuda şaşkınlık yaşadınız. Çözüm aslında oldukça basit. Etiketi HTML sayfanızda halihazırda bulunduramadığınızı unutmayın, aslında etiketi belgeye dinamik olarak eklemeniz gerekir (bu örnekte bazı ekstra Javascript esnekliği için Prototype 1.7 kullanıldığını unutmayın):

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

Bir denetleyici belirlemediğiniz için, onu gizlemek / ekran dışına yerleştirmek için CSS ile aldatıcı bir şey yapmaya gerek yoktur.

Bu mükemmel çalışıyor gibi görünüyor.

Apple, standardı tamamen desteklemiyor, ancak bunun bir çözümü var. Onların gerekçesi rastgele ses çalmak sayfalarda inecek, belki de hücresel ağ tıkanıklığı olduğunu. Bu davranış, bir cihaz kablosuz bağlantıya geçtiğinde değişmez, belki tutarlılık için. Bu arada, bu sayfalar genellikle kötü bir fikirdir. Her web sayfasına bir film müziği koymaya çalışmamalısınız. Bu açıkça yanlış. :)

html5 sesi, bir kullanıcı eyleminin sonucu olarak başlatılırsa çalacaktır. Bir sayfanın yüklenmesi sayılmaz. Bu nedenle, web uygulamanızı hepsi bir arada sayfa uygulaması olacak şekilde yeniden yapılandırmanız gerekir. Ses çalan bir sayfayı açan bir bağlantı yerine, sayfayı değiştirmeden geçerli sayfada oynatmak için bu bağlantıya ihtiyacınız vardır. Bu "kullanıcı etkileşimi" kuralı, bir ses veya video öğesinde çağırabileceğiniz html5 yöntemleri için geçerlidir. Çağrılar, sayfa yüklemesinde otomatik olarak tetiklenirlerse herhangi bir etkiye neden olmadan geri döner, ancak olay işleyicilerinden çağrıldığında çalışırlar.

Benim çözümüm, önceki bir menüdeki gerçek bir dokunma olayından tetikleniyor. Elbette sizi belirli bir oyuncu arayüzünü kullanmaya zorlamazlar. Benim amacım için bu iyi çalışıyor. Kullanacak mevcut bir arayüzünüz yoksa afaiksiniz. Belki eğilme olaylarını ya da başka bir şeyi deneyebilirsiniz ...

Şunları kullanarak bir Ses öğesi oluşturursanız:

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

Ve şu suspendyolla bir olay dinleyicisi ekleyin :

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

Ardından dosyayı mobil Safari'ye (iPad veya iPhone) yükleyin, geliştirici konsolunda 'askıya alındı' ifadesinin oturum açıldığını göreceksiniz. HTML5 spesifikasyonuna göre bu, "Kullanıcı aracısı kasıtlı olarak şu anda medya verilerini almıyor, ancak tüm medya kaynağına indirilmiş değil."

Sonraki bir a.load () 'u çağırmak, "canplay" olayını test etmek ve sonra a.play () kullanmak, sesi otomatik olarak tetiklemek için uygun bir yöntem gibi görünüyor.

JQuery ile çalışır, Ipad v.5.1.1'de test edilmiştir

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

Video öğesini sayfaya eklemeniz / kaldırmanız gerekir.

Bunu, body öğesine ses tetiklemenize izin verilen tüm olaylar için bir olay işleyicisi ekleyerek ele aldım, bu da herhangi bir html ses öğesinin bir kez çalınmasını otomatik oynatmayı tetikler.

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

Bu işe yarıyor gibi görünüyor:

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

Uygulamasını burada görün: http://www.johncoles.co.uk/ipad/test/1.html (Arşivlendi)

İOS 4.2'den itibaren bu artık çalışmıyor. Afedersiniz.