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)

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.

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.

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.