Blog · GitHub (User) Created at 2018-1-8 08:57:39 Updated at 2018-2-10 12:24:41 Tomáš Hübelbauer
Add findinfs

JavaScript Headphones Button

An attempt in using WebAudio API on a phone with a TRRS jack headset to detect button presses on the headset. If the headset shows up as a possible input stream in the WebAudio API, it should be possible to detect input pattern of the button press. Analyzer node with getByteFrequencyData and getByteTimeDomainData buffers in a requestAnimationFrame should be enough to tell.

This should bridge the gap between native APIs and web APIs. Both Google's Android and Apple's iPhone provide programmatic ways for listening for the headphones button press in an application:

Conductor Channel (Nokia) Channel (Apple)
Tip Left Out Left Out
Ring Right Out Right Out
Ring Microphone In Ground
Sleeve Ground Microphone In


House of Marley Liberate XLBT - midnight with Google Chrome Android 64 do not show any specific pattern when pressing the headphone button. It appears as though the pulse is either too short to notice or the phones goes by the press-sound recording from the microphone matching. The phone is able to interpret the button press.


Prerequisite Version Purpose
Python 2.7 HTTP Server
python -m SimpleHTTPServer

On Bloggo


Use an Android phone on the same network with a TRRS jack.

Prerequisite Version Purpose
Chrome 63 async/await, WebAudio API
Jack TRRS Microphone input

On the phone go to http://(computer-local-ip):8000. Use chrome://inspect to use Chrome DevTools on the phone. You may need to enable Developer Mode on the phone as well as USB debugging. Ensure you have up-to-date version of Chrome on the phone.


See the development plan.


See the development log.

Changes (14)
2018-2-10 12:24:41 Tomáš Hübelbauer
Add findinfs
2018-2-10 11:33:50 Tomáš Hübelbauer
Link Bloggo hosted page
2018-2-10 11:31:51 Tomáš Hübelbauer
Add global error handler
2018-1-27 11:40:28 Tomáš Hübelbauer
Post on Bloggo
2018-1-8 21:45:46 Tomáš Hübelbauer
Update tasks
2018-1-8 21:42:20 Tomáš Hübelbauer
Add instructions for phone debugging
2018-1-8 21:33:54 Tomáš Hübelbauer
Create and links tasks and notes
2018-1-8 21:29:38 Tomáš Hübelbauer
Add running and testing instructions
2018-1-8 21:18:01 Tomáš Hübelbauer
Update with new knowledge
2018-1-8 21:17:48 Tomáš Hübelbauer
Commit WebAudio analyzer node demo
2018-1-8 09:19:55 Tomáš Hübelbauer
Document a likely caveat
2018-1-8 09:13:32 Tomáš Hübelbauer
Add links for WebAudio API and Electronics SE
2018-1-8 09:04:39 Tomáš Hübelbauer
Add Google and Apple API links
2018-1-8 09:03:11 Tomáš Hübelbauer
Comments E-mail me!