fxthomas/index.html

## 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>
	<!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>