XxGodmoonxX/songle-sync-master.html

## songle-sync-master.html
<html><head><script src="//api.songle.jp/v2/api.js"></script><script>//ブラウザ開いた時
window.onload = function() {
  console.log("open");
  //connect2unity_server();
}

//ブラウザ閉じる時
window.onbeforeunload = function(){
  console.log("exit");
  //disconnect2unity_server();
}

function onSongleWidgetAPIReady(SongleWidget) {
  // 音楽プレーヤーを表示する
  var player = new SongleWidget.Player({
    // 他の端末と同期しない場合は不要
    accessToken: '00000052-o8Ck6Wx', // アクセストークン
    secretToken: 'nUuRqmz39ye9FwY7v3uKN4nBSikLy659' // シークレットトークン
  });

  // 使用する楽曲メディアを指定する
  player.useMedia(
    // 自分でアップロードした楽曲のURLを指定
    'https://www.youtube.com/watch?v=-tKVN2mAKRI',
    { rootElement: document.querySelector('div.media') });

  // 使用する plugin を追加する
  //ビートのプラグイン
  player.addPlugin(new SW.Plugin.Beat());
  //コードのプラグイン
  player.addPlugin(new SW.Plugin.Chord());
  //サビのプラグイン
  player.addPlugin(new SW.Plugin.Chorus());
  //バリエーションのプラグイン
  var options = {
      //何分割するか
      groupCount: 4
  };
  player.addPlugin(new SW.Plugin.Variation(options));

  // 再生ボタンで再生を開始する
  var playButton = document.querySelector('button.play');
  playButton.addEventListener('click', function () {
    player.play();
  });
  //音楽開始したら
  player.on("play", function() {
    //start.music();
    var div_element = document.createElement('div');
    div_element.innerHTML = '<hr>start';
    var parent_object = document.getElementById("add_sentence");
    parent_object.appendChild(div_element);
  })

  // 停止ボタンで再生を停止する
  var pauseButton = document.querySelector('button.pause');
  pauseButton.addEventListener('click', function () {
    player.pause();
  });
  //音楽が停止したら
  player.on("pause", function() {
    var div_element = document.createElement('div');
    div_element.innerHTML = '<hr>pause';
    var parent_object = document.getElementById("add_sentence");
    parent_object.appendChild(div_element);
  });

  // ビートに合わせて情報を表示する
  var beat = document.querySelector('span.beat');
  player.on("beatEnter", function(event) {
    console.log(event)
    setText(beat, event.data.beat.position);
  });

  // 再生時刻を定期的に更新する
  var time = document.querySelector('span.time');
  setInterval(function () {
    if (player.isPlaying) {
      setText(time, msToTimeString(player.position));
    }
  }, 100);

  //1小節ごとに文章増加、1ずつiが増える
  var barEnterArray = new Array(10000);
  var i = 0;
  player.on('barEnter', function(event) {
    // console.log(event.data.bar);
    add_barenter();
    barEnterArray[i] = i;
    console.log("BarEnter" + barEnterArray[i]);
    i += 1;

    var barEnter = document.querySelector('span.barEnter');
    var barEnterText = "小節" + i;
    setText(barEnter, barEnterText);
  });

  //コードが1回変わると名前わかる、jが1増える
  var chordEnterArray = new Array(10000);
  var j = 0;
  player.on("chordEnter", function(event) {
    //コードの名前がわかる
    console.log(event.data.chord.name);
    chordEnter();
    chordEnterArray[j] = j
    console.log("Chord" + chordEnterArray[j]);
    j += 1;

    var chord = document.querySelector('span.chord');
    var chordText = "コード" + j;
    setText(chord, chordText);
  });

  //サビに1回入るとkが1増える
  var chorusSectionEnterArray = new Array(10000);
  var k = 0;
  player.on("chorusSectionEnter", function(event) {
    //サビはいると
    // console.log(event.data.section.duration);
    chorusSectionEnter();
    chorusSectionEnterArray[k] = k;
    console.log("ChorusSection" + chorusSectionEnterArray[k]);
    k += 1;

    var chorus = document.querySelector('span.chorus');
    var chorusText = "サビ" + k;
    setText(chorus, chorusText);
  });

  //繰り返し期間に入ったとき
  var repeatSectionEnterArray = new Array(10000);
  var l = 0;
  player.on("repeatSectionEnter", function(event) {
    console.log(event.data.section);
    repeatSectionEnterArray[l] = l;
    console.log("Repeat" + repeatSectionEnterArray[l]);
    l += 1;

    var repeat = document.querySelector('span.repeat');
    var repeatText = "繰り返し" + l;
    setText(repeat, repeatText);
  });

  //バリエーション
  player.on("variationEnter", function(event) {
    console.log(event.data.variation.gruop);

    var variation = document.querySelector("span.variation");
    var variationText = "盛り上がりレベル" + event.data.variation.group;
    setText(variation, variationText);
  });
}

function setText(node, text) {
	if (typeof node.textContent !== 'undefined') {
    node.childNodes[0].textContent = text;
  } else {
  	node.innerHTML = text;
  }
}

function msToTimeString(ms) {
  var sec = (ms / 1000 % 60) | 0;
  var min = (ms / 1000 / 60) | 0;

  return min + ':' + (sec < 10 ? ('0' + sec) : sec);
}

function add_barenter() {
    var div_element = document.createElement('div');
    div_element.innerHTML = '<hr>barenter';
    var parent_object = document.getElementById("add_sentence");
    parent_object.appendChild(div_element);
}

function chordEnter() {
  var div_element = document.createElement('div');
  div_element.innerHTML = '<hr>chordChange!!';
  var parent_object = document.getElementById("add_sentence");
  parent_object.appendChild(div_element);
}

function chorusSectionEnter() {
 var div_element = document.createElement('div');
 div_element.innerHTML = '<hr>サビ！！';
 var parent_object = document.getElementById("add_sentence");
 parent_object.appendChild(div_element);
}

function receice_success_send() {
    var div_element = document.createElement('div');
    div_element.innerHTML = '<hr>Success Send Word!!';
    var parent_object = document.getElementById("add_sentence");
    parent_object.appendChild(div_element);
}</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><div>
      <section>
        <div class="media"></div>
      </section>
      <section class="control">
        <h1>
          <a href="https://www.youtube.com/watch?v=-tKVN2mAKRI">DAOKO × 米津玄師『打上花火』</a>
        </h1>
        <p>
          <button class="play">再生</button>
          <button class="pause">停止</button>
        </p>
        <p><span class="time">-</span></p>
        <p><span class="beat">-</span></p>
        <p><span class="barEnter">-</span></p>
        <p><span class="chord">-</span></p>
        <p><span class="chorus">-</span></p>
        <p><span class="repeat">-</span></p>
        <p><span class="variation">-</span></p>

        <div id="add_sentence"></div>
      </section>
    </div></body></html>
	<html><head><script src="//api.songle.jp/v2/api.js"></script><script>//ブラウザ開いた時
	window.onload = function() {
	console.log("open");
	//connect2unity_server();
	}

	//ブラウザ閉じる時
	window.onbeforeunload = function(){
	console.log("exit");
	//disconnect2unity_server();
	}

	function onSongleWidgetAPIReady(SongleWidget) {
	// 音楽プレーヤーを表示する
	var player = new SongleWidget.Player({
	// 他の端末と同期しない場合は不要
	accessToken: '00000052-o8Ck6Wx', // アクセストークン
	secretToken: 'nUuRqmz39ye9FwY7v3uKN4nBSikLy659' // シークレットトークン
	});

	// 使用する楽曲メディアを指定する
	player.useMedia(
	// 自分でアップロードした楽曲のURLを指定
	'https://www.youtube.com/watch?v=-tKVN2mAKRI',
	{ rootElement: document.querySelector('div.media') });

	// 使用する plugin を追加する
	//ビートのプラグイン
	player.addPlugin(new SW.Plugin.Beat());
	//コードのプラグイン
	player.addPlugin(new SW.Plugin.Chord());
	//サビのプラグイン
	player.addPlugin(new SW.Plugin.Chorus());
	//バリエーションのプラグイン
	var options = {
	//何分割するか
	groupCount: 4
	};
	player.addPlugin(new SW.Plugin.Variation(options));

	// 再生ボタンで再生を開始する
	var playButton = document.querySelector('button.play');
	playButton.addEventListener('click', function () {
	player.play();
	});
	//音楽開始したら
	player.on("play", function() {
	//start.music();
	var div_element = document.createElement('div');
	div_element.innerHTML = '<hr>start';
	var parent_object = document.getElementById("add_sentence");
	parent_object.appendChild(div_element);
	})

	// 停止ボタンで再生を停止する
	var pauseButton = document.querySelector('button.pause');
	pauseButton.addEventListener('click', function () {
	player.pause();
	});
	//音楽が停止したら
	player.on("pause", function() {
	var div_element = document.createElement('div');
	div_element.innerHTML = '<hr>pause';
	var parent_object = document.getElementById("add_sentence");
	parent_object.appendChild(div_element);
	});

	// ビートに合わせて情報を表示する
	var beat = document.querySelector('span.beat');
	player.on("beatEnter", function(event) {
	console.log(event)
	setText(beat, event.data.beat.position);
	});

	// 再生時刻を定期的に更新する
	var time = document.querySelector('span.time');
	setInterval(function () {
	if (player.isPlaying) {
	setText(time, msToTimeString(player.position));
	}
	}, 100);

	//1小節ごとに文章増加、1ずつiが増える
	var barEnterArray = new Array(10000);
	var i = 0;
	player.on('barEnter', function(event) {
	// console.log(event.data.bar);
	add_barenter();
	barEnterArray[i] = i;
	console.log("BarEnter" + barEnterArray[i]);
	i += 1;

	var barEnter = document.querySelector('span.barEnter');
	var barEnterText = "小節" + i;
	setText(barEnter, barEnterText);
	});

	//コードが1回変わると名前わかる、jが1増える
	var chordEnterArray = new Array(10000);
	var j = 0;
	player.on("chordEnter", function(event) {
	//コードの名前がわかる
	console.log(event.data.chord.name);
	chordEnter();
	chordEnterArray[j] = j
	console.log("Chord" + chordEnterArray[j]);
	j += 1;

	var chord = document.querySelector('span.chord');
	var chordText = "コード" + j;
	setText(chord, chordText);
	});

	//サビに1回入るとkが1増える
	var chorusSectionEnterArray = new Array(10000);
	var k = 0;
	player.on("chorusSectionEnter", function(event) {
	//サビはいると
	// console.log(event.data.section.duration);
	chorusSectionEnter();
	chorusSectionEnterArray[k] = k;
	console.log("ChorusSection" + chorusSectionEnterArray[k]);
	k += 1;

	var chorus = document.querySelector('span.chorus');
	var chorusText = "サビ" + k;
	setText(chorus, chorusText);
	});

	//繰り返し期間に入ったとき
	var repeatSectionEnterArray = new Array(10000);
	var l = 0;
	player.on("repeatSectionEnter", function(event) {
	console.log(event.data.section);
	repeatSectionEnterArray[l] = l;
	console.log("Repeat" + repeatSectionEnterArray[l]);
	l += 1;

	var repeat = document.querySelector('span.repeat');
	var repeatText = "繰り返し" + l;
	setText(repeat, repeatText);
	});

	//バリエーション
	player.on("variationEnter", function(event) {
	console.log(event.data.variation.gruop);

	var variation = document.querySelector("span.variation");
	var variationText = "盛り上がりレベル" + event.data.variation.group;
	setText(variation, variationText);
	});
	}

	function setText(node, text) {
	if (typeof node.textContent !== 'undefined') {
	node.childNodes[0].textContent = text;
	} else {
	node.innerHTML = text;
	}
	}

	function msToTimeString(ms) {
	var sec = (ms / 1000 % 60) \| 0;
	var min = (ms / 1000 / 60) \| 0;

	return min + ':' + (sec < 10 ? ('0' + sec) : sec);
	}

	function add_barenter() {
	var div_element = document.createElement('div');
	div_element.innerHTML = '<hr>barenter';
	var parent_object = document.getElementById("add_sentence");
	parent_object.appendChild(div_element);
	}

	function chordEnter() {
	var div_element = document.createElement('div');
	div_element.innerHTML = '<hr>chordChange!!';
	var parent_object = document.getElementById("add_sentence");
	parent_object.appendChild(div_element);
	}

	function chorusSectionEnter() {
	var div_element = document.createElement('div');
	div_element.innerHTML = '<hr>サビ！！';
	var parent_object = document.getElementById("add_sentence");
	parent_object.appendChild(div_element);
	}

	function receice_success_send() {
	var div_element = document.createElement('div');
	div_element.innerHTML = '<hr>Success Send Word!!';
	var parent_object = document.getElementById("add_sentence");
	parent_object.appendChild(div_element);
	}</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><div>
	<section>
	<div class="media"></div>
	</section>
	<section class="control">
	<h1>
	<a href="https://www.youtube.com/watch?v=-tKVN2mAKRI">DAOKO × 米津玄師『打上花火』</a>
	</h1>
	<p>
	<button class="play">再生</button>
	<button class="pause">停止</button>
	</p>
	<p><span class="time">-</span></p>
	<p><span class="beat">-</span></p>
	<p><span class="barEnter">-</span></p>
	<p><span class="chord">-</span></p>
	<p><span class="chorus">-</span></p>
	<p><span class="repeat">-</span></p>
	<p><span class="variation">-</span></p>

	<div id="add_sentence"></div>
	</section>
	</div></body></html>