webaudiofont
Version:
Soundfonts for web. About of 2000 musical instruments. GM MIDI compatible.
82 lines (81 loc) • 2.86 kB
HTML
<html>
<head>
<script src='../npm/dist/WebAudioFontPlayer.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/1250_JCLive_sf2_file.js'></script>
<script>
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player=new WebAudioFontPlayer();
player.loader.decodeAfterLoading(audioContext, '_tone_1250_JCLive_sf2_file');
var selectedPreset=_tone_1250_JCLive_sf2_file;
var started=false;
var envelope=null;
var initialRate=1;
var ratio=1;
for(var i=0;i<selectedPreset.zones.length;i++){
selectedPreset.zones[i].ahdsr=false;
}
function startCar(){
started=true;
envelope=player.queueWaveTable(audioContext, audioContext.destination, selectedPreset, 0, 12*5+0, 999);
initialRate=envelope.audioBufferSourceNode.playbackRate.value;
}
function faster(){
if(!started){
startCar();
showRace();
return;
}
if(ratio<3){
ratio++;
applyNewRatio();
}else{
console.log('max speed');
}
}
function slower(){
if(!started){
startCar();
showRace();
return;
}
if(ratio>1){
ratio--;
applyNewRatio();
}else{
console.log('min speed');
}
}
function applyNewRatio(){
envelope.audioBufferSourceNode.playbackRate.cancelScheduledValues(audioContext.currentTime);
envelope.audioBufferSourceNode.playbackRate.setValueAtTime(envelope.audioBufferSourceNode.playbackRate.value, audioContext.currentTime+0.1);
envelope.audioBufferSourceNode.playbackRate.linearRampToValueAtTime(initialRate*ratio, audioContext.currentTime+2);
showRace();
}
function showRace() {
document.getElementById("r0").style.display = "none";
document.getElementById("r1").style.display = "none";
document.getElementById("r2").style.display = "none";
if (ratio == 1) {
document.getElementById("r0").style.display = "inline";
} else {
if (ratio == 2) {
document.getElementById("r1").style.display = "inline";
} else {
document.getElementById("r2").style.display = "inline";
}
}
}
</script>
</head>
<body>
<p>
<a href="#" onmousedown="faster();">Faster</a> | <a href="#" onmousedown="slower();">Slower</a>
</p>
<p id="r0" style="display:none;"><img src="https://surikov.github.io/webaudiofont/img/race0.gif"></p>
<p id="r1" style="display:none;"><img src="https://surikov.github.io/webaudiofont/img/race1.gif"></p>
<p id="r2" style="display:none;"><img src="https://surikov.github.io/webaudiofont/img/race2.gif"></p>
<hr/>
<p><a href="https://surikov.github.io/webaudiofont/">source</a></p>
</body>
</html>