Access to "media keys" from within a browser tab
Is there a way to access the "media keys" with Javascript from within a browser tab/window?
I am mainly interested in a google chrome solution.
Using the following code, there doesn't seem to be an event generated for the media keys:
<html>
<body onKeyDown="showKeyCode(event)开发者_JAVA百科">
<script type="text/javascript">
function showKeyCode(event) {
alert(event.keyCode);
}
</script>
</body>
</html>
Am I missing something? Could I do better with a Google Chrome extension??
Update: to address this problem I crafted the following tools:
- Chrome MusicMan
- Mediakeys Server
As of Chrome 73, there's explicit support for media keys, see https://developers.google.com/web/updates/2019/02/chrome-73-media-updates
In summary, you can install an event handler with
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
The document above gives a good overview.
https://googlechrome.github.io/samples/media-session/ has example code and a demo.
https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API has more detailed documentation.
The answer from Thakis appears to be the most current.
Outdated Answer from a decade ago:
Here's a list of key codes from Microsoft; they include keys such as "VK_VOLUME_MUTE". The key code for VK_VOLUME_MUTE is listed as 0xAD. 0xAD is decimal is 173.
And sure enough, when I load the following and hit the mute button on my keyboard, the key code reported is 173. So they do work like any other key; it wouldn't surprise me, though, if the key codes are Windows-specific. It may take some experimenting.
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(document).keydown(function(ev){
alert(ev.keyCode);
});
});
</script>
</body>
</html>
Edit: There is now explicit support for media keys. The answer below is deprecated. See @thakis answer below.
Old 2012 answer
Regarding whether you could do better than a Chrome Extension: no you could not - I've made a content script for a site, and running it within the current stable release of Chrome 16 on OS X 10.7. The script is simple enough:
console.log('Content script loading');
$("body").bind("keyup",function(event){
console.log(event.keyCode);
})
And it shows that no events are triggered for the back, play/pause, forward, mute, volume down or volume up keys.
Interesting the unused F5 key goes generate a keycode, so you could potentially use it as an alternative if you wish.
As it seems, there is now a possibility to execute JS code on media key presses. I took mikemaccana's answer and looked up the KeyEvent:
$(ready);
function ready() {
$(document).on('keydown', onKeyDown);
}
function onKeyDown(ev) {
if (ev.code === 'MediaPlayPause') alert('Play/Pause');
if (ev.code === 'MediaStop') alert('Stop');
if (ev.code === 'MediaTrackPrevious') alert('Previous Track');
if (ev.code === 'MediaTrackNext') alert('Next Track');
if (ev.code === 'VolumeUp') alert('Volume Up');
if (ev.code === 'VolumeDown') alert('Volume Down');
if (ev.code === 'VolumeMute') alert('Volume Mute');
}
You can just do alert(ev.code); in onKeyDown to get the key codes.
I uploaded this example on JSFiddle so you can test it.
加载中,请稍侯......
精彩评论