https://github.com/richtr/universal-remote-control-access
A demonstration of how web apps can access media-centric remote control events to control any other web content
https://github.com/richtr/universal-remote-control-access
Last synced: 10 months ago
JSON representation
A demonstration of how web apps can access media-centric remote control events to control any other web content
- Host: GitHub
- URL: https://github.com/richtr/universal-remote-control-access
- Owner: richtr
- Created: 2015-03-25T12:28:27.000Z (over 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-03-30T11:16:10.000Z (over 11 years ago)
- Last Synced: 2025-04-03T19:19:37.203Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://richtr.github.io/universal-remote-control-access/example.html
- Size: 281 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Using media-based remote control events to control any in-page web content
This library allows web developers to obtain low-level access to remote control events to control any kind of web content such as Flash-based media, presentations, slide shows or Web Audio API content _based on the assumption that platform-level media focus can be obtained via `HTMLMediaElement` objects_ (related discussion: [WHATWG Media Keys and Media Focus](https://github.com/whatwg/media-keys)).
#### Usage
To obtain low-level access to remote control events from a web page you can do the following:
1. Create a new `RemoteControls` object with the required duration for remote control focus and a callback to be run when the object has been fully initialized:
``` javascript
var controls = new RemoteControls(300, readyCallback);
```
2. Start the `RemoteControls` object when you are ready to obtain remote controls focus:
``` javascript
function readyCallback() {
controls.start();
}
```
3. Listen for remote control events and wire these up to your web content however you wish:
``` javascript
controls.onstarted = function() {};
controls.onplaybuttonpressed = function() {};
controls.onpausebuttonpressed = function() {};
// etc ... for 'seekchange', 'volumechange', 'previousbuttonpressed'
// and 'nextbuttonpressed' events
controls.onended = function() {};
```
4. Use the remote control events to drive whatever web content you wish such as Web Audio API content, Flash-based media, presentations or slide shows.
#### How it works under the hood
We create a dummy <audio> element and generate a silent WAV file of any length on the client-side to playback using JavaScript. Producing a silent WAV to use in this dummy element is very inexpensive and fast to generate on the client-side in this library.
Once this dummy media object begins playback it automatically obtains media focus (if the concept is implemented on the current platform). Then media key events dispatched toward that object (from any connected remote control hardware and software) will be propagated toward the page that can then be used to control any in-page content in any way the developer wishes.
#### Compatibility
At the time of writing **only iOS** supports any level of integration with hardware and software based remote control events from `HTMLMediaElement` objects. Therefore, this code will currently only work on iOS-based devices.