I want to isolate the ‘play’, ‘pause’, and ‘stop’ functions for my HTML5 player. I want to put those in random places on my homepage (i.e., stop at the top left, play at the bottom-right, and pause at the middle of the page). I also want to be able to isolate the tracker. So, for example, have the tracker on the bottom-left of the page.
Can anyone tell me what it would take to isolate out one of the controls? So, for example, “If the user clicks anywhere in div, “bottom-right”, the audio will start to “play”. The tracker, bottom-left, will start to track, and the stop and pause buttons will go to ready state….
I don’t believe you can affect the controls of a browser’s native audio player, at least to the extent you want to, through CSS or JavaScript. Therefore, you’ll need to omit the controls attribute from your audio tag (which will give you a player with no controls) and write the controls, and the logic behind the controls, yourself.
This tutorial should give you enough to get started. However, you should note that, depending on the level of functionality you require, this may not be a trivial task.
You might also consider looking for a third-party library which supports the level of UI customisation you require. I haven’t used it myself but have heard good things about audio.js.
[Edit]
This HTML5 audio test suite is quite handy as a summary of the API for the audio element and has links through to the appropriate entry in the W3 specification for each of the properties and events listed, though I would expect support to be inconsistent across the various browsers which support HTML5 audio.
I’ve created this fiddle which demonstrates an HTML5 audio player controlled by a very basic set of custom controls (only tested in latest version of Chrome).