Autoplay audio files on an iPad with HTML5

2019-01-01 14:43发布

站内问答 / Html5
1177 15 6

I'm trying to get an audio file to autoplay in Safari on an iPad. If I go to the page using Safari on my Mac, it's fine. On the iPad, autoplay does not work.

15条回答
荒废的爱情
2楼-- · 2019-01-01 15:25

As of iOS 4.2.1, neither the fake click nor the .load() trick will work to autoplay audio on any iOS device. The only option I know of is to have the user actually perform a click action and begin playback in the click event handler without wrapping the .play() call in anything asynchronous (ajax, setTimeout, etc).

Someone please tell me if I'm mistaken. I had working loopholes for both iPad and iPhone before the most recent update, and all of them look like they've been closed.

查看更多
0人赞 添加讨论(0) 举报
萌妹纸的霸气范
3楼-- · 2019-01-01 15:25

Have puzzled over this whilst developing a quick prototype web app under iOS4.2 (dev build). Solution is actually quite simple. Note that you can't seem to already have the tag in your HTML page, you actually need to insert the tag into the document dynamically (note this example uses Prototype 1.7 for some extra Javascript snazziness):

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

As you've not set a controller, there shouldn't be any need to do anything tricksy with CSS to hide it / position it off-screen.

This seems to work perfectly.

查看更多
0人赞 添加讨论(0) 举报
其实，你不懂
4楼-- · 2019-01-01 15:26

I confirm that the audio isn't working as described (at least on iPad running 4.3.5). The specific issue is the audio won't load in an asynchronous method (ajax, timer event, etc) but it will play if it was preloaded. The problem is the load has to be on a user-triggered event. So if you can have a button for the user to initiate the playing you can do something like:

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

Then to play it, eg in an ajax request, you can do

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

Not the greatest solution, but it may help, especially knowing the culprit is the load function in a non-user-triggered event.

Edit: I found Apple's explanation, and it affects iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

查看更多
0人赞 添加讨论(0) 举报
初与友歌
5楼-- · 2019-01-01 15:29

Try calling the .load() method before the .play() method on the audio or video tag... which will be HTMLAudioElement or HTMLVideoElement respectively. That was the only way it would work on the iPad for me!

查看更多
0人赞 添加讨论(0) 举报
查无此人
6楼-- · 2019-01-01 15:29

I handled this by attaching an event handler for all the events for which you are allowed to trigger audio to the body element which triggers any html audio elements with autoplay to play once.

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');
            });
    });
}
查看更多
0人赞 添加讨论(0) 举报
唯独是你
7楼-- · 2019-01-01 15:30

This seems to work:

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

See it in action here: http://www.johncoles.co.uk/ipad/test/1.html (Archived)

As of iOS 4.2 this no-longer works. Sorry.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)