結果を表示する
元にもどす
<html> <meta charset="utf-8"> <script> window.addEventListener('DOMContentLoaded', function(){const 音源=document.querySelector("audio"); const プレイ=document.getElementById("プレイ"); const ストップ=document.getElementById("ストップ"); const ミュート=document.getElementById("ミュート"); const スライド=document.getElementById("ボリューム"); 音源.volume=スライド.value; プレイ.addEventListener("click",(e)=>{音源.play();}); ストップ.addEventListener("click",(e)=>{音源.pause();}); ミュート.addEventListener("click",(e)=>{if(音源.muted) {音源.muted=false; ミュート.textContent="■||";} else{音源.muted=true; ミュート.textContent="□||";}}); スライド.addEventListener("input",(e)=>{音源.volume=スライド.value;});}); </script> <style> button{display:block; margin-top:10px; margin-left:10px;} .インプット{display:block; margin-top:160px; margin-left:-120px; height:14px; width:310px; transform:rotate(-0.25turn); -webkit-appearance:none; appearance:none; cursor:pointer; background:#aaaaaa; border:solid 2px #000000; border-radius:10px; outline:0;} .インプット::-webkit-slider-thumb{margin-top:0; margin-left:-1px; width:20px; height:34px; background:radial-gradient(#ffffff,#000000); border:1px solid #ffffff; border-radius:4px; cursor:pointer; -webkit-appearance:none;} p{text-align:center; margin-top:150px; margin-left:0; font-size:20px; color:white;} .フェーダー{position:absolute; top:0 left:0; width:70px; height:440px; border:solid 1px white; border-radius:4px; background-color:gray; z-index:50;} .メモリ_1{position:absolute; top:110px; left:12px; z-index:70;} .メモリ_2{position:absolute; top:110px; left:46px; z-index:70;} .ビッグ{fill:none; stroke:#ffffff; stroke-width:5;} .スモール{fill:none; stroke:#ffffff; stroke-width:1;} </style> <section class="フェーダー"> <button id="ストップ">Pause</button> <button id="プレイ"> ▶︎ </button> <button id="ミュート">Mute</button> <input type="range"id="ボリューム"value="0"min="0"max="1"step="0.01"class="インプット"> <audio src="Bach_Invention.mp3"loop="loop"></audio> <p id="音量">0.00</p> </section> <svg width="20px"height="300px"viewBox="0 0 10 380"class="メモリ_1"> <defs> <filter id="シャドー"> <feDropShadow dx="0"dy="2"stdDeviation="02"flood-color="#000000"/> </filter> </defs> <g> <line class="ビッグ"x1="6.7"y1="11.2"x2="21.2"y2="11.2"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="29"x2="21.2"y2="29"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="46.7"x2="21.2"y2="46.7"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="64.5"x2="21.2"y2="64.5"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="82.3"x2="21.2"y2="82.3"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="100.1"x2="21.2"y2="100.1"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="117.9"x2="21.2"y2="117.9"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="135.6"x2="21.2"y2="135.6"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="153.4"x2="21.2"y2="153.4"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="171.2"x2="21.2"y2="171.2"filter="url(#シャドー)"/> <line class="ビッグ"x1="6.7"y1="189"x2="21.2"y2="189"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="206.8"x2="21.2"y2="206.8"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="224.5"x2="21.2"y2="224.5"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="242.3"x2="21.2"y2="242.3"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="263.3"x2="21.2"y2="263.3"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="281.1"x2="21.2"y2="281.1"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="298.9"x2="21.2"y2="298.9"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="316.7"x2="21.2"y2="316.7"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="334.4"x2="21.2"y2="334.4"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="352.2"x2="21.2"y2="352.2"filter="url(#シャドー)"/> <line class="ビッグ"x1="6.7"y1="370"x2="21.2"y2="370"filter="url(#シャドー)"/> </g> </svg> <svg width="20px"height="300px"viewBox="0 0 10 380"class="メモリ_2"> <g> <line class="ビッグ"x1="6.7"y1="11.2"x2="21.2"y2="11.2"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="29"x2="21.2"y2="29"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="46.7"x2="21.2"y2="46.7"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="64.5"x2="21.2"y2="64.5"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="82.3"x2="21.2"y2="82.3"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="100.1"x2="21.2"y2="100.1"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="117.9"x2="21.2"y2="117.9"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="135.6"x2="21.2"y2="135.6"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="153.4"x2="21.2"y2="153.4"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="171.2"x2="21.2"y2="171.2"filter="url(#シャドー)"/> <line class="ビッグ"x1="6.7"y1="189"x2="21.2"y2="189"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="206.8"x2="21.2"y2="206.8"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="224.5"x2="21.2"y2="224.5"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="242.3"x2="21.2"y2="242.3"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="263.3"x2="21.2"y2="263.3"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="281.1"x2="21.2"y2="281.1"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="298.9"x2="21.2"y2="298.9"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="316.7"x2="21.2"y2="316.7"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="334.4"x2="21.2"y2="334.4"filter="url(#シャドー)"/> <line class="スモール"x1="6.7"y1="352.2"x2="21.2"y2="352.2"filter="url(#シャドー)"/> <line class="ビッグ"x1="6.7"y1="370"x2="21.2"y2="370"filter="url(#シャドー)"/> </g> </svg> <script> function inputChange(event){音量.innerText=れべる.value;} let れべる=document.getElementById("ボリューム"); れべる.addEventListener("input",inputChange); let 音量=document.getElementById("音量"); </script> </html>