結果を表示する
元にもどす
<html> <meta charset="utf-8"> <script> function おーぷん編集() {let 意=document.getElementById("波形編集"); if(意.style.display=="block") 意.style.display="none"; else 意.style.display="block";} function おーぷん説明() {let 得=document.getElementById("説明"); console.log(得.style.height) if(得.style.height==""||得.style.height=="0px") {得.style.height="400px"; 得.style.padding="20px 20px";} else{得.style.height="0px"; 得.style.padding="0px 20px";}} </script> <style> *:focus{outline:none;} body{background:#ffffff; font-family:"Roboto Condensed",sans-serif;} button{height:30px; font-size:12px; font-weight:bold; color:#555555;} button:hover{height:30px; font-size:12px; font-weight:bold; color:#000000; background-color:#ffffff;} td{color:#ffffff; text-align:center; padding:4px;} main{position:absolute; top:150px; left:48px;} table{text-align:center; font-size:16px; color:white; text-shadow:1px 1px 1px #000000;} .ボックス{psition:fixed; top:0; left:0; width:882px; height:500px; background-color:#cccccc; box-shadow:2px 2px 0 0 #000000; z-intex:0;} #シャドー{position:absolute; top:20px; left:20px; width:820px; height:440px; color:white; padding:20px 20px 20px 20px; background:linear-gradient(90deg,rgb(100,100,100)0%,rgb(0,0,0)15%,rgb(0,0,0)85%,rgb(100,100,100)100%); box-shadow:0 0 10px 10px #cccccc inset; z-intex:10;} #波形編集{display:none;} #コンポーネント{margin-top:14px; padding:10px 10px; color:#000000; background:linear-gradient(#444444 0%,#888888 5%,#555555 5%,#999999 90%,#444444 100%);} #説明{height:0; box-sizing:border-box; overflow:hidden; transition:0.4s; background-color:#7a7a7a; padding:0px 20px;} .ロゴ{position:absolute; top:80px; left:28px; font-family:AudioWide; font-size:16px; color:#ffffff; text-shadow:1px 1px 1px #000000;} .プログラム{position:absolute; top:88px; left:230px; width:570px; height:30px; background-color:transparent; border:1px solid rgba(255,255,255,0.5); border-radius:6px; z-index:20;} .ゲイン{position:absolute; top:4px; left:16px; font-family:"Arial Black"; font-size:16px; font-weight:bold; color:#ffffff; text-shadow:1px 1px 1px #000000;} .キャンバス{position:absolute; top:460px; left:80px; box-shadow:4px 4px 4px #000000;} .ゼロ{display:none;} .スモール{font-size:12px;} .インプット_1{width:304px;} .td_データ{width:40px; height:32px; text-align:left;} .フレックス{display:flex; font-size:16px; font-weight:bold; color:#ffffff; margin-bottom:10px;} .ナビ_harmonics{position:absolute; top:-10px; left:-10px; font-family:"sans-serif"; font-size:16px; font-weight:bold; color:#ffffff; text-shadow:1px 1px 1px #000000;} .ナビ_left{position:absolute; top:-10px; left:200px; font-family:"sans-serif"; font-size:16px; font-weight:bold; color:#ffffff; text-shadow:1px 1px 1px #000000;} .ナビ_right{position:absolute; top:-10px; left:566px; font-family:"sans-serif"; font-size:16px; font-weight:bold; color:#ffffff; text-shadow:1px 1px 1px #000000;} .GO_オシレーター{position:absolute; top:34px; left:810px; width:10px; height:10px; background-color:#32cd32; box-shadow:0 0 2px 3px rgba(0,100,0,0.3)inset; border:1px solid #00ff00; border-radius:50%; z-index:30;} </style> <div class="ボックス"> <div id="シャドー"> <button id="ぼたん"type="button"style="cursor:pointer;">Reset</button> <button id="about"onclick="おーぷん説明()"style="cursor:pointer;">Example</button> <button onclick="おーぷん編集()"style="cursor:pointer;">Open Display</button> <button id="始まり"style="cursor:pointer;">Sound ▶︎</button> <button id="停止"style="cursor:pointer;">|| Pause ||</button> <div id="コンポーネント"> <p class="ロゴ">STUDY CSS :Oscillator Sine</p> <div class="プログラム"> <div class="ゲイン"><span>Frequency</span> <input type="range"id="ぼたん_へるつ"min="50"max="1000"value="220"><span id="音程_いんたばる"></span><span style="margin-left:2px;font-size:14px;">Hz</span> <span>Volume</span> <input type="range"id="ぼたん_ぼりゅーむ"min="0"max="1"step="0.01"value="0.5"><span id="音量_ぼりゅーむ"></span> </div> </div> <a href="#"><div class="GO_オシレーター"></div></a> <main> <div class="フレックス"> <div class="ナビ_harmonics">Harmonics</div><div class="ナビ_left">Left</div><div class="ナビ_right">Right</div> </div> <table> <tr class="ゼロ"> <th>0</th><td><input type="range"min="0"max="1"step="0.01"id="左右位相0"value="0"class="インプット_1"></td> <td id="左右位相0_加"class="td_データ"></td> <td><input type="range"min="0"max="1"step="0.01"id="波形0"value="0"class="インプット_1""></td> <td id="波形0_加"class="td_データ"></td> </tr> <tr> <th class="スモール">基音</th><td class="レフト"><input type="range"min="0"max="1"step="0.01"id="左右位相1"value="0"class="インプット_1"></td><td id="左右位相1_加"class="td_データ"></td><td><input type="range"min="0"max="1"step="0.01"id="波形1"value="0"class="インプット_1"></td><td id="波形1_加"class="td_データ"></td> </tr> <tr> <th class="スモール">第二倍音</th><td><input type="range"min="0"max="1"step="0.01"id="左右位相2"value="0"class="インプット_1"></td><td id="左右位相2_加"class="td_データ"></td><td><input type="range"min="0"max="1"step="0.01"id="波形2"value="0"class="インプット_1"></td><td id="波形2_加"class="td_データ"></td> </tr> <tr> <th class="スモール">第三倍音</th><td><input type="range"min="0"max="1"step="0.01"id="左右位相3"value="0"class="インプット_1"></td><td id="左右位相3_加"class="td_データ"></td><td><input type="range"min="0"max="1"step="0.01"id="波形3"value="0"class="インプット_1"></td><td id="波形3_加"class="td_データ"></td> </tr> <tr> <th class="スモール">第四倍音</th><td><input type="range"min="0"max="1"step="0.01"id="左右位相4"value="0"class="インプット_1"></td><td id="左右位相4_加"class="td_データ"></td><td><input type="range"min="0"max="1"step="0.01"id="波形4"value="0"class="インプット_1"></td><td id="波形4_加"class="td_データ"></td> </tr> <tr> <th class="スモール">第五倍音</th><td><input type="range"min="0"max="1"step="0.01"id="左右位相5"value="0"class="インプット_1"></td><td id="左右位相5_加"class="td_データ"></td><td><input type="range"min="0"max="1"step="0.01"id="波形5"value="0"class="インプット_1"></td><td id="波形5_加"class="td_データ"></td> </tr> <tr> <th class="スモール">第六倍音</th><td><input type="range"min="0"max="1"step="0.01"id="左右位相6"value="0"class="インプット_1"></td><td id="左右位相6_加"class="td_データ"></td><td><input type="range"min="0"max="1"step="0.01"id="波形6"value="0"class="インプット_1"></td><td id="波形6_加"class="td_データ"></td> </tr> <tr> <th class="スモール">第七倍音</th><td><input type="range"min="0"max="1"step="0.01"id="左右位相7"value="0"class="インプット_1"></td><td id="左右位相7_加"class="td_データ"></td><td><input type="range"min="0"max="1"step="0.01"id="波形7"value="0"class="インプット_1"></td><td id="波形7_加"class="td_データ"></td> </tr> </table> </main> <hr style="margin-top:344px;margin-bottom:30px;"> <div id="波形編集"> <div class="キャンバス"><canvas id="画面"width="700"height="250"></canvas></div> <hr style="margin-top:330px;"> </div> <div id="説明"><img src="wave_display.jpg"width="760"></div> </div> </div> </div> <script> window.addEventListener("load",()=>{const 倍音=new AudioContext(); const おしろすこーぷ=new OscillatorNode(倍音); const 強さ=new GainNode(倍音); const 音色=new AnalyserNode(倍音); おしろすこーぷ.connect(強さ).connect(音色).connect(倍音.destination); 倍音.suspend(); おしろすこーぷ.start(); const 階層=8; const 左右位相=new Float32Array(階層); const 波形=new Float32Array(階層); const きゃぷちゃー=new Float32Array(712); const 波形表示画面=document.getElementById("画面"); const 画面=波形表示画面.getContext('2d'); document.getElementById("停止").addEventListener("click",()=>{倍音.suspend();}); document.getElementById("始まり").addEventListener("click",()=>{波表示(); 倍音.resume();}); document.getElementById("ぼたん_へるつ").addEventListener("input",設定); document.getElementById("ぼたん_ぼりゅーむ").addEventListener("input",設定); for(let 合=0; 合<8;++合){document.getElementById("左右位相"+合).addEventListener("input",波表示); document.getElementById("波形"+合).addEventListener("input",波表示);} 設定(); 波表示(); function 設定(){おしろすこーぷ.frequency.value=document.getElementById("音程_いんたばる").innerHTML=document.getElementById("ぼたん_へるつ").value; 強さ.gain.value=document.getElementById("音量_ぼりゅーむ").innerHTML=document.getElementById("ぼたん_ぼりゅーむ").value;} function 波表示(){for(亜=0; 亜<階層;亜++) {左右位相[亜]=parseFloat(document.getElementById("左右位相"+亜+"_加").innerHTML =document.getElementById("左右位相"+亜).value); 波形[亜]=parseFloat(document.getElementById("波形"+亜+"_加").innerHTML=document.getElementById("波形"+亜).value);} const はーもにっくす=倍音.createPeriodicWave(左右位相,波形); おしろすこーぷ.setPeriodicWave(はーもにっくす);} function もにたりんぐ(){音色.getFloatTimeDomainData(きゃぷちゃー); 画面.fillStyle="#123456"; 画面.fillRect(0,0,712,712); 画面.fillStyle="#aaffaa"; 画面.fillRect(0,128,712,1); for(let 愛=0; 愛<712;++愛){const 部=128-きゃぷちゃー[愛]*128; 画面.fillRect(愛,部,1,128-部);}} setInterval(もにたりんぐ,500);}); document.querySelector("#ぼたん").addEventListener("click",()=>{location.reload();},false); </script> </html>