arcatdmz/songle-sync-master.html

## songle-sync-master.html
<html><head><script src="//api.songle.jp/v2/api.js"></script><script>
function onSongleAPIReady(Songle) {

  // Show the music player
  var player = new Songle.Player({
    mediaElement: document.querySelector('div.media'),
    accessToken: '00000095-cVwZKVo', // Access token
    secretToken: 'zVJkeswdA7tSFTfSWB75scZ2a5jL99g4'  // Secret token
  });

  player.addPlugin(new Songle.Plugin.SongleSync());

  // player.useMedia('https://youtube.com/watch?v=xOKplMgHxxA');

  // 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>
	<html><head><script src="//api.songle.jp/v2/api.js"></script><script>
	function onSongleAPIReady(Songle) {

	// Show the music player
	var player = new Songle.Player({
	mediaElement: document.querySelector('div.media'),
	accessToken: '00000095-cVwZKVo', // Access token
	secretToken: 'zVJkeswdA7tSFTfSWB75scZ2a5jL99g4' // Secret token
	});

	player.addPlugin(new Songle.Plugin.SongleSync());

	// player.useMedia('https://youtube.com/watch?v=xOKplMgHxxA');

	// 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>