canonno/image-button.css Secret

## image-button.css
  .btn-cross {
    display: inline-block;
    position: relative;
    padding: 0.25em 1em;
    border-top: solid 2px rgb(182, 242, 247);
    border-bottom: solid 2px rgb(182, 242, 247);
    text-decoration: none;
    font-weight: bold;
    color: #cbf1f8;
  }
  .btn-cross:before, .btn-cross:after {
    content: '';
    position: absolute;
    top: -7px;
    width: 2px;
    height: -webkit-calc(100% + 14px);
    height: calc(100% + 14px);
    background-color: rgb(182, 242, 247);
    transition: .3s;
  }
  .btn-cross:before {
    left: 7px;
  }
  .btn-cross:after {
    right: 7px;
  }
  .btn-cross:hover:before {
    top: 0px;
    left:0;
    height: 100%;
  }
  .btn-cross:hover:after {
    top: 0px;
    right: 0;
    height: 100%;
  }

## ultra_soul.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="image-button.css">
    <title>ウルトラソウる</title>
  </head>

  <body bgcolor="#10100E">
    <div id = "canvas"></div>

    <a class="btn-cross" onclick="playMusic(false)">夢じゃないあれもこれも</a>
    <a class="btn-cross" onclick="playMusic(true)">手本を聞く</a>

    <div id="player"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <script type="text/javascript">

      //////////////////////////////////////
      // 画面に表示するために使うGlobal変数 //
      //////////////////////////////////////
      let label = 'Now Loading...';
      let labellist = [];

      ///////////////////////////////////////////////
      // Teachable Machineによる判定と表示ロジック ///
      //////////////////////////////////////////////

      // 判定器オブジェクト
      let classifier;
      let soundModel = 'https://teachablemachine.withgoogle.com/models/tJ-euCMSN/';

      //モデルのロード
      function preload() {
        // Load the model
        classifier = ml5.soundClassifier(soundModel + 'model.json');
      }

      //キャンバスの作成・判定
      function setup() {
        let canvas = createCanvas(320, 240);
        canvas.parent("canvas");
        classifier.classify(gotResult);
      }

      //labelを常に描画し続ける処理
      function draw() {
        background(0);
        // Draw the label in the canvas
        fill(255);
        textSize(32);
        textAlign(CENTER, CENTER);
        text(label, width / 2, height / 2);
      }

      // モデルが判定に成功するとここが実行
      function gotResult(error, results) {
        if (error) {
          console.error(error);
          return;
        }
        labellist.push(results[0].label);
      }

      ////////////////////////////////
      // Youtube Player API側の処理 //
      ////////////////////////////////

      //おまじない
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      //YoutubePlayerオブジェクト
      var player;

      //YoutubePlayerを読み込んだ際に最初に走る処理
      function onYouTubeIframeAPIReady() {
        //player1の定義
        player = new YT.Player('player', {
          height: '0',
          width: '0',
          videoId:'Ujb-ZeX7Mo8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange':onPlayerStateChange
          }
        });
      }

      //YoutubePlayerがReadyになったときに走る処理
      function onPlayerReady(event) {
        player = event.target
        label = "ウルトラソウる？"
      }

      //YoutubePlayerが止まったときに走る処理
      function onPlayerStateChange(event) {
        //60～66秒地点で止まった場合のみ実行。66秒以降に止まった場合、お手本を再生しているのでソウル判定をしない
        if (event.data == YT.PlayerState.ENDED && player.getCurrentTime()>60 &&player.getCurrentTime()<66) {
          console.log(player.getCurrentTime())

          //lablelistを空に
          labellist = []

          //3秒間にlabellistにpushされた中身をみてchecksoul
          setTimeout(checkSoul,3000)
        }
      }

      //ソウル判定
      function checkSoul(){
        //各ソウル判定回数
        let ultrasoul_count = 0;
        let nisemonosoul_count = 0;

        //3秒間にlabellistにpushされた中身を見てカウント
        for (idx=0;idx<labellist.length;idx++){
          if (labellist[idx]=="ホンモノソウル"){
            ultrasoul_count += 1;
          }
          if (labellist[idx]=="ニセモノソウル"){
            nisemonosoul_count +=1;
          }
        }

        //ウルトラソウルとニセモノソウルの数を比較しlabelに入力
        if (ultrasoul_count> nisemonosoul_count){
          label = "ウルトラソウル"
        }else{
          label = "ニセモノソウル"
        }
      }

      //ボタンが押されたらplayerを再生
      function playMusic(isOtehon){
        if (isOtehon){
          label = "お手本"
          player.loadVideoById({
            videoId:'Ujb-ZeX7Mo8',
            startSeconds:65.5,
            endSeconds:67.5,
          })
        }else{
          label = "ｳﾙﾄﾗｿｳﾙ ﾊｲｨｯ\nで判定"
          player.loadVideoById({
            videoId:'Ujb-ZeX7Mo8',
            startSeconds:46,
            endSeconds:65.5,
          })
        }
      }

    </script>
  </body>
</html>
	.btn-cross {
	display: inline-block;
	position: relative;
	padding: 0.25em 1em;
	border-top: solid 2px rgb(182, 242, 247);
	border-bottom: solid 2px rgb(182, 242, 247);
	text-decoration: none;
	font-weight: bold;
	color: #cbf1f8;
	}
	.btn-cross:before, .btn-cross:after {
	content: '';
	position: absolute;
	top: -7px;
	width: 2px;
	height: -webkit-calc(100% + 14px);
	height: calc(100% + 14px);
	background-color: rgb(182, 242, 247);
	transition: .3s;
	}
	.btn-cross:before {
	left: 7px;
	}
	.btn-cross:after {
	right: 7px;
	}
	.btn-cross:hover:before {
	top: 0px;
	left:0;
	height: 100%;
	}
	.btn-cross:hover:after {
	top: 0px;
	right: 0;
	height: 100%;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="image-button.css">
	<title>ウルトラソウる</title>
	</head>

	<body bgcolor="#10100E">
	<div id = "canvas"></div>

	<a class="btn-cross" onclick="playMusic(false)">夢じゃないあれもこれも</a>
	<a class="btn-cross" onclick="playMusic(true)">手本を聞く</a>

	<div id="player"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
	<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
	<script type="text/javascript">

	//////////////////////////////////////
	// 画面に表示するために使うGlobal変数 //
	//////////////////////////////////////
	let label = 'Now Loading...';
	let labellist = [];

	///////////////////////////////////////////////
	// Teachable Machineによる判定と表示ロジック ///
	//////////////////////////////////////////////

	// 判定器オブジェクト
	let classifier;
	let soundModel = 'https://teachablemachine.withgoogle.com/models/tJ-euCMSN/';

	//モデルのロード
	function preload() {
	// Load the model
	classifier = ml5.soundClassifier(soundModel + 'model.json');
	}

	//キャンバスの作成・判定
	function setup() {
	let canvas = createCanvas(320, 240);
	canvas.parent("canvas");
	classifier.classify(gotResult);
	}

	//labelを常に描画し続ける処理
	function draw() {
	background(0);
	// Draw the label in the canvas
	fill(255);
	textSize(32);
	textAlign(CENTER, CENTER);
	text(label, width / 2, height / 2);
	}

	// モデルが判定に成功するとここが実行
	function gotResult(error, results) {
	if (error) {
	console.error(error);
	return;
	}
	labellist.push(results[0].label);
	}

	////////////////////////////////
	// Youtube Player API側の処理 //
	////////////////////////////////

	//おまじない
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	//YoutubePlayerオブジェクト
	var player;

	//YoutubePlayerを読み込んだ際に最初に走る処理
	function onYouTubeIframeAPIReady() {
	//player1の定義
	player = new YT.Player('player', {
	height: '0',
	width: '0',
	videoId:'Ujb-ZeX7Mo8',
	events: {
	'onReady': onPlayerReady,
	'onStateChange':onPlayerStateChange
	}
	});
	}

	//YoutubePlayerがReadyになったときに走る処理
	function onPlayerReady(event) {
	player = event.target
	label = "ウルトラソウる？"
	}

	//YoutubePlayerが止まったときに走る処理
	function onPlayerStateChange(event) {
	//60～66秒地点で止まった場合のみ実行。66秒以降に止まった場合、お手本を再生しているのでソウル判定をしない
	if (event.data == YT.PlayerState.ENDED && player.getCurrentTime()>60 &&player.getCurrentTime()<66) {
	console.log(player.getCurrentTime())

	//lablelistを空に
	labellist = []

	//3秒間にlabellistにpushされた中身をみてchecksoul
	setTimeout(checkSoul,3000)
	}
	}

	//ソウル判定
	function checkSoul(){
	//各ソウル判定回数
	let ultrasoul_count = 0;
	let nisemonosoul_count = 0;

	//3秒間にlabellistにpushされた中身を見てカウント
	for (idx=0;idx<labellist.length;idx++){
	if (labellist[idx]=="ホンモノソウル"){
	ultrasoul_count += 1;
	}
	if (labellist[idx]=="ニセモノソウル"){
	nisemonosoul_count +=1;
	}
	}

	//ウルトラソウルとニセモノソウルの数を比較しlabelに入力
	if (ultrasoul_count> nisemonosoul_count){
	label = "ウルトラソウル"
	}else{
	label = "ニセモノソウル"
	}
	}

	//ボタンが押されたらplayerを再生
	function playMusic(isOtehon){
	if (isOtehon){
	label = "お手本"
	player.loadVideoById({
	videoId:'Ujb-ZeX7Mo8',
	startSeconds:65.5,
	endSeconds:67.5,
	})
	}else{
	label = "ｳﾙﾄﾗｿｳﾙﾊｲｨｯ\nで判定"
	player.loadVideoById({
	videoId:'Ujb-ZeX7Mo8',
	startSeconds:46,
	endSeconds:65.5,
	})
	}
	}

	</script>
	</body>
	</html>