Skip to content

Instantly share code, notes, and snippets.

@kenrick95

kenrick95/poc.html

Created May 30, 2020 15:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save kenrick95/a4269fb898eb82b42aaea6e064b8df17 to your computer and use it in GitHub Desktop.
Save kenrick95/a4269fb898eb82b42aaea6e064b8df17 to your computer and use it in GitHub Desktop.
Download ZIP
Handles Play/Pause Media Key
Raw
poc.html
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PoC</title>
</head>
<body style="width: 100%; height: 100%;">
<audio
id="player"
preload="auto"
src="./test.mp3"
tabindex="-1"
controls
aria-hidden="true"
></audio>
<script>
const playerElement = document.getElementById('player');
document.addEventListener('keydown', (e) => {
if ('MediaPlayPause' == e.code || 'MediaPlayPause' == e.key) {
if (playerElement.paused) {
playerElement.play();
} else {
playerElement.pause();
}
}
});
playerElement.addEventListener('play', (e) => {
console.log('play event', e);
});
playerElement.addEventListener('pause', (e) => {
console.log('pause event', e);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment