HTML5를 사용하여 iPad에서 오디오 파일 자동 재생

iPad의 Safari에서 자동 재생되도록 오디오 파일을 가져 오려고합니다. Mac에서 Safari를 사용하여 페이지로 이동해도 괜찮습니다. iPad에서는 자동 재생이 작동하지 않습니다.

업데이트 : 이것은 해킹이며 IOS 4.X 이상에서 더 이상 작동하지 않습니다. 이것은 IOS 3.2.X에서 작동했습니다.

그것은 사실이 아닙니다. Apple은 모바일 네트워크에서 사용할 수있는 트래픽이 많기 때문에 IPad에서 비디오 및 오디오 자동 재생을 원하지 않습니다. 온라인 콘텐츠에는 자동 재생을 사용하지 않습니다. 오프라인 HTML 사이트의 경우 훌륭한 기능이며 제가 사용했던 것입니다.

다음은 "javascript 가짜 클릭"솔루션입니다. 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에서 코드를 테스트했습니다.

또한이를 수행 할 수없는 이유는 기술적 인 결정이 아니라 Apple이 내린 비즈니스 결정이라는 점을 강조하고 싶습니다. 다시 말해, 애플이 아이팟 터치에서 웹 앱의 사운드를 비활성화 할 수있는 합리적인 기술적 정당성은 없었다. 이것은 WiFi 장치 일 뿐이며 값 비싼 대역폭 요금이 부과 될 수있는 전화기가 아니므로이 주장은 해당 장치에 대한 장점이 없습니다. 그들은 WiFi 네트워크 관리를 돕고 있다고 말할 수 있지만 WiFi 네트워크의 대역폭 문제는 Apple이 아니라 내 관심사입니다.

또한 그들이 정말로 염려하는 것이 원치 않는 과도한 대역폭 소비를 방지하는 것이라면 사용자가 웹 앱 사운드를 옵트 인 할 수있는 설정을 제공합니다. 또한 웹 사이트가 다른 방법으로 동등한 대역폭을 사용하지 못하도록 제한하는 조치를 취합니다. 그러나 그러한 제한은 없습니다. 웹 사이트는 백그라운드에서 계속해서 거대한 파일을 다운로드 할 수 있으며 Apple은 그것에 대해 덜 신경 쓸 수 있습니다. 그리고 마지막으로, 어쨌든 사운드를 다운로드 할 수 있다고 믿으므로 실제로 대역폭이 저장되지 않습니다! Apple은 사용자 상호 작용없이 자동으로 플레이하는 것을 허용하지 않으므로 게임에 사용할 수 없게됩니다.

Apple은 HTML5 앱이 기본 앱만큼 성능이 더 좋다는 것을 알기 시작했기 때문에 소리를 차단했습니다. Web Apps에서 사운드를 원하면 Microsoft와 같이 반 경쟁적인 태도를 멈추도록 Apple에 로비해야합니다. 여기서 수정할 수있는 기술적 문제는 없습니다.

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이 여기에서 만든 모든 혼란을 해결하지는 못하지만 하나의 해결책입니다.

iOS 4.2.1부터는 가짜 클릭이나 .load () 트릭이 모든 iOS 기기에서 오디오를 자동 재생하는 데 작동하지 않습니다. 내가 아는 유일한 옵션은 사용자가 실제로 클릭 동작을 수행하고 클릭 이벤트 핸들러에서 재생을 시작하는 것입니다 않고 하고 .play () 호출을 비동기식 (ajax, setTimeout 등)으로 래핑 것입니다.

누군가 내가 틀렸다면 말해주세요. 최신 업데이트 이전에 iPad와 iPhone 모두에 대한 작업 허점이 있었고 모두 닫힌 것처럼 보입니다.

오디오가 설명 된대로 작동하지 않음을 확인합니다 (적어도 4.3.5를 실행하는 iPad에서). 특정 문제는 오디오가 비동기 메서드 (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

audio 또는 video 태그의 .play () 메서드 앞에 .load () 메서드를 호출 해보세요. 각각 HTMLAudioElement 또는 HTMLVideoElement가됩니다. 그것은 나에게 iPad에서 작동하는 유일한 방법이었습니다!

자동 재생은 비디오 또는 오디오 태그에 대해 iPad 또는 iPhone에서 작동하지 않습니다. 이는 사용자 대역폭을 절약하기 위해 Apple에서 설정 한 제한 사항입니다.

이 질문에 대한 대답은 (적어도 지금은) Safari HTML5 문서에 명확하게 문서화되어있는 것 같습니다.

셀룰러 네트워크를 통한 다운로드의 사용자 제어

사용자가 셀룰러 네트워크에 있고 데이터 단위당 요금이 부과 될 수있는 iOS의 Safari (iPad를 포함한 모든 기기)에서 사전로드 및 자동 재생이 비활성화됩니다. 사용자가 시작할 때까지 데이터가로드되지 않습니다. 즉, 사용자 작업에 의해 play () 또는 load () 메서드가 트리거되지 않는 한 JavaScript play () 및 load () 메서드도 사용자가 재생을 시작할 때까지 비활성화됩니다. 즉, 사용자가 시작한 재생 버튼은 작동하지만 onLoad = "play ()"이벤트는 작동하지 않습니다.

이것은 영화를 재생합니다 : <input type="button" value="Play" onClick="document.myMovie.play()">

iOS에서는 아무것도하지 않습니다. <body onLoad="document.myMovie.play()">

iOS4.2 (dev build)에서 빠른 프로토 타입 웹 앱을 개발하는 동안이 문제에 대해 당황했습니다. 솔루션은 실제로 매우 간단합니다. HTML 페이지에 이미 태그가있는 것 같지는 않지만 실제로 태그를 문서에 동적으로 삽입해야합니다 (이 예제에서는 약간의 추가 자바 스크립트를 위해 Prototype 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();

컨트롤러를 설정하지 않았으므로 CSS를 숨기거나 화면 밖으로 배치하기 위해 까다로운 작업을 수행 할 필요가 없습니다.

이것은 완벽하게 작동하는 것 같습니다.

Apple은 표준을 완전히 지원하지는 않지만 해결 방법이 있습니다. 그들의 정당성 은 셀룰러 네트워크 혼잡입니다. 아마도 임의의 오디오를 재생하는 페이지에 도달하기 때문일 것입니다. 이 동작은 일관성을 위해 기기가 Wi-Fi에 연결될 때 변경되지 않습니다. 그건 그렇고, 그 페이지는 어쨌든 일반적으로 나쁜 생각입니다. 모든 웹 페이지에 사운드 트랙을 넣으려고해서는 안됩니다. 그건 틀렸어요. :)

html5 오디오는 사용자 작업의 결과로 시작되면 재생됩니다. 페이지로드는 포함되지 않습니다. 따라서 웹 앱을 올인원 페이지 앱으로 재구성해야합니다. 오디오를 재생하는 페이지를 여는 링크 대신 페이지 변경없이 현재 페이지에서 재생하려면 해당 링크가 필요합니다. 이 "사용자 상호 작용"규칙은 오디오 또는 비디오 요소에서 호출 할 수있는 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 ()를 사용하면 사운드를 자동으로 트리거하는 데 적합한 방법처럼 보입니다.

Ipad v.5.1.1에서 테스트 된 jQuery와 함께 작동합니다.

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

페이지에서 비디오 요소를 추가 / 제거해야합니다.

자동 재생이있는 모든 html 오디오 요소를 한 번 재생하도록 트리거하는 body 요소에 오디오를 트리거 할 수있는 모든 이벤트에 대한 이벤트 핸들러를 연결하여이를 처리했습니다.

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부터는 더 이상 작동하지 않습니다. 죄송합니다.