HTML5로 iPad에서 오디오 파일 자동 재생

HTML5로 iPad에서 오디오 파일 자동 재생

iPad의 Safari에서 자동 재생할 오디오 파일을 가져오려고 합니다.제가 맥에서 사파리를 이용해서 페이지로 가면 괜찮습니다.아이패드에서는 자동 재생이 되지 않습니다.

당신이 이것을 할 수 없는 이유는 애플이 내린 사업상의 결정이지 기술적인 결정이 아니라는 점도 강조하고 싶습니다.말하자면 애플이 아이팟 터치의 웹 앱에서 소리를 낼 수 없게 할 합리적 기술적 정당성이 존재하지 않았습니다.그것은 WiFi 장치일 뿐, 값비싼 대역폭 요금이 발생할 수 있는 전화기가 아닙니다. 따라서 이 논쟁은 해당 장치에 아무런 장점이 없습니다.그들은 WiFi 네트워크 관리를 돕고 있다고 말할지 모르지만, 제 WiFi 네트워크의 대역폭과 관련된 모든 문제는 Apple의 문제가 아니라 제 관심사입니다.

또한, 만약 그들이 정말로 신경쓰는 것이 원치 않는 과도한 대역폭 소비를 막는 것이었다면, 그들은 사용자들이 웹 앱 사운드를 선택할 수 있도록 하는 설정을 제공할 것입니다.또한, 그들은 웹사이트들이 다른 수단으로 동등한 대역폭을 소비하는 것을 제한하는 조치를 취할 것입니다.하지만 그런 제한은 없습니다.웹 사이트는 백그라운드에서 계속해서 거대한 파일을 다운로드할 수 있고 애플은 이에 대해 신경 쓰지 않을 수 있습니다.그리고 마지막으로, 저는 사운드가 어쨌든 다운로드 될 수 있기 때문에 실제로 대역폭이 저장되지 않는다고 믿습니다!애플은 사용자 상호 작용 없이 자동으로 플레이하는 것을 허용하지 않을 뿐이며, 이로 인해 게임에 사용할 수 없게 됩니다. 물론 이것이 그들의 진정한 의도입니다.

애플이 소리를 차단한 것은 HTML5 앱이 네이티브 앱과 마찬가지로 가능한 기능을 제공할 수 있다는 것을 알아차리기 시작했기 때문입니다.웹 앱에서 소리를 듣고 싶다면 애플이 마이크로소프트처럼 반경쟁적이지 않도록 로비를 해야 합니다.여기서 고칠 수 있는 기술적인 문제는 없습니다.

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

그것은 실이 아니에요.애플은 모바일 네트워크에서 사용할 수 있는 트래픽 양이 많기 때문에 아이패드에서 비디오와 오디오를 자동으로 재생하고 싶어하지 않습니다.저는 온라인 컨텐츠에 자동 재생을 사용하지 않을 것입니다.오프라인 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로 아이패드와 아이폰에서 코드를 테스트했습니다.

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() 명령을 사용하여 터치 이벤트 없이 오디오를 제어할 수 있습니다.시간을 완벽하게 맞출 수 있다면, 소리가 끝난 후 바로 일시정지 상태로 들어가도록 하세요.다음에 다시 재생하면 처음으로 되돌아갑니다.이것이 애플이 여기서 저지른 모든 혼란을 해결할 수는 없겠지만, 그것이 하나의 해결책입니다.

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

제가 잘못 알고 있다면 누가 말해주세요.가장 최근 업데이트 전에 아이패드와 아이폰 모두 작동하는 허점이 있었는데, 모두 닫혀있는 것처럼 보입니다.

(적어도 4.3.5를 실행하는 iPad에서는) 오디오가 설명대로 작동하지 않는 것을 확인합니다.특정한 문제는 오디오가 비동기 방식(jax, timer event 등)으로 로드되지 않지만 사전 로드된 경우 재생된다는 것입니다.문제는 부하가 사용자가 트리거한 이벤트에 있어야 한다는 것입니다.따라서 사용자가 재생을 시작할 수 있는 버튼을 가질 수 있다면 다음과 같은 작업을 수행할 수 있습니다.

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-Specific 고려사항/Device-Specific 고려사항.html

오디오 또는 비디오 태그의 .play() 메서드 앞에 .load() 메서드를 호출합니다...각각 HTMLOudioElement 또는 HTMLVideoElement가 될 것입니다.그것이 저를 위해 아이패드에서 작동할 수 있는 유일한 방법이었습니다!

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

이 질문에 대한 답은 (적어도 지금은) Safari HTML5 문서에 분명히 기록되어 있는 것 같습니다.

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

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

동영상 재생:<input type="button" value="Play" onClick="document.myMovie.play()">

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

iOS 4.2 (dev build) 하에서 빠른 프로토타입 웹 앱을 개발하는 동안 이 문제에 대해 고민해 보았습니다.해결책은 사실 꽤 간단합니다.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();

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

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

애플은 표준을 완전히 지원하지는 않지만 해결책이 있습니다.그들의 정당성은 아마도 당신이 무작위 오디오를 재생하는 페이지에 착륙할 것이기 때문에 셀룰러 네트워크 혼잡입니다.이 동작은 장치가 와이파이에 연결될 때, 아마도 일관성을 위해 변하지 않습니다.그건 그렇고, 어쨌든 그 페이지들은 보통 나쁜 생각입니다.모든 웹 페이지에 사운드트랙을 넣으려고 해서는 안 됩니다.그건 잘못된 것입니다.:)

html5 오디오는 사용자 작업의 결과로 시작되면 재생됩니다.페이지 로드는 계산되지 않습니다.따라서 웹 앱을 일체형 한 페이지 앱으로 재구성해야 합니다.오디오를 재생하는 페이지를 여는 링크 대신, 페이지 변경 없이 현재 페이지에서 재생하려면 해당 링크가 필요합니다.이 "사용자 상호 작용" 규칙은 오디오 또는 비디오 요소에서 호출할 수 있는 html5 메서드에 적용됩니다.호출은 페이지 로드 시 자동으로 실행되지만 이벤트 핸들러에서 호출되면 아무런 영향 없이 반환됩니다.

다음을 사용하여 오디오 요소를 만드는 경우:

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

그리고 a를 추가.suspend이벤트 수신기 경유:

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

그런 다음 모바일 Safari(iPad 또는 iPhone)에 파일을 로드하면 'Suspended'가 개발자 콘솔에 로그인되는 것을 볼 수 있습니다.HTML5 사양에 따르면 이는 "사용자 에이전트가 의도적으로 현재 미디어 데이터를 가져오지 않지만 전체 미디어 리소스가 다운로드되지 않았습니다."를 의미합니다.

후속 a.load()를 호출하고 "canplay" 이벤트를 테스트한 다음 a.play()를 사용하면 사운드를 자동으로 트리거하는 데 적합한 방법으로 보입니다.

내 솔루션은 이전 메뉴의 실제 터치 이벤트에서 트리거됩니다.물론 특정 플레이어 인터페이스를 사용하도록 강요하는 것은 아닙니다.제가 보기에는, 이게 잘 돼요.사용할 수 있는 기존 인터페이스가 없으면 버그가 발생하는 것입니다.틸트 이벤트 같은 거 해볼 수도 있고요

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

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

하울러를 사용할 수 있습니다.html5 옵션이 true로 설정된 JS

작동하는 것 같습니다.

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

언급URL : https://stackoverflow.com/questions/3009888/autoplay-audio-files-on-an-ipad-with-html5