8

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:

  • 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)

coolaj86
  • 74,004
  • 20
  • 105
  • 125

3 Answers3

2

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.

coolaj86
  • 74,004
  • 20
  • 105
  • 125
  • 2
    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)... – coolaj86 Jul 26 '12 at 22:24
1

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.

Tom Roggero
  • 5,777
  • 1
  • 32
  • 39
  • 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. – coolaj86 Jul 26 '12 at 22:15
  • I am talking about iOS, I don't know if Android has the controls... BTW the question is about iOS only. – Tom Roggero Jul 27 '12 at 03:54
1

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.

tiagoboldt
  • 2,426
  • 1
  • 24
  • 30
  • 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. – coolaj86 Apr 04 '11 at 16:53