canonno/hanabi.html Secret

## hanabi.html
<html>
  <head>
    <link rel="stylesheet" href="image-button.css">
  </head>
  <title>
    夏休み君
  </title>

  <style>
    body {
    background-image: url('hanabi.jpg');
    background-size: 100% auto;
 }
  </style>
    <body>
     <a href="hoshizora.html" class="btn-cross">
      星空を見る
    </a>
    <a href="kawa.html" class="btn-cross">
      川へ歩く
    </a>
    <a class="btn-cross" onclick="startSound()">
      耳を澄ます
    </a>

    <div id="player1"></div>
    <div id="player2"></div>
     <script>
      //おまじない
      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 player1; //川の音,海の音
      var player2; //雨や虫、森の音など

      //読み込んだ際に最初に走る処理
      function onYouTubeIframeAPIReady() {
        //player1の定義
        player1 = new YT.Player('player1', {
          height: '0',
          width: '0',
          videoId:"",
          events: {
            'onReady': onPlayerReady1,
          }
        });

        //player2の定義
        player2 = new YT.Player('player2', {
          height: "0",
          width: '0',
          videoId:"",
          events: {
            'onReady': onPlayerReady2,
          }
        });

      }

      function startSound(){
        player1.playVideo();
        player2.playVideo();
        setInterval(gradientChange,timeToChangeVolume*1000);
      }

      //PlayerがReadyになったときに走る処理
      function onPlayerReady1(event) {
        //音量をセット
        player = event.target
        player.setVolume(p1vol);

        //Playlistをセットして、シャッフル再生
        videolength = videolist[0].length
        player.cuePlaylist(videolist[0],Math.floor(Math.random()*videolength));
        player.setShuffle(true);
        player.playVideo();
      }

      //PlayerがReadyになったときに走る処理
      function onPlayerReady2(event) {
        //音量をセット
        player = event.target
        player.setVolume(p2vol);
        player.setShuffle(true);

        //Playlistをセットして、シャッフル再生
        videolength = videolist[0].length
        player.cuePlaylist(videolist[1],Math.floor(Math.random()*videolength));
        player.setShuffle(true);
        player.playVideo();
      }

      //音量と音量の変化量を定義
      maxvol = 20;
      p1vol = 6;
      dp1vol = -2;
      p2vol = 16;
      dp2vol = 2;
      //volumeを一段階変える時間
      var timeToChangeVolume = 15; //秒

      //Youtubeのビデオリスト
      var videolist = [
          ['p2st1-AHa5Y','_FDWgFrsSVA','xAL1rVb4EG4'], //花火
          ['N3mnyBh8y5A','2PC2Oh0vqb0','hnqk8k6a_Cw'],　//虫、川と虫、虫
          ]

      //徐々に音量を変える処理
      function gradientChange(){
        //音量を変える
        p1vol += dp1vol;
        player1.setVolume(p1vol)

        //音量がゼロになったら次の動画へ
        if (p1vol == 0){
          dp1vol = -1 * dp1vol;
          moveNext(player1);
        }else if (p1vol == maxvol){

          //音量がmaxvolになったら音量を減らすように変更
          dp1vol = -1 * dp1vol;
        }

        //音量を変える
        p2vol += dp2vol;
        player2.setVolume(p2vol)

        //音量がゼロになったら次の動画へ
        if (p2vol == 0){
          dp2vol = -1 * dp2vol;
          moveNext(player2);
        }else if (p2vol == maxvol){
          //音量がmaxvolになったら音量を減らすように変更
          dp2vol = -1 * dp2vol;
        }
      }

      //次の動画へ映る
      function moveNext(player){
        player.setShuffle(true);
        player.nextVideo();
        player.playVideo();
      }
    </script>
  </body>
</html>

## image-button.css
.btn-cross {
    display: inline-block;
    position: relative;
    padding: 0.25em 1em;
    border-top: solid 2px rgb(206, 206, 206);
    border-bottom: solid 2px rgb(206, 206, 206);
    text-decoration: none;
    font-weight: bold;
    color: #9ee0ff;
  }
  .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(206, 206, 206);
    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%;
  }


  .btn-cross2 {
    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-cross2:before, .btn-cross2: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-cross2:before {
    left: 7px;
  }
  .btn-cross2:after {
    right: 7px;
  }
  .btn-cross2:hover:before {
    top: 0px;
    left:0;
    height: 100%;
  }
  .btn-cross2:hover:after {
    top: 0px;
    right: 0;
    height: 100%;
  }
	<html>
	<head>
	<link rel="stylesheet" href="image-button.css">
	</head>
	<title>
	夏休み君
	</title>

	<style>
	body {
	background-image: url('hanabi.jpg');
	background-size: 100% auto;
	}
	</style>
	<body>
	<a href="hoshizora.html" class="btn-cross">
	星空を見る
	</a>
	<a href="kawa.html" class="btn-cross">
	川へ歩く
	</a>
	<a class="btn-cross" onclick="startSound()">
	耳を澄ます
	</a>

	<div id="player1"></div>
	<div id="player2"></div>
	<script>
	//おまじない
	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 player1; //川の音,海の音
	var player2; //雨や虫、森の音など

	//読み込んだ際に最初に走る処理
	function onYouTubeIframeAPIReady() {
	//player1の定義
	player1 = new YT.Player('player1', {
	height: '0',
	width: '0',
	videoId:"",
	events: {
	'onReady': onPlayerReady1,
	}
	});

	//player2の定義
	player2 = new YT.Player('player2', {
	height: "0",
	width: '0',
	videoId:"",
	events: {
	'onReady': onPlayerReady2,
	}
	});

	}

	function startSound(){
	player1.playVideo();
	player2.playVideo();
	setInterval(gradientChange,timeToChangeVolume*1000);
	}

	//PlayerがReadyになったときに走る処理
	function onPlayerReady1(event) {
	//音量をセット
	player = event.target
	player.setVolume(p1vol);

	//Playlistをセットして、シャッフル再生
	videolength = videolist[0].length
	player.cuePlaylist(videolist[0],Math.floor(Math.random()*videolength));
	player.setShuffle(true);
	player.playVideo();
	}

	//PlayerがReadyになったときに走る処理
	function onPlayerReady2(event) {
	//音量をセット
	player = event.target
	player.setVolume(p2vol);
	player.setShuffle(true);

	//Playlistをセットして、シャッフル再生
	videolength = videolist[0].length
	player.cuePlaylist(videolist[1],Math.floor(Math.random()*videolength));
	player.setShuffle(true);
	player.playVideo();
	}

	//音量と音量の変化量を定義
	maxvol = 20;
	p1vol = 6;
	dp1vol = -2;
	p2vol = 16;
	dp2vol = 2;
	//volumeを一段階変える時間
	var timeToChangeVolume = 15; //秒

	//Youtubeのビデオリスト
	var videolist = [
	['p2st1-AHa5Y','_FDWgFrsSVA','xAL1rVb4EG4'], //花火
	['N3mnyBh8y5A','2PC2Oh0vqb0','hnqk8k6a_Cw'],　//虫、川と虫、虫
	]

	//徐々に音量を変える処理
	function gradientChange(){
	//音量を変える
	p1vol += dp1vol;
	player1.setVolume(p1vol)

	//音量がゼロになったら次の動画へ
	if (p1vol == 0){
	dp1vol = -1 * dp1vol;
	moveNext(player1);
	}else if (p1vol == maxvol){

	//音量がmaxvolになったら音量を減らすように変更
	dp1vol = -1 * dp1vol;
	}

	//音量を変える
	p2vol += dp2vol;
	player2.setVolume(p2vol)

	//音量がゼロになったら次の動画へ
	if (p2vol == 0){
	dp2vol = -1 * dp2vol;
	moveNext(player2);
	}else if (p2vol == maxvol){
	//音量がmaxvolになったら音量を減らすように変更
	dp2vol = -1 * dp2vol;
	}
	}

	//次の動画へ映る
	function moveNext(player){
	player.setShuffle(true);
	player.nextVideo();
	player.playVideo();
	}
	</script>
	</body>
	</html>
	.btn-cross {
	display: inline-block;
	position: relative;
	padding: 0.25em 1em;
	border-top: solid 2px rgb(206, 206, 206);
	border-bottom: solid 2px rgb(206, 206, 206);
	text-decoration: none;
	font-weight: bold;
	color: #9ee0ff;
	}
	.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(206, 206, 206);
	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%;
	}


	.btn-cross2 {
	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-cross2:before, .btn-cross2: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-cross2:before {
	left: 7px;
	}
	.btn-cross2:after {
	right: 7px;
	}
	.btn-cross2:hover:before {
	top: 0px;
	left:0;
	height: 100%;
	}
	.btn-cross2:hover:after {
	top: 0px;
	right: 0;
	height: 100%;
	}