STUDY_html_017

　　STUDY_html_017_D.html

html
CSS
JavaScript

<html>
<meta charset="utf-8">

<style>　　スタイル　　</style>

<div class="container">
<div class="トップ"><input type="button"onclick="window.location.reload();"
value="リロード"style="font-size:20px;color:red;"></div>
<p>STUDY_html_014/STUDY_html_014_E.html の答え</p>
<input type="button"value=" B♭ "onclick="コード1()"style="font-size:20px;">
<audio id="和音-1_Bb">
<source src="Bb.mp3"type="audio/mp3">
</audio>
<input type="button"value=" B "onclick="コード2()"style="font-size:20px;">
<audio id="和音-2_B">
<source src="B.mp3"type="audio/mp3">
</audio>
<input type="button"value=" C "onclick="コード3()"style="font-size:20px;">
<audio id="和音-3_C">
<source src="C.mp3"type="audio/mp3">
</audio>
<input type="button"value=" D♭ "onclick="コード4()"style="font-size:20px;">
<audio id="和音-4_Db">
<source src="Db.mp3"type="audio/mp3">
</audio>
<input type="button"value=" D "onclick="コード5()"style="font-size:20px;">
<audio id="和音-5_D">
<source src="D.mp3"type="audio/mp3">
</audio>
<input type="button"value=" Eb "onclick="コード6()"style="font-size:20px;">
<audio id="和音-6_Eb">
<source src="Eb.mp3"type="audio/mp3">
</audio>
<input type="button"value=" E "onclick="コード7()"style="font-size:20px;">
<audio id="和音-7_E">
<source src="E.mp3"type="audio/mp3">
</audio>
<input type="button"value=" F "onclick="コード8()"style="font-size:20px;">
<audio id="和音-8_F">
<source src="F.mp3"type="audio/mp3">
</audio>
<input type="button"value=" Gb "onclick="コード9()"style="font-size:20px;">
<audio id="和音-9_Gb">
<source src="Gb.mp3"type="audio/mp3">
</audio>
<input type="button"value=" G "onclick="コード10()"style="font-size:20px;">
<audio id="和音-10_G">
<source src="G.mp3"type="audio/mp3">
</audio>
<input type="button"value=" Ab "onclick="コード11()"style="font-size:20px;">
<audio id="和音-11_Ab">
<source src="Ab.mp3"type="audio/mp3">
</audio>
<input type="button"value=" A "onclick="コード12()"style="font-size:20px;">
<audio id="和音-12_A">
<source src="A.mp3"type="audio/mp3">
</audio>
<img src="Bb_over.jpg"width="500">
<hr>
<button id="すたーと1">30小節 ▶</button>
　<button id="すたーと2">34小節 ▶</button>
　<button id="すたーと3">83〜84小節 ▶</button>
　<button id="すたーと4">86〜88小節 ▶</button>
</div>
<img src="bars_01.jpg"width="700">

<script>　　すくりぷと　　<script>

</html>


<style>
body{text-align:center;}
p{margin-top:40px;
font-size:20px;
color:#007f6f;
font-weight:bold;}
img{display:block;
margin:0 auto;
margin-top:6px;
margin-bottom:20px;}
#ぷれい1{width:100%;
margin:20px 0;}
button{margin-top:10px;
margin-bottom:10px;
font-size:20px;}
.トップ{margin-top:40px;}
</style>


<script>
const 曲目1=new Audio('bar_30.mp3');
const ぷれい1=document.getElementById('すたーと1');
const 停止1=document.getElementById('停止1');
ぷれい1.addEventListener('click',function()
{if(!曲目1.paused)
{ぷれい1.innerHTML=" 　 ▶ 　 ";
曲目1.pause();}
else{ぷれい1.innerHTML
="　||■||　";
曲目1.play();}});
const 曲目2=new Audio('bar_34.mp3');
const ぷれい2=document.getElementById('すたーと2');
const 停止2=document.getElementById('停止2');
ぷれい2.addEventListener('click',function()
{if(!曲目2.paused)
{ぷれい2.innerHTML=" 　 ▶ 　 ";
曲目2.pause();}
else{ぷれい2.innerHTML
="　||■||　";
曲目2.play();}});
const 曲目3=new Audio('bar_83-84.mp3');
const ぷれい3=document.getElementById('すたーと3');
const 停止3=document.getElementById('停止3');
ぷれい3.addEventListener('click',function()
{if(!曲目3.paused)
{ぷれい3.innerHTML=" 　 ▶ 　 ";
曲目3.pause();}
else{ぷれい3.innerHTML
="　||■||　";
曲目3.play();}});
const 曲目4=new Audio('bar_86-87-88.mp3');
const ぷれい4=document.getElementById('すたーと4');
const 停止4=document.getElementById('停止4');
ぷれい4.addEventListener('click',function()
{if(!曲目4.paused)
{ぷれい4.innerHTML=" 　 ▶ 　 ";
曲目4.pause();}
else{ぷれい4.innerHTML
="　||■||　";
曲目4.play();}});
function コード1()
{document.getElementById("和音-1_Bb").play();}
function コード2()
{document.getElementById("和音-2_B").play();}
function コード3()
{document.getElementById("和音-3_C").play();}
function コード4()
{document.getElementById("和音-4_Db").play();}
function コード5()
{document.getElementById("和音-5_D").play();}
function コード6()
{document.getElementById("和音-6_Eb").play();}
function コード7()
{document.getElementById("和音-7_E").play();}
function コード8()
{document.getElementById("和音-8_F").play();}
function コード9()
{document.getElementById("和音-9_Gb").play();}
function コード10()
{document.getElementById("和音-10_G").play();}
function コード11()
{document.getElementById("和音-11_Ab").play();}
function コード12()
{document.getElementById("和音-12_A").play();}
</script>

　　sample_STUDY_html_017_D サンプル・ダウンロード

← Contents

STUDY_html_017_D.html

　　← Contents

　　STUDY_html_017_D.html