Looping HTML5 audio on the iPhone_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-26 04:55 出处：网络

I\'m trying to make a HTML5 webapp that simply plays a sound over and over and over again, on my iPhone. I don\'t know any Obj-C to do it natively.开发者_StackOverflow中文版

相关专题：audio

I'm trying to make a HTML5 webapp that simply plays a sound over and over and over again, on my iPhone. I don't know any Obj-C to do it natively.开发者_StackOverflow中文版

What I have works fine, but the sound only plays once:

<!DOCTYPE html>
<html>
    <head>
        <title>noisemaker!</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
    </head>
    <body>
        <audio src="noise.mp3" autoplay controls loop></audio>
    </body>
</html>

Is there a way to either bypass the QuickTime audio screen and loop it in the webpage, or get the QuickTime audio screen to loop the sound?

I found that the "loop" attribute does not seem to fully work in the latest implementation of the HTML5 audio element on the iPhone (iOS 4.0). I found this to be a workaround:

<audio src="noise.mp3" onended="this.play();" controls="controls" autobuffer></audio>

I found that you have to not put "loop" in the above, or the "onended" event seems not to trigger (i.e. "loop" is partially implemented).

Note that "autoplay" is intentionally disabled on the iPhone.

It also seems that the "volume" attribute is not fully implemented at this time as well.

Note that with iOS 4 audio is played without the full-screen QT player.

Have you tried using key/value pairs for the attributes. I know you SHOULD be able to just specify the attr, but just to play devil's advocate. Try:

<audio src="noise.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>

iPhone OS 3.0 doesn't support the <audio> tag completely - all it will do with it is play it in full in the QuickTime style.

What about:

<audio src="noise.mp3" autoplay="" controls="" onended="this.play()"></audio>

You can do it with an old-fashioned embed tag, but I have no idea if Mobile Safari will honor its loop attribute.

Playing media like video or sounds are not allowed (so far). If you want to play video or audio, the iPhone will open it in an external (default) player. When the player is open, you do not have any control over the webpage untill the user shut-down the external player or the video/sound has stopped by itself.