practice

　　　　

<html>

<meta charset="utf-8">
<div id="ぼたん"class="button">Sound ▶︎</div>
<br><hr><br>
<div>Volume</div>
<input type="range"min="0"max="1"step="0.01"value="0.5"name="volume"id="音量">
<script>
class みでぃ{constructor(連続,おくたーぶ,長さ){const 旋律={"C":-9,"C#": -8, "Cs": -8, "Df": -8,"D":-7,"D#": -6, "Ds": -6, "Ef": -6,"E":-5,"F":-4,"F#": -3, "Fs": -3, "Gf": -3,"G":-2,"G#": -1, "Gs": -1, "Af": -1,"A" :0,"A#":1, "As":1, "Bf":1,"B" :2};
this.detune=旋律[連続]*100+(おくたーぶ-4)*1200;
this.長さ=長さ;}
てんぽ設定(てんぽの設定){てんぽの設定=てんぽの設定 || 60;
return 1*(60/てんぽの設定)/this.長さ*6;}}
class 音色{ctx;
concertPitch;}
class 単音 extends 音色{type="sine";
constructor(type){super();
this.type=type;
this.おしれーたー=null;}
くりっく(detune,start,長さ,出力){const おしれーたー=this.ctx.createOscillator();
おしれーたー.type=this.type;
おしれーたー.frequency.value=this.concertPitch;
おしれーたー.detune.value=detune;
おしれーたー.connect(出力);
おしれーたー.onended=function(){おしれーたー.外し(出力)};
おしれーたー.start(start);
おしれーたー.stop(start+長さ*0.9);
return おしれーたー;}}
class ぴあの演奏 extends 音色{createOsc(detune,gain,start,長さ,出力){const あたっく=0.2;
const でぃけい=0.1;
const 減衰=gain*0.7;
const 継続=0.3;
const おしれーたー=this.ctx.createOscillator();
おしれーたー.frequency.value=this.concertPitch;
おしれーたー.detune.value=detune;
おしれーたー.type="sine";
const 音量_設定=this.ctx.createGain();
const 調節_その1=start;
const 調節_その2=調節_その1+あたっく;
const 調節_その3=調節_その2+でぃけい;
const 調節_その4=調節_その1+長さ;
const 調節_その5=調節_その4+継続;
音量_設定.gain.linearRampToValueAtTime(gain,調節_その2);
音量_設定.gain.setTargetAtTime(減衰,調節_その2,でぃけい)
音量_設定.gain.setTargetAtTime(0,調節_その4,継続);
おしれーたー.connect(音量_設定);
音量_設定.connect(出力);
おしれーたー.onended=function(){おしれーたー.外し(音量_設定);
音量_設定.外し(出力);}
おしれーたー.start(調節_その1);
おしれーたー.stop(調節_その5);
return おしれーたー;}
くりっく(detune,start,長さ,出力){let オシレーター_その1=this.createOsc(detune-3600,0.512,start,長さ*0.064,出力);
let オシレーター_その2=this.createOsc(detune-2400,0.64,start,長さ*0.16,出力);
let オシレーター_その3=this.createOsc(detune-1200,0.8,start,長さ*0.4,出力);
let オシレーター_その4=this.createOsc(detune,1,start,長さ,出力);
let オシレーター_その5=this.createOsc(detune+1200,0.4,start,長さ*0.8,出力);
let オシレーター_その6=this.createOsc(detune+2400,0.16,start,長さ*0.64,出力);
let オシレーター_その7=this.createOsc(detune+3600,0.064,start,長さ*0.512,出力);
return{oscs:[オシレーター_その1,オシレーター_その2,オシレーター_その3,オシレーター_その4,オシレーター_その5,オシレーター_その6,オシレーター_その7],
stop:function(when){for(let おしれーたー of this.oscs){おしれーたー.stop(when)}}};}}
class 楽曲{constructor(音符_休符){this.音符_休符=音符_休符;}
[Symbol.iterator](){return this.音符_休符[Symbol.iterator]();}
static ふれーじんぐ(input){const 音符_休符=[];
let おくたーぶ=4;
let 長さ=4;
for(let こんさーと of input.split(" ")){if(こんさーと==="|" || こんさーと==="" || こんさーと==="\n"){continue;}
let ret=こんさーと.match(/([A-G][#sf]?)([-+]*)(16|8|4|2|1)?/);
if(ret){let 連続=ret[1];
for(let さうんど_部分 of ret[2]){switch(さうんど_部分){case"+":おくたーぶ++;
case"-":おくたーぶ--;}}
if(ret[3]){長さ=parseInt(ret[3]);}
音符_休符.push(new みでぃ(連続,おくたーぶ,長さ));}
else
{throw"ふれーじんぐerror";}}
return new this(音符_休符);}}
class 出演者{constructor(てんぽの設定,音源_音色,concertPitch){this.ctx=new(window.AudioContext || window.webkitAudioContext)();
const gain=this.ctx.createConstantSource();
const 音量_設定=this.ctx.createGain();
音量_設定.gain.value=0.1;
gain.connect(音量_設定.gain);
gain.start();
gain.offset.value=0.5;
音量_設定.connect(this.ctx.destination);
this.出力=音量_設定;
this.強弱=gain;
this.てんぽの設定=てんぽの設定;
this.音源_音色=音源_音色 || new 単音("square");
this.音源_音色.ctx=this.ctx;
this.音源_音色.concertPitch=concertPitch || 440;
this.音_演奏=[];
this.isPlaying=false;}
get gain(){this.強弱.offset.value;}
set gain(gain){this.強弱.offset.value=gain;}
くりっく(楽譜,目印){目印=目印 || 0;
const 長さ=楽譜.てんぽ設定(this.てんぽの設定);
let 音_演奏=this.音源_音色.くりっく(楽譜.detune,目印,長さ,this.出力);
return 音_演奏;}
音源_始まり(作曲){this.isPlaying=true;
let 音_鳴らす=this.ctx.currentTime;
for(let 楽譜 of 作曲){let 音_演奏=this.くりっく(楽譜,音_鳴らす);
音_鳴らす+=楽譜.てんぽ設定(this.てんぽの設定);
this.音_演奏.push(音_演奏);}}
取り消し(){this.isPlaying=false;
for(let 楽譜 of this.音_演奏){楽譜.stop()}}}
function 準備(){const 作曲=楽曲.ふれーじんぐ("\
C | D |\
E | F |\
G | A |\
B | C |\
B | A |\
G | F |\
E | D | C |");
const 演奏=new 出演者(90,new ぴあの演奏());
function 開始(event){if(演奏.isPlaying){ぼたん.innerHTML="Sound ▶︎";
演奏.取り消し();}
else
{ぼたん.innerHTML="|| Pause ||";
演奏.音源_始まり(作曲);}}
function すらいど(event){演奏.gain=音量.value;}
const ぼたん=document.querySelector("#ぼたん");
const 音量=document.querySelector("#音量");
音量.value=演奏.gain;
ぼたん.addEventListener("click",開始,false);
音量.addEventListener("input",すらいど,false);}
準備();
</script>

</html>