<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="utf-8">
<meta name="viewport" container="width=device-width">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type"text/css" href="yousan.css">
<title>Silk Re:road</title>
<script type="text/javascript" src="lib/csv.min.js" charset="utf-8"></script>
<script type="text/javascript" src="samplepage.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--jQueryのコードの読み込みの直後に記入しないとダメ？-->
<script>
//$(function(){...})=HTMLの読み込みが全て完了した後に中身を実行
$(function() {
//var h = $(window).height(); =jQueryで、ウィンドウの高さを取得する？
var h = $(window).height();
$('#loader-bg ,#loader').height(h).css('display','block');
});
$(window).load(function () { //すべての読み込みが完了したら実行
//delay(1000)で1秒間動作の停止。
//HTML要素.fadeOut( 時間(ミリ秒) )でHTML要素を少しずつアニメーションさせながら非表示にすることができるメソッド
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
});
//5秒たったら強制的にロード画面を非表示
$(function(){
//setTimeout…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）
setTimeout('stopload()',5000);
});
function stopload(){
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
}
//ポップアップに関わる動き
$(function(){
$('.js-modal-open').on('click',function(){
$('.js-modal').fadeIn();
return false;
});
$('.js-modal-close').on('click',function(){
$('.js-modal').fadeOut();
return false;
});
});
//ポップアップここまで
</script>
<!--jQueryの動きはここまで-->
</head>
<body>
<!--ロード画面の表示-->
<div id="loader-bg">
<div id="loader">
<img src="aiu.gif" width="80" height="80" alt="Now Loading..." />
<p>Now Loading...</p>
</div>
</div>
<header>
<img src="title.PNG" alt="Silk Re:road" class="title">
</header>
<p class="center"><img id="image" src="inu.png" alt="犬"></P>
<div class="inner" id="text">
シナリオが表示されます。
</div>
<div class="box"><img id="back_image" alt="背景画像"></div>
<button class="migisita" id="nextP"><img src="next_sample.PNG" width="150px" alt="次へ"></button>
<button class="hidarisita" id="backP"><img src="back_sample.PNG" width="150px" alt="前へ"></button>
<!-- 音声ファイル -->
<audio id="bgm1" preload loop>
<source src="bgm_maoudamashii_healing15.mp3" type="audio/mp3">
</audio>
<!-- 再生ボタン -->
<button id="btn-play" type="button"><i class="fas fa-play"></i></button>
<!--ポップアップの記述-->
<div class="content">
<a class="js-modal-open" href="">クリックで操作のヘルプ画面を表示</a>
</div>
<div class="modal js-modal">
<div class="modal__bg js-modal-close"></div>
<div class="modal__content">
<header>
<img src="title.PNG" alt="Silk Re:road" class="title">
</header>
<p class="center"></P>
<div class="inner" id="text">
シナリオが表示されます。
</div>
<div class="box">場面に応じてキャラクターの立ち絵と背景画像が表示されます。</div>
<p class="migisita">次へ進みます。</p>
<p class="hidarisita">前に戻ります。</p>
<!-- 再生ボタン -->
<p id="btn-play">音のON/OFF</p>
<a class="js-modal-close" href="">ヘルプ画面を閉じる(外の黒い画面をクリックしても閉じれます)</a>
</div><!--modal__inner-->
<!--ポップアップの記述ここまで-->
<script>
const bgm1 = document.querySelector("#bgm1"); // <audio>
const btn = document.querySelector("#btn-play"); // <button>
btn.addEventListener("click", ()=>{
// pausedがtrue=>停止, false=>再生中
if( ! bgm1.paused ){
btn.innerHTML = '<i class="fas fa-play"></i>'; // 「再生ボタン」に切り替え
bgm1.pause();
}
else{
btn.innerHTML = '<i class="fas fa-pause"></i>'; // 「一時停止ボタン」に切り替え
bgm1.play();
}
});
/**
* [event] 再生終了時に実行
*/
bgm1.addEventListener("ended", ()=>{
bgm1.currentTime = 0; // 再生位置を先頭に移動(こいつはなくても大丈夫です)
btn.innerHTML = '<i class="fas fa-play"></i>'; // 「再生ボタン」に変更
});
</script>
</body>
</html>
fuga sakurai