html5 <audio>: how to use the built-in `next`, and `previous` controls on iOS 4.2 / Android 2.3

Question

Both on Gingerbread 2.3 and iOS 4.2+ the HTML5 <audio> tag generates an interface with next, and previous buttons.

How do I hook into those controls? It doesn't appear to be one of the HTML5 Media Events according to

• W3Schools
• HTML5 Spec.
• Safari Developer Library: Controlling Media With JavaScript

What JavaScript events do they emit or do they send HTTP ICECast messages? (No HTTP headers are sent on the button click)

For an example with screenshots, see https://coolaj86.com/demos/sandbox/html5-audio-tag.html

On Android:

• if you have gingerbread or better you'll see the controls in the webapp by default.

On iOS (iPhone, iPod, iPad):

• Begin playing the music sample on your iPod/iPad/iPhone
• Then click the button to "background" the app.
• Double click and swipe from left to right in the lower menu to access the player controls.

Note: play/pause control does work more or less as expected (setting the appropriate Content-Range HTTP header helps)

Bier

So, onplay / onpause don't fire when you use the "external" controls? – Endocarditis

Yes, and now I've revised the question to clarify. – Bier

Answer 1

As for iOS

From the webkit-help mailing list:

These Next/Previous buttons are not part of the standard HTML5 media player controls.

On iOS at least, they are simply there because the same controls are used for audio playback in web pages as other audio playback on the device. For web pages, they just go to the start and end for the track. You can't modify this behavior from JS.

Bier

Hmmm... I just realized that on the progress event I could check to see if it has gone back to 0 and then assume that that means the previous button was clicked. I wonder if I could detect that before the user hears the sound (I want to avoid nasty sharp cuts)... – Bier

Answer 2

AFAIK, mobile phones (android/iphone) open the default player when you attempt to play any media file using the new HTML 5 specification.

There's no way to control those buttons since the actual playback is done via the media player application.

Lathrope

This is the case for the older iOS < 4.2 and Android < 2.3. However, if you open the link above in the browsers specified, you'll see that it generates the interface as I described. Also, there are screenshots on the link showing the interfaces. – Bier

Answer 3

I don't know if intended, but so far, http://www.schillmania.com/projects/soundmanager2/demo/page-player/ works with the NEXT button while you are CURRENTLY PLAYING any audio. If the audio finishes, the NEXT button stops working. And the PREVIOUS button doesn't go to previous song, but restarts current song.

I don't know if Scott (the creator) has coded this, or not. I've tried debugging that page JS files, and didn't find any next/prev logic done.

Clearly, it should be possible. It's working kind of buggy and there is no documentation, but let's build it!

What do the buttons do?

• When playing:
  • Next: go to last ms of the audio, so it triggers onfinish event.
  • Prev: go to first ms of the audio, means nothing, plays again from start.
• When not playing: (depends on if audio stopped or never played)
  • Next: Nothing
  • Prev: Nothing

:/ So far, that's the info I have. I'm trying to monitorEvents without success, it should be triggering some event.

Peabody

The link is broken. What devices does that work on? Oops, I lied. The link isn't broken, it just didn't work for me the first time. Odd. – Bier

I am talking about iOS, I don't know if Android has the controls... BTW the question is about iOS only. – Peabody