結果を表示する
元にもどす
<html lang="ja"> <meta charset="utf-8"> <style> main{position:fixed; top:60px; left:0px; background-image:url(K_002.png); background-repeat:no-repeat; background-size:800px; height:100%; width:100%; z-index:0;} span{font-size:14;} .第一ばいおりん{position:absolute; left:117px; top:90px; z-index:10;} .第二ばいおりん{position:absolute; left:118; top:189px; z-index:20;} .びおら{position:absolute; left:117; top:288px; z-index:30;} .ちぇろ{position:absolute; left:117px; top:354px; z-index:40;} #ボックス{position:absolute; left:100px; top:470px; z-index:20; width:700px; height:80px; border:1px dashed black;} .オール{position:absolute; left:117px; top:560px; z-index:50;} </style> <h1>クイズ - 5 <span>パート別に演奏したオーディオを再生するには?</span></h1> <main></main> <img class="第一ばいおりん"id="どらっぐ_1st-violin"src="KK_1st-violin.png"draggable="true"ondragstart="どらっぐ(event,'V-1_02.mp3')"width="672"height="88"> <img class="第二ばいおりん"id="どらっぐ_2nd-violin"src="KK_2nd-violin.png"draggable="true"ondragstart="どらっぐ(event,'V-2_02.mp3')"width="671"height="76"> <img class="びおら"id="どらっぐ_Viola"src="KK_viola.png"draggable="true"ondragstart="どらっぐ(event,'Viola_02.mp3')"width="672"height="56"> <img class="ちぇろ"id="どらっぐ_Cello"src="KK_cello.png"draggable="true"ondragstart="どらっぐ(event,'Cello_02.mp3')"width="673"height="86"> <audio id="1st_violin_audio"src="V-1_02.mp3"></audio> <audio id="2nd_violin_audio"src="V-2_02.mp3"></audio> <audio id="Viola_audio"src="Viola_02.mp3"></audio> <audio id="Cello_audio"src="Cello_02.mp3"></audio> <div id="ボックス"ondrop="drop(event)"ondragover="どろっぷ(event)"> <button onclick="りろーど()">ストップ</button> </div> <audio controls class="オール"><source src="All_02.mp3"type="audio/mp3"></audio> <script> function どろっぷ(event) {event.preventDefault();} function どらっぐ(event,audioSrc) {event.dataTransfer.setData("audioSrc",audioSrc);} function drop(event) {event.preventDefault(); var audioSrc=event.dataTransfer.getData("audioSrc"); var audio=document.createElement("audio"); audio.src=audioSrc; audio.play();} function りろーど() {document.location.reload();} </script> </html>