CODEWITHSUNDEEP
iphoneandroidipadios4ipod-touch
coolaj86
coolaj86

Reputation: 77044

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

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

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:

On iOS (iPhone, iPod, iPad):

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

Upvotes: 8

Views: 3115

Answers (3)

tomasdev
tomasdev

Reputation: 5997

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.

Upvotes: 1

tiagoboldt
tiagoboldt

Reputation: 2426

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.

Upvotes: 1

coolaj86
coolaj86

Reputation: 77044

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.

Upvotes: 2

Related Questions