Skip to content

Instantly share code, notes, and snippets.

@chontipan

chontipan/undefined

Created April 17, 2019 18:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chontipan/dba944c08b0f89b1b6826427b55fed47 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chontipan/dba944c08b0f89b1b6826427b55fed47 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

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

    // Show the music player
    var player = new SongleWidget.Player({
    accessToken: '0000008b-ExUGy41' // Access token
    , secretToken: 'gesBLQSoqKfKL9yo58CMFqUufsw2xzBx' // Secret token
    });
    player.useMedia(
    'https://www.youtube.com/watch?v=60ItHLz5WEA',
    { rootElement: document.querySelector('div.media') });
    player.addPlugin(new SongleWidget.Plugin.SongleSync());

    // Start playing music when the page load completes
    player.on('mediaReady', function () {
    player.play();
    });

    // Start playing music when the Play button is clicked
    var playButton = document.querySelector('button.play');
    playButton.addEventListener('click', function () {
    player.play();
    });

    // Stop playing music when the Stop button is clicked
    var pauseButton = document.querySelector('button.pause');
    pauseButton.addEventListener('click', function () {
    player.pause();
    });

    // 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>master test</h1>
    <div class="media"></div>
    <p>Playback position: <span class="time">-</span>[ms]</p>
    <p>
    <button class="play">Play</button>
    <button class="pause">Stop</button>
    </p></body></html>