practice

<html>

<div class="コンテナ_ミキサー">
<div class="コンポーネント_スイッチ">
<div class="ボックス_スイッチ">
<div class="ホバー_オン_スイッチ">ON</div>
<div class="ランプ_スイッチ"></div>
</div>
</div>
<div class="ボックス_EQ_01">
<div class="コンポーネント_EQ_01">
<div class="イコライザー_TXT">6 Band Graphic EQ</div>
<input type="range"class="グライコ"data-height="120"data-width="10">
<input type="range"class="グライコ"data-height="120"data-width="10">
<input type="range"class="グライコ"data-height="120"data-width="10">
<input type="range"class="グライコ"data-height="120"data-width="10">
<input type="range"class="グライコ"data-height="120"data-width="10">
<input type="range"class="グライコ"data-height="120"data-width="10">
</div></div>
<div class="コンポーネント_タッチ">
<div class="ボリューム_タッチ">
<div class="ボリューム_サークル_タッチ">
<div class="ボリューム_ダイアル_タッチ">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div>
<div class="センター_ポイント_タッチ">
<div class="ダイアル_タッチ">
<div></div></div></div></div>
<div class="コンポーネント_オート_ターン">
<div class="ボリューム_メモリ_オート_ターン">
<div class="ボリューム_メモリ_ターン">
<div class="ボリューム_ターン">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div>
<div class="センター_ターン">
<div class="ダイアル_オート_ターン">
<div></div></div></div></div>
<div class="コンポーネント_ノブ">
<input type="range"class="ブラック_ノブ">
<input type="range"class="ブラック_ノブ">
<input type="range"class="ブラック_ノブ">
</div>
<div class="コンポーネント_エフェクト_オン">
<input type="checkbox"class="エフェクト_オン">
<input type="checkbox"class="エフェクト_オン"style="margin-left:42px;">
<input type="checkbox"class="エフェクト_オン"style="margin-left:42px;">
</div>
<div class="コンポーネント_エフェクト_スイッチ">
<input type="radio"name="UP_Down"class="エフェクト_オン"data-src="pole_piece_B.png"data-diameter="50">
<input type="radio"name="UP_Down"class="エフェクト_オン"data-src="pole_piece_B.png"data-diameter="50">
<input type="radio"name="UP_Down"class="エフェクト_オン"data-src="pole_piece_B.png"data-diameter="50">
</div>
<div class="コンポーネント_ヘッドフォン">
<input type="range"class="ブラック_ノブ"data-width="200"data-height="30"data-H_PHONE="50"data-src="pole_piece_C.png">
</div>
<div class="コンポーネント_パン">
<input type="range">
</div>
<hr style="margin-top:230px;">
<div style="margin-left:20px">
<button onclick="SetLang('en')"style="width:80px">English</button> | <button onclick="SetLang('ja')" style="width:80px">Japanese</button> <span style="font-size:12px;color:gray;">English Version | 日本語表記</span>
</div>
<div class="テキスト">
<p style="font-size:16px;font-weight:bold;margin-top:0;">Introduction - Main features of this unit / はじめに - SC8.8の特長</p>
<p lang="en">This unit is a sound module compatible with the General MIDI system. It can be used to play back any song data (General MIDI scores) bearing the General MIDI logo. This unit is also compatible with the original GS format. It can be used to playback any song data bearing the GS logo.</p>
<p lang="en">This unit is a 8 part 2 voice multi timbral sound module. A single this unit can produce the sounds of a large ensemble. It is an ideal sound module for use with sequencers or personal computers.</p>
<p lang="en">This unit contains 16 high quality sounds and 2 types of drum sound set (including 1 percussions sets). These sound include the same sounds as the SC2.2 and SC4.4, allowing SC2.2 and SC4.4 song data to be played back correctly.</p>
<p lang="en">A wide variety of effects are provided: 4 types of insertion effect, 2 types each of reverb and chorus effects, 1 type of delay, and 6 band equalizer. In addition, the values of relevant parameters can be set for each effect, allowing professional level manipulation of sound.</p>
<p lang="en">There are 2 user sounds and 1 user drum sets, allowing you to create your own sounds and drum sets.</p>
<p lang="en">By editing sound parameters such as vibrato, filter and envelope, you can modify sounds to your taste.</p>
<p lang="en">The computer connector allows this unit to be directly connected to an Apple or IBM personal computer.</p>
<p lang="en">Audio input jacks with input level adiustment allow you to connect another sound source, and output it from the audio output jacks mixed with this unit's own sound. Two sets of audio output jacks are also provided.</p>
<p lang="ja">SC8.8はGMシステムに適合した音源です. GMマークのついたミュージック・データ(GMスコア)で演奏させることができます. また, SC8.8はオリジナルの共通仕様であるGSフォーマットの音源です. GSマークのついた市販のミュージック・データで演奏することができます.</p>
<p lang="ja">SC8.8は8パート2ボイスのマルチ・ティンバー音源です. SC8.8一台で壮大なアンサンブル演奏が可能です. コンピューター・ミュージックの音源として最適です.</p>
<p lang="ja">SC8.8は高品位で多彩な16音色とドラム・セット2種類(1つのパーカッション・セットを含む)を備えています. その中にはSC2.2およびSC4.4の音色と同じ音色を含んでいますので, SC2.2およびSC4.4の演奏が簡単に再現できます.</p>
<p lang="ja">エフェクトは4種類の4エフェクト(リバーブが2種類/コーラスが1種類), ディレイが1種類, そして6バンドのイコライザーと豊富です. さらにそれぞれのエフェクトごとに適したパラメーターの値が設定できるので, 本格的な音作りが可能です.</p>
<p lang="ja">ユーザー音色を2音色, ユーザー・ドラム・セットを1種類作ることができますのでオリジナルな音色とドラム・セットを使って演奏できます.</p>
<p lang="ja">ビブラート / フィルター / エンベロープなどの音色パラメーターをエディットすることで好みの音づくりが可能です.</p>
<p lang="ja">コンピューター端子の装備により Apple / IBM / NECのパーソナル・コンピューターと直接接続して演奏できます.</p>
<p lang="ja">多くの音色パラメーターをダイレクトなボタン操作で簡単にエディットできます. 入力ボリューム付きのオーディオ入力端子により, 他の音源の出力とミキシングしてオーディオ出力端子から出力できます. またオーディオ出力端子は２系統装備されています.</p>
</div>

</div>
<script>
function addText(英文,文字変換){文字変換=英文.value+文字変換;
let 横=文字変換.split("\n");
if(横.length>英文.横)
横.shift();
英文.value=横.join("\n");}
function SetLang(x)
{let 英文=document.getElementsByTagName("*");
for(let 愛=0;愛<英文.length;++愛)
{if(英文[愛].lang==x||英文[愛].lang=="")
英文[愛].style.display=英文[愛].displaybackup;
else{if(英文[愛].style.display!="none")
英文[愛].displaybackup=英文[愛].style.display;
英文[愛].style.display="none";}}}
function GetLang()
{return(navigator.language || navigator.browserLanguage).substring(0,2);}
SetLang(GetLang())
window.addEventListener("load",()=>
{let op=window.すいっち類||{};
op.knobWidth=op.knobWidth||op.knobDiameter||64;
op.knobHeight=op.knobHeight||op.knobDiameter||64;
op.sliderWidth=op.sliderWidth||op.sliderDiameter||128;
op.sliderHeight=op.sliderHeight||op.sliderDiameter||20;
op.switchWidth=op.switchWidth||op.switchDiameter||24;
op.switchHeight=op.switchHeight||op.switchDiameter||24;
op.fgcolor=op.fgcolor||"white";
op.bgcolor=op.bgcolor||"gray";
op.knobMode=op.knobMode||"linear";
op.sliderMode=op.sliderMode||"relative";
let styles=document.createElement("style");
styles.innerHTML=`input[type=range].ブラック_ノブ,input[type=range].グライコ{-webkit-appearance:none;
-moz-appearance:none;
border:none;
box-sizing:border-box;
overflow:hidden;
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0px 0%;
background-color:transparent;
touch-action:none;}
input[type=range].ブラック_ノブ{width:${op.knobWidth}px; height:${op.knobHeight}px;}
input[type=range].グライコ{width:${op.sliderWidth}px; height:${op.sliderHeight}px;}
input[type=range].ブラック_ノブ::-webkit-slider-thumb,input[type=range].グライコ::-webkit-slider-thumb{-webkit-appearance:none;
opacity:0;}
input[type=range].ブラック_ノブ::-moz-range-thumb,input[type=range].グライコ::-moz-range-thumb{-moz-appearance:none;
height:0;
border:none;}
input[type=range].ブラック_ノブ::-moz-range-track,input[type=range].グライコ::-moz-range-track{-moz-appearance:none;
height:0;
border:none;}
input[type=checkbox].エフェクト_オン,input[type=radio].エフェクト_オン{width:${op.switchWidth}px;
height:${op.switchHeight}px;
-webkit-appearance:none;
-moz-appearance:none;
background-size:100% 200%;
background-position:0% 0%;
background-repeat:no-repeat;
border:none;
border-radius:0;
background-color:transparent;}
input[type=checkbox].エフェクト_オン:checked,input[type=radio].エフェクト_オン:checked{background-position:0% 100%;}`;
document.head.appendChild(styles);
let makeKnobFrames=(fr,fg,bg)=>
{let r=`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="${fr*64}" viewBox="0 0 64 ${fr*64}" preserveAspectRatio="none">
<defs><g id="K"><circle cx="32" cy="32" r="30" fill="${bg}"/>
<line x1="32" y1="28" x2="32" y2="7" stroke-linecap="round" stroke-width="6" stroke="${fg}"/></g></defs>
<use xlink:href="#K" transform="rotate(-135,32,32)"/>`;
for(let i=1;i<fr;++i)
r+=`<use xlink:href="#K" transform="translate(0,${64*i}) rotate(${-135+270*i/fr},32,32)"/>`;
return r+"</svg>";}
let makeHSliderFrames=(fr,fg,bg,w,h)=>
{let r=`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${fr*h}" viewBox="0 0 ${w} ${fr*h}" preserveAspectRatio="none">
<defs><g id="B"><rect x="0" y="0" width="${w}" height="${h}" rx="${h/2}" ry="${h/2}" fill="${bg}"/></g>
<g id="K"><circle x="${w/2}" y="0" r="${h/2*0.9}" fill="${fg}"/></g></defs>`;
for(let i=0;i<fr;++i){r+=`<use xlink:href="#B" transform="translate(0,${h*i})"/>`;
r+=`<use xlink:href="#K" transform="translate(${h/2+(w-h)*i/100},${h/2+h*i})"/>`;}
return r+"</svg>";}
let makeVSliderFrames=(fr,fg,bg,w,h)=>
{let r=`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${fr*h}" viewBox="0 0 ${w} ${fr*h}" preserveAspectRatio="none">
<defs><rect id="B" x="0" y="0" width="${w}" height="${h}" rx="${w/2}" ry="${w/2}" fill="${bg}"/>
<circle id="K" x="0" y="0" r="${w/2*0.9}" fill="${fg}"/></defs>`;
for(let i=0;i<fr;++i)
{r+=`<use xlink:href="#B" transform="translate(0,${h*i})"/>`;
r+=`<use xlink:href="#K" transform="translate(${w/2} ${h*(i+1)-w/2-i*(h-w)/100})"/>`;}
return r+"</svg>";}
let initSwitches=(el)=>
{let w,h,d,fg,bg;
if(el.inputKnobs)
return;
el.inputKnobs={};
el.refresh=()=>
{let src=el.getAttribute("data-src");
d=+el.getAttribute("data-diameter");
let st=document.defaultView.getComputedStyle(el,null);
w=parseFloat(el.getAttribute("data-width")||d||st.width);
h=parseFloat(el.getAttribute("data-height")||d||st.height);
bg=el.getAttribute("data-bgcolor")||op.bgcolor;
fg=el.getAttribute("data-fgcolor")||op.fgcolor;
el.style.width=w+"px";
el.style.height=h+"px";
if(src)
el.style.backgroundImage="url("+src+")";
else{let minwh=Math.min(w,h);
let svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h*2}" viewBox="0 0 ${w} ${h*2}" preserveAspectRatio="none">
<g><rect fill="${bg}" x="1" y="1" width="${w-2}" height="${h-2}" rx="${minwh*0.25}" ry="${minwh*0.25}"/>
<rect fill="${bg}" x="1" y="${h+1}" width="${w-2}" height="${h-2}" rx="${minwh*0.25}" ry="${minwh*0.25}"/>
<circle fill="${fg}" cx="${w*0.5}" cy="${h*1.5}" r="${minwh*0.25}"/></g></svg>`;
el.style.backgroundImage="url(data:image/svg+xml;base64,"+btoa(svg)+")";}};
el.refresh();};
let initKnobs=(el)=>{let w,h,d,fg,bg;
if(el.inputKnobs){el.redraw();
return;}
let ik=el.inputKnobs={};
el.refresh=()=>{d=+el.getAttribute("data-diameter");
let st=document.defaultView.getComputedStyle(el,null);
w=parseFloat(el.getAttribute("data-width")||d||st.width);
h=parseFloat(el.getAttribute("data-height")||d||st.height);
bg=el.getAttribute("data-bgcolor")||op.bgcolor;
fg=el.getAttribute("data-fgcolor")||op.fgcolor;
ik.sensex=ik.sensey=200;
if(el.className.indexOf("ブラック_ノブ")>=0)
ik.itype="k";
else{if(w>=h){ik.itype="h";
ik.sensex=w-h;
ik.sensey=Infinity;
el.style.backgroundSize="auto 100%";}
else{ik.itype="v";
ik.sensex=Infinity;
ik.sensey=h-w;
el.style.backgroundSize="100% auto";}}
el.style.width=w+"px";
el.style.height=h+"px";
ik.frameheight=h;
let src=el.getAttribute("data-src");
if(src){el.style.backgroundImage=`url(${src})`;
let sp=+el.getAttribute("data-H_PHONE");
if(sp)
ik.sprites=sp;
else
ik.sprites=0;
if(ik.sprites>=1)
el.style.backgroundSize=`100% ${(ik.sprites+1)*100}%`;
else if(ik.itype!="k"){
el.style.backgroundColor=bg;
el.style.borderRadius=Math.min(w,h)*0.25+"px";}}
else{let svg;
switch(ik.itype){
case"k":svg=makeKnobFrames(101,fg,bg);break;
case"h":svg=makeHSliderFrames(101,fg,bg,w,h);break;
case"v":svg=makeVSliderFrames(101,fg,bg,w,h);break;}
ik.sprites=100;
el.style.backgroundImage="url(data:image/svg+xml;base64,"+btoa(svg)+")";
el.style.backgroundSize=`100% ${(ik.sprites+1)*100}%`;}
ik.valrange={min:+el.min, max:(el.max=="")?100:+el.max,step:(el.step=="")?1:+el.step};
el.redraw(true);};
el.setValue=(v)=>{v=(Math.round((v-ik.valrange.min)/ik.valrange.step))*ik.valrange.step+ik.valrange.min;
if(v<ik.valrange.min)v=ik.valrange.min;
if(v>ik.valrange.max)v=ik.valrange.max;
el.value=v;
if(el.value!=ik.oldvalue)
{el.setAttribute("value",el.value);
el.redraw();
let event=document.createEvent("HTMLEvents");
event.initEvent("input",false,true);
el.dispatchEvent(event);
ik.oldvalue=el.value;}};
ik.pointerdown=(ev)=>{el.focus();
const evorg=ev;
if(ev.touches)
ev=ev.touches[0];
let rc=el.getBoundingClientRect();
let cx=(rc.left+rc.right)*0.5,cy=(rc.top+rc.bottom)*0.5;
let dx=ev.clientX,dy=ev.clientY;
let da=Math.atan2(ev.clientX-cx,cy-ev.clientY);
if(ik.itype=="k"&&op.knobMode=="circularabs")
{dv=ik.valrange.min+(da/Math.PI*0.75+0.5)*(ik.valrange.max-ik.valrange.min);
el.setValue(dv);}
if(ik.itype!="k"&&op.sliderMode=="abs")
{dv=(ik.valrange.min+ik.valrange.max)*0.5+((dx-cx)/ik.sensex-(dy-cy)/ik.sensey)*(ik.valrange.max-ik.valrange.min);
el.setValue(dv);}
ik.dragfrom={x:ev.clientX,y:ev.clientY,a:Math.atan2(ev.clientX-cx,cy-ev.clientY),v:+el.value};
document.addEventListener("mousemove",ik.pointermove);
document.addEventListener("mouseup",ik.pointerup);
document.addEventListener("touchmove",ik.pointermove);
document.addEventListener("touchend",ik.pointerup);
document.addEventListener("touchcancel",ik.pointerup);
document.addEventListener("touchstart",ik.preventScroll);
evorg.preventDefault();
evorg.stopPropagation();};
ik.pointermove=(ev)=>
{let dv;
let rc=el.getBoundingClientRect();
let cx=(rc.left+rc.right)*0.5,cy=(rc.top+rc.bottom)*0.5;
if(ev.touches)
ev = ev.touches[0];
let dx=ev.clientX-ik.dragfrom.x,dy=ev.clientY-ik.dragfrom.y;
let da=Math.atan2(ev.clientX-cx,cy-ev.clientY);
switch(ik.itype)
{case "k":
switch(op.knobMode){case "linear":
dv=(dx/ik.sensex-dy/ik.sensey)*(ik.valrange.max-ik.valrange.min);
if(ev.shiftKey)
dv*=0.2;
el.setValue(ik.dragfrom.v+dv);
break;
case"circularabs":
if(!ev.shiftKey){dv=ik.valrange.min+(da/Math.PI*0.75+0.5)*(ik.valrange.max-ik.valrange.min);
el.setValue(dv);
break;}
case"circularrel":
if(da>ik.dragfrom.a+Math.PI) da-=Math.PI*2;
if(da<ik.dragfrom.a-Math.PI)da+=Math.PI*2;
da-=ik.dragfrom.a;
dv=da/Math.PI/1.5*(ik.valrange.max-ik.valrange.min);
if(ev.shiftKey)
dv*=0.2;
el.setValue(ik.dragfrom.v+dv);}
break;
case"h":
case"v":
dv=(dx/ik.sensex-dy/ik.sensey)*(ik.valrange.max-ik.valrange.min);
if(ev.shiftKey)
dv*=0.2;
el.setValue(ik.dragfrom.v+dv);
break;}};
ik.pointerup=()=>{document.removeEventListener("mousemove",ik.pointermove);
document.removeEventListener("touchmove",ik.pointermove);
document.removeEventListener("mouseup",ik.pointerup);
document.removeEventListener("touchend",ik.pointerup);
document.removeEventListener("touchcancel",ik.pointerup);
document.removeEventListener("touchstart",ik.preventScroll);
let event=document.createEvent("HTMLEvents");
event.initEvent("change",false,true);
el.dispatchEvent(event);};
ik.preventScroll=(ev)=>{ev.preventDefault();};
ik.keydown=()=>{el.redraw();};
ik.wheel=(ev)=>{let delta=ev.deltaY>0?-ik.valrange.step:ik.valrange.step;
if(!ev.shiftKey)
delta*=5;
el.setValue(+el.value+delta);
ev.preventDefault();
ev.stopPropagation();};
el.redraw=(f)=>{if(f||ik.valueold!=el.value)
{let 縦型=(el.value-ik.valrange.min)/(ik.valrange.max-ik.valrange.min);
if(ik.sprites>=1)
el.style.backgroundPosition="0px "+(-((縦型*ik.sprites)|0)*ik.frameheight)+"px";
else{switch(ik.itype){case "k":
el.style.transform="rotate("+(270*縦型-135)+"deg)";
break;
case"絵":
el.style.backgroundPosition=((w-絵)*縦型)+"px 0px";
break;
case"縦型":
el.style.backgroundPosition="0px "+(絵-w)*(1-縦型)+"px";
break;}}
ik.valueold=el.value;}};
el.refresh();
el.redraw(true);
el.addEventListener("keydown",ik.keydown);
el.addEventListener("mousedown",ik.pointerdown);
el.addEventListener("touchstart",ik.pointerdown);
el.addEventListener("wheel",ik.wheel);}
let refreshque=()=>
{let elem=document.querySelectorAll("input.ブラック_ノブ,input.グライコ");
for(let 相=0;相<elem.length;++相)
procque.push([initKnobs,elem[相]]);
elem=document.querySelectorAll("input[type=checkbox].エフェクト_オン,input[type=radio].エフェクト_オン");
for(let 合=0;合<elem.length;++合)
{procque.push([initSwitches,elem[合]]);}}
let procque=[];
refreshque();
setInterval(()=>{for(let 合=0;procque.length>0&&合<8;++合)
{let q=procque.shift();
q[0](q[1]);}
if(procque.length<=0)
refreshque();},50);});
window.すいっち類={}
</script>

</html>