DIR : /home/kozerus/public_html/ko/sound3.html
/home/kozerus/public_html/ko
<html>
<head>
<title>/ko/sound3.html</title>
<script id=script_soundplayer>
// Original JavaScript code by Chirp Internet: chirpinternet.eu
// Please acknowledge use of this code by including this header.
function SoundPlayer(audioContext, filterNode) {
this.audioCtx = audioContext;
this.gainNode = this.audioCtx.createGain();
if(filterNode) {
// run output through extra filter (already connected to audioContext)
this.gainNode.connect(filterNode);
} else {
this.gainNode.connect(this.audioCtx.destination);
}
this.oscillator = null;
}
SoundPlayer.prototype.setFrequency = function(val, when) {
if(this.oscillator !== null) {
if(when) {
this.oscillator.frequency.setValueAtTime(val, this.audioCtx.currentTime + when);
} else {
this.oscillator.frequency.setValueAtTime(val, this.audioCtx.currentTime);
}
}
return this;
};
SoundPlayer.prototype.setVolume = function(val, when) {
if(when) {
this.gainNode.gain.exponentialRampToValueAtTime(val, this.audioCtx.currentTime + when);
} else {
this.gainNode.gain.setValueAtTime(val, this.audioCtx.currentTime);
}
return this;
};
SoundPlayer.prototype.setWaveType = function(waveType) {
this.oscillator.type = waveType;
return this;
};
SoundPlayer.prototype.play = function(freq, vol, wave, when) {
this.oscillator = this.audioCtx.createOscillator();
this.oscillator.connect(this.gainNode);
this.setFrequency(freq);
if(wave) {
this.setWaveType(wave);
}
this.setVolume(1/1000);
if(when) {
this.setVolume(1/1000, when - 0.02);
this.oscillator.start(when - 0.02);
this.setVolume(vol, when);
} else {
this.oscillator.start();
this.setVolume(vol, 0.02);
}
return this;
};
SoundPlayer.prototype.stop = function(when) {
if(when) {
this.gainNode.gain.setTargetAtTime(1/1000, this.audioCtx.currentTime + when - 0.05, 0.02);
this.oscillator.stop(this.audioCtx.currentTime + when);
} else {
this.gainNode.gain.setTargetAtTime(1/1000, this.audioCtx.currentTime, 0.02);
this.oscillator.stop(this.audioCtx.currentTime + 0.05);
}
return this;
};
</script id=script_soundplayer>
<script id=script_sound3>
// Original JavaScript code by Chirp Internet: chirpinternet.eu
// Please acknowledge use of this code by including this header.
function SoundPlayer(audioContext, filterNode) {
this.audioCtx = audioContext;
this.gainNode = this.audioCtx.createGain();
if(filterNode) {
// run output through extra filter (already connected to audioContext)
this.gainNode.connect(filterNode);
} else {
this.gainNode.connect(this.audioCtx.destination);
}
this.oscillator = null;
}
SoundPlayer.prototype.setFrequency = function(val, when) {
if(this.oscillator !== null) {
if(when) {
this.oscillator.frequency.setValueAtTime(val, this.audioCtx.currentTime + when);
} else {
this.oscillator.frequency.setValueAtTime(val, this.audioCtx.currentTime);
}
}
return this;
};
SoundPlayer.prototype.setVolume = function(val, when) {
if(when) {
this.gainNode.gain.exponentialRampToValueAtTime(val, this.audioCtx.currentTime + when);
} else {
this.gainNode.gain.setValueAtTime(val, this.audioCtx.currentTime);
}
return this;
};
SoundPlayer.prototype.setWaveType = function(waveType) {
this.oscillator.type = waveType;
return this;
};
SoundPlayer.prototype.play = function(freq, vol, wave, when) {
this.oscillator = this.audioCtx.createOscillator();
this.oscillator.connect(this.gainNode);
this.setFrequency(freq);
if(wave) {
this.setWaveType(wave);
}
this.setVolume(1/1000);
if(when) {
this.setVolume(1/1000, when - 0.02);
this.oscillator.start(when - 0.02);
this.setVolume(vol, when);
} else {
this.oscillator.start();
this.setVolume(vol, 0.02);
}
return this;
};
SoundPlayer.prototype.stop = function(when) {
if(when) {
this.gainNode.gain.setTargetAtTime(1/1000, this.audioCtx.currentTime + when - 0.05, 0.02);
this.oscillator.stop(this.audioCtx.currentTime + when);
} else {
this.gainNode.gain.setTargetAtTime(1/1000, this.audioCtx.currentTime, 0.02);
this.oscillator.stop(this.audioCtx.currentTime + 0.05);
}
return this;
};
</script>
<script src="/ko/soundplayer.js"></script>
<script id=script_playnote>
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audio = new AudioContext();
const playNote = (e) => {
// play note according to data-frequency attribute
(new SoundPlayer(audio)).play(e.target.dataset.frequency, 0.8, "sine").stop(0.5);
e.cancelBubble = true;
};
for(let el of document.getElementById("piano").getElementsByTagName("DIV")) {
el.addEventListener("click", playNote, false);
}
</script id=script_playnote_end>>
<script id=script_audio_compressor>
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audio = new AudioContext();
const compressor = audio.createDynamicsCompressor();
compressor.connect(audio.destination);
const playNote = (e) => {
// play note according to data-frequency attribute
(new SoundPlayer(audio, compressor)).play(e.target.dataset.frequency, 0.8, "sine").setVolume(1/1000, 0.55).stop(0.6);
e.cancelBubble = true;
};
for(let el of document.getElementById("piano").getElementsByTagName("DIV")) {
el.addEventListener("click", playNote, false);
}
</script id=script_audio_compressor_end >
<script id=script_play>
(new SoundPlayer(audio)).play(587.3, 0.5, "sine").stop(0.25);
(new SoundPlayer(audio)).play(587.3, 0.5, "sine", 0.3).stop(0.35);
(new SoundPlayer(audio)).play(659.3, 0.5, "sine", 0.4).stop(0.55);
(new SoundPlayer(audio)).play(587.3, 0.5, "sine", 0.6).stop(0.75);
(new SoundPlayer(audio)).play(784.0, 0.5, "sine", 0.8).stop(0.95);
(new SoundPlayer(audio)).play(740.0, 0.5, "sine", 1.0).stop(1.40);
</script>
</head>
<body bgcolor=linen>
<h1>/ko/sound3.html</h1>
<div id="piano">
<div data-frequency="261.626" data-note="C">
<div data-frequency="277.18" data-note="C#"></div>
</div>
<div data-frequency="293.665" data-note="D">
<div data-frequency="311.127" data-note="D#"></div>
</div>
<div data-frequency="329.628" data-note="E"></div>
<div data-frequency="349.228" data-note="F">
<div data-frequency="369.994" data-note="F#"></div>
</div>
...
</div>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer