Skip to content

Instantly share code, notes, and snippets.

@chontipan

chontipan/songle-sync-slave.html

Created April 17, 2019 18:45
Show Gist options
  • Save chontipan/d9480f29fad481d08fb036b19228c00c to your computer and use it in GitHub Desktop.
Save chontipan/d9480f29fad481d08fb036b19228c00c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chontipan created this gist Apr 17, 2019.
    37 changes: 37 additions & 0 deletions songle-sync-slave.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <html><head><script src="//api.songle.jp/v2/api.js"></script><script>
    function onSongleWidgetAPIReady(SongleWidget) {

    // Initialize the player
    var player = new SongleWidget.Player({
    accessToken: '0000008b-ExUGy41' // Access token
    });
    player.addPlugin(new SongleWidget.Plugin.SongleSync());

    // Update playback position periodically
    var span = document.querySelector('span.time');
    setInterval(function () {
    while (span.childNodes.length > 0) span.removeChild(span.childNodes[0]);
    var textNode = document.createTextNode(parseInt(player.position));
    span.appendChild(textNode);
    }, 100);
    }
    </script><style type="text/css">
    body {
    margin: 1em;
    font-family: 'Hiragino Kaku Gothic Pro','游ゴシック体','Yu Gothic',YuGothic,Meiryo,HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;
    }
    h1 {
    font-size: 1.6em;
    border: solid #000;
    border-width: 0 0 1px 0;
    }
    iframe {
    max-width: 100%;
    overflow-x: scroll-x;
    }
    p>span {
    font-weight: bold;
    }
    </style></head><body><h1>slave test</h1>
    <div class="media"></div>
    <p>Playback position: <span class="time">-</span>[ms]</p></body></html>