giruzou/songle-sync-master.html

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

  // 音楽プレーヤーを表示する
  var player = new SongleWidget.Player({
      accessToken: '00000090-KtkWYyy' // アクセストークン
    , secretToken: '2ixLaohRmaKrjS1qSHhfcMeVR27UTg8C' // シークレットトークン
  });
  player.useMedia(
    'https://youtube.com/watch?v=xOKplMgHxxA',
    { rootElement: document.querySelector('div.media') });
  player.addPlugin(new SongleWidget.Plugin.SongleSync());

  // ページが読み込まれたら再生を開始する
  player.on('mediaReady', function () {
    player.play();
  });

  // 再生ボタンで再生を開始する
  var playButton = document.querySelector('button.play');
  playButton.addEventListener('click', function () {
    player.play();
  });

  // 停止ボタンで再生を停止する
  var pauseButton = document.querySelector('button.pause');
  pauseButton.addEventListener('click', function () {
    player.pause();
  });

  // 再生時刻を定期的に更新する
  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>再生時刻: <span class="time">-</span>[ms]</p>
<p>
  <button class="play">再生</button>
  <button class="pause">停止</button>
</p></body></html>
	<html><head><script src="//api.songle.jp/v2/api.js"></script><script>
	function onSongleWidgetAPIReady(SongleWidget) {

	// 音楽プレーヤーを表示する
	var player = new SongleWidget.Player({
	accessToken: '00000090-KtkWYyy' // アクセストークン
	, secretToken: '2ixLaohRmaKrjS1qSHhfcMeVR27UTg8C' // シークレットトークン
	});
	player.useMedia(
	'https://youtube.com/watch?v=xOKplMgHxxA',
	{ rootElement: document.querySelector('div.media') });
	player.addPlugin(new SongleWidget.Plugin.SongleSync());

	// ページが読み込まれたら再生を開始する
	player.on('mediaReady', function () {
	player.play();
	});

	// 再生ボタンで再生を開始する
	var playButton = document.querySelector('button.play');
	playButton.addEventListener('click', function () {
	player.play();
	});

	// 停止ボタンで再生を停止する
	var pauseButton = document.querySelector('button.pause');
	pauseButton.addEventListener('click', function () {
	player.pause();
	});

	// 再生時刻を定期的に更新する
	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>再生時刻: <span class="time">-</span>[ms]</p>
	<p>
	<button class="play">再生</button>
	<button class="pause">停止</button>
	</p></body></html>