Skip to content

Instantly share code, notes, and snippets.

@fxthomas

fxthomas/index.html

Created April 20, 2020 21:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fxthomas/2cb8f694d959324233ebccc7eac43a07 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fxthomas/2cb8f694d959324233ebccc7eac43a07 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fxthomas created this gist Apr 20, 2020.
    46 changes: 46 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <!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>