Skip to content

Instantly share code, notes, and snippets.

@fxthomas

fxthomas/index.html

Created April 20, 2020 21:19
Show Gist options
  • Save fxthomas/2cb8f694d959324233ebccc7eac43a07 to your computer and use it in GitHub Desktop.
Save fxthomas/2cb8f694d959324233ebccc7eac43a07 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/script/jquery-3.4.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="./script/mediaelement/mediaelementplayer.min.css" />
<script type="text/javascript" src="./script/mediaelement/mediaelement-and-player.min.js"></script>
</head>
<body>
<button id="play" value="Play">Play</button>
<audio id="audioPlayer" data-mejsoptions='{"alwaysShowControls": true, "enableKeyboard": false}' width="340px" height="40px" tabindex="-1"></audio>
<div id="messages"></div>
<script type="text/javascript">
$(function() {
$("#audioPlayer").mediaelementplayer();
$("#play").on('click', function(ev) {
var player = $("#audioPlayer").get(0);
document.getElementById("messages").innerHTML += "<p>Playing song 1</p>";
player.src = "t1.mp3";
player.load();
player.play();
});
$("#audioPlayer").on('playing', function(ev) {
var player = $("#audioPlayer").get(0);
console.log("Playing!");
var metadata = new MediaMetadata({
title: "Title",
artist: "Artist",
album: "Album",
artwork: []
});
navigator.mediaSession.metadata = metadata;
navigator.mediaSession.setActionHandler('play', function() { player.play(); });
navigator.mediaSession.setActionHandler('pause', function() { player.pause(); });
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment