<!doctype html>
<html>
<head>
<title>HTML5 Web Audio API Usage - RJM Programming - June, 2019 - Thanks to https://www.html5rocks.com/en/tutorials/webaudio/intro/</title>
<style>
button { background-color: yellow; }
input { background-color: pink; }
</style>
<script type='text/javascript'>
if(1 == 2) {
var context;
window.addEventListener('load', init, false);
function init() {
try {
// Fix up for prefixing
window.AudioContext = window.AudioContext||window.webkitAudioContext;
context = new AudioContext();
}
catch(e) {
alert('Web Audio API is not supported in this browser');
}
}
}
if (1 == 3) {
var oneToFiftyNineBuffer = null;
// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var wcontext = new AudioContext();
function load1to59Sound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
wcontext.decodeAudioData(request.response, function(buffer) {
oneToFiftyNineBuffer = buffer;
}, onError = function() { alert('oops'); });
}
request.send();
}
}
window.onload = init;
var nostop=false;
var context;
var bufferLoader;
var gvo=null;
var source=null;
var source1 = null; //context.createBufferSource();
var source2 = null; //context.createBufferSource();
var source3 = null; //context.createBufferSource();
var source4 = null; //context.createBufferSource();
for (var ii=5; ii<500; ii++) {
eval("var source" + ii + " = null;"); //context.createBufferSource();
}
var source1p = false; //context.createBufferSource();
var source2p = false; //context.createBufferSource();
var source3p = false; //context.createBufferSource();
var source4p = false; //context.createBufferSource();
var ioffset=0;
var lastbo=null;
var sb=[];
var ioffs=[0,0,0,0];
var whichs='';
function BufferLoader(context, urlList, callback) { // thanks to https://stackoverflow.com/questions/17333777/uncaught-reference-error-bufferloader-is-not-defined
this.context = context;
this.urlList = urlList;
this.onload = callback;
this.bufferList = new Array();
this.loadCount = 0;
}
BufferLoader.prototype.loadBuffer = function(url, index) {
// Load buffer asynchronously
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var loader = this;
request.onload = function() {
// Asynchronously decode the audio file data in request.response
loader.context.decodeAudioData(
request.response,
function(buffer) {
if (!buffer) {
alert('error decoding file data: ' + url);
return;
}
loader.bufferList[index] = buffer;
if (++loader.loadCount == loader.urlList.length)
loader.onload(loader.bufferList);
},
function(error) {
console.error('decodeAudioData error', error);
}
);
}
request.onerror = function() {
alert('BufferLoader: XHR error');
}
request.send();
}
BufferLoader.prototype.load = function() {
for (var i = 0; i < this.urlList.length; ++i)
this.loadBuffer(this.urlList[i], i);
}
function init() { // thanks to https://www.html5rocks.com/en/tutorials/webaudio/intro/
// Fix up prefixing
// './past_quarterto.m4a',
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
bufferLoader = new BufferLoader(
context,
[
'../PHP/macbetha1s1.m4a',
'./one_to_fiftynine.m4a',
'./am_pm.m4a',
'./past_quarterto.m4a',
],
finishedLoading
);
bufferLoader.load();
}
function andthen() {
if (gvo) { gvo.play(); }
}
function andnotthen() {
document.getElementById('dvideo').innerHTML='<video onclick="this.play();" id=ivideo src="../PHP/macbetha1s1.m4v"></video>';
}
function startit() {
if (whichs != '') {
if (1 == 2) { eval("if (source" + eval(whichs % 400) + "p) { if (!source" + eval(whichs % 400) + ".start) { source" + eval(whichs % 400) + ".start = source" + eval(whichs % 400) + ".noteOn; } else if (1 == 6 && source" + whichs + "p) { var source" + whichs + " = context.createBufferSource(); source" + whichs + ".buffer = sb[" + eval(-1 + eval(whichs % 4)) + "]; source" + whichs + ".connect(context.destination); } }"); }
}
}
function stopit() {
if (whichs != '') {
//eval("if (!source" + whichs + ".stop) { source" + whichs + ".stop = source" + whichs + ".noteOff; } else if (source" + whichs + "p) { source" + whichs + ".stop(); }");
//whichs='';
eval(" if (source" + whichs + "p) { source" + whichs + ".stop(); }");
if (lastbo) {
lastbo.style.border='';
lastbo.innerHTML=lastbo.innerHTML.split(' ... ')[0];
lastbo=null;
}
}
}
function other(ioth, bo) {
var prefix="";
if (!nostop) { stopit(); } else { lastbo=null; }
if (whichs == "") { whichs="" + ioth; }
whichs="" + eval(ioffs[eval(-1 + eval('' + ioth))] + ioth);
//startit();
eval("source" + whichs + "p=true;");
if (document.getElementById('loop1').checked || document.getElementById('loop2').checked) { prefix="🔁"; eval("source" + whichs + ".loop = true;"); }
var sendb=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ");").replace("(,)", "(0)").replace("(,", "(0,").replace(",)", ",0)");
var suffix=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ")").replace("(,)", "").replace("(0,0)", "").replace("(0,)", "").replace("(,0)", "").replace("(,", ",").replace(",)", "").trim();
eval("source" + whichs + ".start" + sendb);
if (document.getElementById('loop1').checked || document.getElementById('loop2').checked || sendb.replace(/0/g,'').replace(/\,/g,'').replace('(','').replace(')','') != '') {
//alert(suffix.replace('(', ' @ ').replace(',', ' in ').replace(')', ' secs'));
if ((prefix + ' ' + suffix.replace('(', ' @ ').replace(',', ' in ').replace(')', ' secs')).trim() == '') {
bo.innerHTML=bo.innerHTML.split(' ... ')[0];
} else {
bo.innerHTML=bo.innerHTML.split(' ... ')[0] + ' ... ' + prefix + ' ' + suffix.replace('(', ' in ').replace(',', ' @ ').replace(')', ' secs');
}
} else if (bo.innerHTML.indexOf(' ... ') != -1) {
bo.innerHTML=bo.innerHTML.split(' ... ')[0];
}
bo.style.border='1px inset red';
if (1 == 5 && (document.getElementById('loop1').checked || document.getElementById('loop2').checked)) {
lastbo=null;
} else {
lastbo=bo;
}
ioffs[eval(-1 + ioth)]+=4;
ioffset=ioffs[eval(-1 + ioth)];
eval("source" + eval(ioffset + ioth) + "p=false;");
eval("source" + eval(ioffset + ioth) + " = context.createBufferSource(); source" + eval(ioffset + ioth) + ".buffer = sb[" + eval(-1 + ioth) + "]; source" + eval(ioffset + ioth) + ".connect(context.destination); ");
nostop=false;
document.getElementById('startingat').value='';
document.getElementById('startingin').value='';
document.getElementById('loop1').checked=false;
document.getElementById('loop2').checked=false;
}
function macbetha1s1(vo, bo) {
var prefix="";
if (vo) { andnotthen(); gvo=document.getElementById('ivideo'); setTimeout(andthen, 500); }
if (!nostop) { stopit(); }
if (whichs == "") { whichs="1"; }
whichs="" + eval(ioffs[0] + 1);
//startit();
eval("source" + whichs + "p=true;");
if (document.getElementById('loop1').checked || document.getElementById('loop2').checked) { prefix="🔁"; eval("source" + whichs + ".loop = true;"); }
var sendb=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ");").replace("(,)", "(0)").replace("(,", "(0,").replace(",)", ",0)");
var suffix=("(" + document.getElementById('startingin').value + "," + document.getElementById('startingat').value + ")").replace("(,)", "").replace("(0,0)", "").replace("(0,)", "").replace("(,0)", "").replace("(,", ",").replace(",)", "").trim();
eval("source" + whichs + ".start" + sendb);
if (document.getElementById('loop1').checked || document.getElementById('loop2').checked || sendb.replace(/0/g,'').replace(/\,/g,'').replace('(','').replace(')','') != '') {
//alert(suffix.replace('(', ' @ ').replace(',', ' in ').replace(')', ' secs'));
if ((prefix + ' ' + suffix.replace('(', ' @ ').replace(',', ' in ').replace(')', ' secs')).trim() == '') {
bo.innerHTML=bo.innerHTML.split(' ... ')[0];
} else {
bo.innerHTML=bo.innerHTML.split(' ... ')[0] + ' ... ' + prefix + ' ' + suffix.replace('(', ' in ').replace(',', ' @ ').replace(')', ' secs');
}
} else if (bo.innerHTML.indexOf(' ... ') != -1) {
bo.innerHTML=bo.innerHTML.split(' ... ')[0];
}
bo.style.border='1px inset red';
if (1 == 5 && (document.getElementById('loop1').checked || document.getElementById('loop2').checked)) {
lastbo=null;
} else {
lastbo=bo;
}
ioffs[eval(-1 + eval(eval(whichs) % 4))]+=4;
ioffset=ioffs[eval(-1 + eval(eval(whichs) % 4))];
eval("source" + eval(ioffset + 1) + "p=false;");
eval("source" + eval(ioffset + 1) + " = context.createBufferSource(); source" + eval(ioffset + 1) + ".buffer = sb[" + eval(-1 + eval(eval(whichs) % 4)) + "]; source" + eval(ioffset + 1) + ".connect(context.destination); ");
nostop=false;
document.getElementById('startingat').value='';
document.getElementById('startingin').value='';
document.getElementById('loop1').checked=false;
document.getElementById('loop2').checked=false;
}
function finishedLoading(bufferList) {
// Create two sources and play them both together.
source1 = context.createBufferSource();
source2 = context.createBufferSource();
source3 = context.createBufferSource();
source4 = context.createBufferSource();
source1.buffer = bufferList[0];
sb.push(bufferList[0]);
source2.buffer = bufferList[1];
sb.push(bufferList[1]);
source3.buffer = bufferList[2];
sb.push(bufferList[2]);
source4.buffer = bufferList[3];
sb.push(bufferList[3]);
source1.connect(context.destination);
source2.connect(context.destination);
source3.connect(context.destination);
source4.connect(context.destination);
//if (vo) { gvo=vo; setTimeout(andthen, 500); }
//source1.start(0);
//source2.start(0);
//source3.start(0);
//source4.start(0);
}
</script>
</head>
<body>
<h1>HTML5 Web Audio API Usage <input id=startingat type=number value='' min=0 step=1 placeholder="Starting at [0] seconds"></input> <input id=startingin type=number value='' min=0 step=1 placeholder="Starting in [0] seconds"></input></h1>
<h3>RJM Programming - June, 2019 - Thanks to <a target=_blank href='https://www.html5rocks.com/en/tutorials/webaudio/intro/' title='Getting Started with Web Audio API'>Getting Started with Web Audio API</a></h3>
<table><tr><td><button onclick="macbetha1s1(document.getElementById('ivideo'), this);">Macbeth Act 1 Scene 1</button></td>
<td><button onclick="if (gvo) { andnotthen(); } other(2, this); ">1 to 59</button></td>
<td><button onclick="if (gvo) { andnotthen(); } other(3, this); ">AM PM</button></td>
<td><button onclick="if (gvo) { andnotthen(); } other(4, this); ">Past Quarter To</button></td>
<td>Loop: <input type=checkbox id=loop1></input></td>
</tr><tr><td><button onclick="nostop=true; macbetha1s1(document.getElementById('ivideo'), this);">+Macbeth Act 1 Scene 1</button></td>
<td><button onclick="nostop=true; if (gvo) { andnotthen(); } other(2, this); ">+1 to 59</button></td>
<td><button onclick="nostop=true; if (gvo) { andnotthen(); } other(3, this); ">+AM PM</button></td>
<td><button onclick="nostop=true; if (gvo) { andnotthen(); } other(4, this); ">+Past Quarter To</button></td>
<td>Loop: <input type=checkbox id=loop2></input></td>
</tr></table><br>
<div id=dvideo><video id=ivideo src="../PHP/macbetha1s1.m4v"></video></div>
</body>
</html>