Disable Media Control Keys With Javascript

I'm building a keyboard-like application on a website using javascript (no jQuery), but instead of one note being played a sound file plays/pauses every time you click on an image.

Solution 1:

The Media Session API lets you listen for media key events and execute arbitrary code on said events:

navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });

To prevent media key controls from fiddling with your elements leave the code block empty as such:

navigator.mediaSession.setActionHandler('play', function() {});