简体   繁体   中英

Looping HTML5 audio on the iPhone

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.

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 (ie "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>

关于什么:

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

iPhone OS 3.0不完全支持<audio>标签 - 所有它将用它完成QuickTime风格的全部播放。

您可以使用老式的嵌入标记来完成,但我不知道Mobile Safari是否会遵循其循环属性。

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM