HTML5 के साथ iPad पर ऑटोप्ले ऑडियो फ़ाइलें

Question 1

मैं एक iPad पर सफारी में ऑटोप्ले के लिए एक ऑडियो फ़ाइल प्राप्त करने की कोशिश कर रहा हूं। अगर मैं अपने मैक पर सफारी का उपयोग करते हुए पृष्ठ पर जाता हूं, तो यह ठीक है। IPad पर, ऑटोप्ले काम नहीं करता है।

Question 2

अद्यतन: यह एक हैक है और यह अब IOS 4.X और इसके बाद के संस्करण पर काम नहीं कर रहा है। यह एक IOS 3.2.X पर काम करता था।

यह सच नहीं है। Apple IPad पर वीडियो और ऑडियो को ऑटोप्ले नहीं करना चाहता क्योंकि ट्रैफ़िक के उच्च उपयोग के कारण आप मोबाइल नेटवर्क पर उपयोग कर सकते हैं। मैं ऑनलाइन सामग्री के लिए ऑटोप्ले का उपयोग नहीं करूंगा। ऑफ़लाइन HTML साइटों के लिए यह एक बड़ी विशेषता है और मैंने इसके लिए इसका उपयोग किया है।

यहाँ एक "जाली नकली क्लिक" समाधान है: 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>

यह मेरा स्रोत नहीं है। मैंने कुछ समय पहले यह पाया है और IOS 3.2.X के साथ एक IPad और IPhone पर कोड का परीक्षण किया है।

Question 3

मैं इस बात पर भी जोर देना चाहूंगा कि आप ऐसा नहीं कर सकते इसका कारण एक व्यावसायिक निर्णय है जो कि Apple ने बनाया है, न कि तकनीकी निर्णय का। बुद्धि के लिए, ऐप्पल टच पर वेब एप्लिकेशन से ध्वनि को अक्षम करने के लिए एप्पल के लिए कोई तर्कसंगत तकनीकी औचित्य नहीं था। यह केवल एक वाईफाई डिवाइस है, न कि एक फोन जो महंगे बैंडविड्थ शुल्क लगा सकता है, ताकि तर्क में उस डिवाइस के लिए शून्य योग्यता हो। वे कह सकते हैं कि वे वाईफाई नेटवर्क प्रबंधन में मदद कर रहे हैं, लेकिन मेरे वाईफाई नेटवर्क पर बैंडविड्थ के साथ कोई भी समस्या मेरी चिंता है, न कि एप्पल की।

इसके अलावा, अगर वे वास्तव में परवाह करते थे तो अवांछित, अत्यधिक बैंडविड्थ की खपत को रोक रहे थे, वे उपयोगकर्ताओं को वेब एप्लिकेशन ध्वनियों में ऑप्ट-इन करने की अनुमति देने के लिए एक सेटिंग प्रदान करेंगे। इसके अलावा, वे वेब साइटों को अन्य माध्यमों से बराबर बैंडविड्थ के उपभोग से प्रतिबंधित करने के लिए कुछ करेंगे। लेकिन इस तरह के प्रतिबंध नहीं हैं। एक वेब साइट पृष्ठभूमि में बार-बार बड़ी फ़ाइलों को डाउनलोड कर सकती है और Apple इस बारे में कम परवाह कर सकता है। और अंत में, मेरा मानना है कि ध्वनियों को किसी भी तरह से डाउनलोड किया जा सकता है, इसलिए NO BANDWIDTH IS ACTUALLY SAVED है! Apple सिर्फ उन्हें उपयोगकर्ता की बातचीत के बिना स्वचालित रूप से खेलने की अनुमति नहीं देता है, जिससे उन्हें गेम के लिए अनुपयोगी बना दिया जाता है, जो निश्चित रूप से उनका वास्तविक इरादा है।

Apple ने ध्वनि को अवरुद्ध कर दिया क्योंकि उन्होंने यह नोटिस करना शुरू कर दिया था कि HTML5 ऐप्स देशी ऐप्स की तरह ही सक्षम हो सकते हैं, यदि ऐसा नहीं है। यदि आप वेब ऐप्स में ध्वनि चाहते हैं, तो आपको Microsoft की तरह प्रतिस्पर्धा-विरोधी होने से रोकने के लिए Apple की पैरवी करने की आवश्यकता है। कोई तकनीकी समस्या नहीं है जिसे यहां ठीक किया जा सकता है।

Question 4

Apple विभिन्न व्यावसायिक कारणों से अपने iOS उपकरणों पर कई HTML5 वेब मानकों को झुठलाता है। अंत में, आप किसी टच इवेंट से पहले साउंड फाइल्स को प्री-लोड या ऑटो-प्ले नहीं कर सकते हैं, यह एक समय में केवल एक ही साउंड बजाता है, और यह 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 () कमांड का उपयोग कर सकते हैं और बिना टच इवेंट के ऑडियो को नियंत्रित कर सकते हैं। यदि आप इसे पूरी तरह से समय दे सकते हैं, तो ध्वनि समाप्त होने के बाद बस रोकना सही है। फिर अगली बार जब आप इसे फिर से खेलते हैं, तो यह शुरुआत में वापस आ जाएगा। यह सभी गंदगी को हल नहीं करेगा जो Apple ने यहां बनाया है, लेकिन यह एक समाधान है।

Question 5

IOS 4.2.1 के रूप में, किसी भी iOS डिवाइस पर ऑडियो को ऑटोप्ले करने के लिए न तो नकली क्लिक और न ही (.load) ट्रिक काम करेगा। एकमात्र विकल्प जो मुझे पता है कि उपयोगकर्ता वास्तव में एक क्लिक एक्शन करता है और क्लिक इवेंट ईवेंट हैंडलर में .play (ajax, setTimeout, आदि) में .play () कॉल को लपेटे बिना प्लेबैक शुरू करता है ।

अगर मुझसे कोई गलती हुई है तो कृपया मुझे बताएं। मैंने सबसे हाल के अपडेट से पहले iPad और iPhone दोनों के लिए काम कर रहे थे, और वे सभी ऐसे दिखते हैं जैसे वे बंद हो गए हैं।

Question 6

मैं पुष्टि करता हूं कि ऑडियो वर्णित नहीं है (कम से कम iPad पर 4.3.5 चल रहा है)। विशिष्ट मुद्दा यह है कि ऑडियो एक अतुल्यकालिक विधि (अजाक्स, टाइमर घटना, आदि) में लोड नहीं होगा, लेकिन अगर यह पहले से लोड किया गया था तो यह खेल जाएगा। समस्या यह है कि लोड उपयोगकर्ता-ट्रिगर घटना पर होना चाहिए। इसलिए अगर आपके पास खेलने के लिए उपयोगकर्ता के लिए एक बटन हो सकता है तो आप कुछ ऐसा कर सकते हैं:

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

फिर इसे खेलने के लिए, जैसे कि अजाक्स अनुरोध में, आप कर सकते हैं

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

Question 7

ऑडियो या वीडियो टैग पर .play () विधि से पहले .load () विधि को कॉल करने का प्रयास करें ... जो क्रमशः HTMLAudioElement या HTMLVideoElement होगा। यह मेरे लिए iPad पर काम करने का एकमात्र तरीका था!

Question 8

ऑटोप्ले वीडियो या ऑडियो टैग के लिए iPad या iPhone पर काम नहीं करता है। यह उपयोगकर्ताओं द्वारा बैंडविड्थ को बचाने के लिए Apple द्वारा स्थापित प्रतिबंध है।

Question 9

यह मुझे लगता है कि इस प्रश्न का उत्तर है (कम से कम अभी) स्पष्ट रूप से सफारी एचटीएमएल 5 डॉक्स पर प्रलेखित :

सेलुलर नेटवर्क पर डाउनलोड का उपयोगकर्ता नियंत्रण

आईओएस पर सफारी में (आईपैड सहित सभी उपकरणों के लिए), जहां उपयोगकर्ता एक सेलुलर नेटवर्क पर हो सकता है और प्रति डेटा यूनिट चार्ज किया जा सकता है, प्रीलोड और ऑटोप्ले अक्षम हैं। जब तक उपयोगकर्ता इसे आरंभ नहीं करता, तब तक कोई डेटा लोड नहीं किया जाता है। इसका अर्थ है कि उपयोगकर्ता द्वारा प्लेबैक शुरू करने तक जावास्क्रिप्ट प्ले () और लोड () विधियां भी निष्क्रिय हैं, जब तक कि उपयोगकर्ता की कार्रवाई से नाटक (या लोड) विधि चालू नहीं होती है। दूसरे शब्दों में, एक उपयोगकर्ता द्वारा शुरू किया गया प्ले बटन काम करता है, लेकिन एक onLoad = "play ()" ईवेंट नहीं होता है।

यह फिल्म निभाता है: <input type="button" value="Play" onClick="document.myMovie.play()">

यह iOS पर कुछ नहीं करता है: <body onLoad="document.myMovie.play()">

Question 10

IOS4.2 (देव बिल्ड) के तहत एक त्वरित प्रोटोटाइप वेब ऐप विकसित करने के दौरान इस पर हैरान हो गए हैं। समाधान वास्तव में काफी सरल है। ध्यान दें कि आप पहले से ही अपने HTML पेज में टैग नहीं देख सकते हैं, आपको वास्तव में दस्तावेज़ में टैग को गतिशील रूप से सम्मिलित करने की आवश्यकता है (ध्यान दें कि यह उदाहरण कुछ अतिरिक्त जावास्क्रिप्ट स्नैज़नेस के लिए प्रोटोटाइप 1.7 का उपयोग करता है):

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

जैसा कि आपने कोई नियंत्रक सेट नहीं किया है, इसे छिपाने के लिए सीएसएस के साथ कुछ भी मुश्किल करने की आवश्यकता नहीं होनी चाहिए / इसे ऑफ-स्क्रीन स्थिति।

यह पूरी तरह से काम करने लगता है।

Question 11

Apple मानक का पूरी तरह से समर्थन नहीं करता है, लेकिन वर्कअराउंड है। उनका औचित्य सेलुलर नेटवर्क की भीड़ है, शायद इसलिए कि आप उन पृष्ठों पर उतरेंगे जो यादृच्छिक ऑडियो खेलते हैं। जब कोई डिवाइस वाईफाई पर चला जाता है, तो शायद यह व्यवहार नहीं बदलता है। वैसे, उन पृष्ठों को आमतौर पर एक बुरा विचार है। आपको हर वेब पेज पर साउंडट्रैक डालने की कोशिश नहीं करनी चाहिए। यह सिर्फ गलत है। :)

अगर यह एक उपयोगकर्ता कार्रवाई के परिणाम के रूप में शुरू किया गया है तो html5 ऑडियो खेलेंगे। पृष्ठ लोड करने की गिनती नहीं है। इसलिए आपको ऑल-इन-वन-पेज ऐप बनने के लिए अपने वेब ऐप को रिस्ट्रक्चर करना होगा। एक लिंक के बजाय जो एक पृष्ठ खोलता है जो ऑडियो चलाता है, आपको पृष्ठ बदलने के बिना, वर्तमान पृष्ठ पर इसे चलाने के लिए उस लिंक की आवश्यकता है। यह "उपयोगकर्ता इंटरैक्शन" नियम HTML5 विधियों पर लागू होता है जिन्हें आप ऑडियो या वीडियो तत्व पर कॉल कर सकते हैं। यदि वे स्वचालित रूप से पृष्ठ लोड पर निकाल दिए जाते हैं, तो कॉल बिना किसी प्रभाव के वापस आ जाती है, लेकिन इवेंट हैंडलर से कॉल करने पर वे काम करते हैं।

Question 12

मेरा समाधान एक पूर्व मेनू में एक वास्तविक स्पर्श घटना से ट्रिगर है। वे आपको निश्चित रूप से एक विशिष्ट खिलाड़ी इंटरफ़ेस का उपयोग करने के लिए मजबूर नहीं करते हैं। मेरे उद्देश्यों के लिए, यह अच्छी तरह से काम करता है। यदि आपके पास उपयोग करने के लिए कोई मौजूदा इंटरफ़ेस नहीं है, तो आप बगावत कर रहे हैं। शायद आप झुकाव घटनाओं या कुछ और कोशिश कर सकते हैं ...

Question 13

यदि आप एक ऑडियो तत्व का उपयोग कर बनाते हैं:

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

और के suspendमाध्यम से एक घटना श्रोता जोड़ें :

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

और फिर फ़ाइल को मोबाइल सफारी (iPad या iPhone) में लोड करें, आपको डेवलपर कंसोल में 'निलंबित' लॉग इन दिखाई देगा। HTML5 युक्ति के अनुसार, इसका मतलब है, "उपयोगकर्ता एजेंट जानबूझकर वर्तमान में मीडिया डेटा नहीं ला रहा है, लेकिन पूरे मीडिया संसाधन को डाउनलोड नहीं किया गया है।"

बाद में a.load (), "कैनप्ले" इवेंट के लिए परीक्षण और फिर a.play () का उपयोग करके ध्वनि को ट्रिगर करने वाले ऑटो के लिए एक उपयुक्त विधि की तरह लगता है।

Question 14

JQuery के साथ काम करता है, Ipad v.5.1.1 पर परीक्षण किया गया

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

आपको पृष्ठ से वीडियो तत्व को जोड़ना / हटाना होगा।

Question 15

मैंने इसे उन सभी घटनाओं के लिए एक ईवेंट हैंडलर संलग्न करके नियंत्रित किया, जिनके लिए आपको बॉडी एलिमेंट पर ऑडियो को ट्रिगर करने की अनुमति दी जाती है, जो किसी भी 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');
            });
    });
}

Question 16

यह काम करने लगता है:

<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 के रूप में यह अब काम नहीं करता है। माफ़ करना।