Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Hide whitespace changes
Inline Side-by-side
Showing
with 1106 additions and 126 deletions
maxiLib/maximilian_examples_web/21_maxiAudioAnalysis.html 0 → 100644
View file @ 9ae2ff82
<!--
Copyright 2010, Google Inc.
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
<script src="../maxiLib.js"></script>
<!-- Our javascript code -->
</head>
<body>
<h1> FFT </h1>
<p>
FFT example
</p>
<canvas id="myCanvas" width="700" height="700" style="border:1px solid #c3c3c3;">
<!-- It's a good idea to warn people whose browsers don't support the tag -->
Your browser does not support the canvas element.
</canvas>
</body>
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var fftSize = 1024;
var sampleRate = 44100;
var fft = new maximJs.maxiFFT();
var mfcc = new maximJs.maxiMFCC();
var oct = new maximJs.maxiFFTOctaveAnalyzer();
var nAverages = 12;
fft.setup(fftSize, 512, 256);
mfcc.setup(512, 42, 13, 20, 20000, sampleRate);
oct.setup(sampleRate, fftSize/2, nAverages);
// for storing fft values
/*
required as passing a vector from one class
to another isn't currently working
*/
var magnitudes = new Module.VectorFloat();
var magnitudesDB = new Module.VectorFloat();
// will store mfcc output
var mfccs = new Module.VectorDouble();
for(var i = 0; i < 13; ++i){
mfccs.push_back(0);
}
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(0);
}
var osc = new maximJs.maxiOsc();
// if you want to play a sample...
var samplePlayer = new maximJs.maxiSample();
audio.loadSample("./audio/beat2.wav", samplePlayer);
var magMult = 6;
var fftDraw = {
barsBottom: 600,
barsLeft: 50,
barsSize:1,
magMult: 6
};
var mfccDraw = {
barsBottom: 350,
barsLeft: 350,
barsSize:10,
magMult: 24
};
var octDraw = {
barsBottom: 150,
barsLeft: 350,
barsSize:10,
magMult: 0.5
};
var amtAvgs = 15;
var pitchHist = [];
window.onload = setup;
function setup(){
// This gets the window in the browser
var canvas=document.getElementById("myCanvas");
// This creates a 2d drawing context in it.
context=canvas.getContext("2d");
//finally, we return setInterval, which wants a function to call,
//and a period in milliseconds to wait between calling it.
return setInterval(draw, 40);
}
audio.play = function(){
// create wave for fft
var wave = osc.square(220);
// or use a sample
// var wave = samplePlayer.isReady() ? samplePlayer.play() : 0.0;
// process wave
if(fft.process(wave)){
fft.magsToDB();
// // sorry, this is not nice
Module.vectorTools.clearVectorFloat(magnitudes);
Module.vectorTools.clearVectorFloat(magnitudesDB);
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(fft.getMagnitude(i));
magnitudesDB.push_back(fft.getMagnitudeDB(i));
}
// // pass magnitudes to mfcc and store in mfccs vector
mfcc.mfcc(magnitudes, mfccs);
oct.calculate(magnitudesDB);
}
this.output = wave;
}
//The stuff inside the script tag is very similar to processing code.
function draw() {
//This is basically the same as any other 2D processing draw routine.
//clear the screen
context.clearRect(0,0,700,700);
// fft
context.fillStyle="#FF0000";
context.font = "30px Arial";
context.fillText("FFT",70,200);
for(var i=0; i < fftSize / 2; i++) {
context.beginPath();
context.rect(
fftDraw.barsLeft + i,
fftDraw.barsBottom,
fftDraw.barsSize,
-(fft.getMagnitude(i) * fftDraw.magMult));
context.fill();
context.closePath();
}
// mfcc
context.fillStyle="rgba(0, 220, 0, 0.5)"
context.font = "30px Arial";
context.fillText("MFCC",350,250);
for(var i=0; i < 13; i++) {
context.beginPath();
context.rect(
mfccDraw.barsLeft + i*mfccDraw.barsSize,
mfccDraw.barsBottom,
mfccDraw.barsSize,
(mfccs.get(i) * mfccDraw.magMult));
context.fill();
context.closePath();
}
// octave analyser
var j = 0;
for(var i=0; i < amtAvgs; ++i) {
pitchHist[i] = 0;
}
for (var i = 0; i < oct.nAverages; ++i) {
pitchHist[j] += oct.getAverage(i);
j++;
j = j % amtAvgs;
}
context.fillStyle="rgba(0, 0, 255, 0.5)"
context.font = "30px Arial";
context.fillText("OCT",350,50);
for(var i=0; i < amtAvgs; i++) {
context.beginPath();
context.rect(
octDraw.barsLeft + i*(octDraw.barsSize*1.5),
octDraw.barsBottom,
octDraw.barsSize,
-(pitchHist[i] * octDraw.magMult));
context.fill();
context.closePath();
}
}
</script>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var fft = new maximJs.maxiFFT();
var mfcc = new maximJs.maxiMFCC();
var oct = new maximJs.maxiFFTOctaveAnalyzer();
var nAverages = 12;
// for storing fft values
/*
required as passing a vector from one class
to another isn't currently working
*/
var magnitudes = new Module.VectorFloat();
var magnitudesDB = new Module.VectorFloat();
// will store mfcc output
var mfccs = new Module.VectorDouble();
var osc = new maximJs.maxiOsc();
// if you want to play a sample...
// var samplePlayer = new maximJs.maxiSample();
// audio.loadSample("./audio/beat2.wav", samplePlayer);
var fftSize = 1024;
var sampleRate = 44100;
var magMult = 6;
var fftDraw = {
barsBottom: 600,
barsLeft: 50,
barsSize:1,
magMult: 6
};
var mfccDraw = {
barsBottom: 350,
barsLeft: 350,
barsSize:10,
magMult: 24
};
var octDraw = {
barsBottom: 150,
barsLeft: 350,
barsSize:10,
magMult: 0.5
};
var amtAvgs = 15;
var pitchHist = [];
window.onload = setup;
function setup(){
fft.setup(fftSize, 512, 256);
mfcc.setup(512, 42, 13, 20, 20000, sampleRate);
oct.setup(sampleRate, fftSize/2, nAverages);
for(var i = 0; i < 13; ++i){
mfccs.push_back(0);
}
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(0);
}
// This gets the window in the browser
var canvas=document.getElementById("myCanvas");
// This creates a 2d drawing context in it.
context=canvas.getContext("2d");
//finally, we return setInterval, which wants a function to call,
//and a period in milliseconds to wait between calling it.
return setInterval(draw, 40);
}
audio.play = function(){
// create wave for fft
var wave = osc.square(220);
// or use a sample
// var wave = samplePlayer.isReady() ? samplePlayer.play() : 0.0;
// process wave
if(fft.process(wave)){
fft.magsToDB();
// // sorry, this is not nice
Module.vectorTools.clearVectorFloat(magnitudes);
Module.vectorTools.clearVectorFloat(magnitudesDB);
for(var i = 0; i < fftSize/2; ++i){
magnitudes.push_back(fft.getMagnitude(i));
magnitudesDB.push_back(fft.getMagnitudeDB(i));
}
// // pass magnitudes to mfcc and store in mfccs vector
mfcc.mfcc(magnitudes, mfccs);
oct.calculate(magnitudesDB);
}
this.output = wave;
}
//The stuff inside the script tag is very similar to processing code.
function draw() {
//This is basically the same as any other 2D processing draw routine.
//clear the screen
context.clearRect(0,0,700,700);
// fft
context.fillStyle="#FF0000";
context.font = "30px Arial";
context.fillText("FFT",70,200);
for(var i=0; i < fftSize / 2; i++) {
context.beginPath();
context.rect(
fftDraw.barsLeft + i,
fftDraw.barsBottom,
fftDraw.barsSize,
-(fft.getMagnitude(i) * fftDraw.magMult));
context.fill();
context.closePath();
}
// mfcc
context.fillStyle="rgba(0, 220, 0, 0.5)"
context.font = "30px Arial";
context.fillText("MFCC",350,250);
for(var i=0; i < 13; i++) {
context.beginPath();
context.rect(
mfccDraw.barsLeft + i*mfccDraw.barsSize,
mfccDraw.barsBottom,
mfccDraw.barsSize,
(mfccs.get(i) * mfccDraw.magMult));
context.fill();
context.closePath();
}
// octave analyser
var j = 0;
for(var i=0; i < amtAvgs; ++i) {
pitchHist[i] = 0;
}
for (var i = 0; i < oct.nAverages; ++i) {
pitchHist[j] += oct.getAverage(i);
j++;
j = j % amtAvgs;
}
context.fillStyle="rgba(0, 0, 255, 0.5)"
context.font = "30px Arial";
context.fillText("OCT",350,50);
for(var i=0; i < amtAvgs; i++) {
context.beginPath();
context.rect(
octDraw.barsLeft + i*(octDraw.barsSize*1.5),
octDraw.barsBottom,
octDraw.barsSize,
-(pitchHist[i] * octDraw.magMult));
context.fill();
context.closePath();
}
}
</pre>
</html>
maxiLib/maximilian_examples_web/21_maxiFFT.html → maxiLib/maximilian_examples_web/22_maxiGrains.html
View file @ 9ae2ff82
......@@ -35,87 +35,84 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
<!-- <script src="../libs/maxiLib_maxiFFT.js"></script> -->
<script src="../maxiLib.js"></script>
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var samplePlayer = new maximJs.maxiSample();
var stretch = new Module.maxiPitchStretch();
// var grains = new Module.maxiTimestretch();
// var shift = new Module.maxiPitchShift();
var speed = 0.5;
audio.loadSample("audio/beat2.wav", samplePlayer);
var grainsSet = false;
audio.play = function(){
// this is necessary as file loading may not complete in setup
if(samplePlayer.isReady()){
// set grainPlayer sample
if(!grainsSet){
stretch.setSample(samplePlayer);
// shift.setSample(samplePlayer);
grainsSet = true;
}
this.output = stretch.play(1, 2,0.1, 2, 0);
// this.ouptut = grains.play2(pos, 0.1, 4);
}
}
</script>
</head>
<body>
<h1> FFT </h1>
<h1> Granular Synthesis Example </h1>
<p>
FFT example
</p>
</body>
<script type="text/javascript">
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var fft = new maximJs.maxiFFT();
var osc = new maximJs.maxiOsc();
var fftSize = 1024;
var magMult = 6;
var count = 0;
var updateIncr = 50;
var ignoreCount = false;
var bars = [];
var barsBottom = 600;
var barsLeft = 50;
function setup(){
fft.setup(fftSize, 512, 256);
// create fft display bars
for(var i = 0; i < fftSize/2; i++){
bars.push(document.createElement("p"));
bars[i].setAttribute("id","bar" + i);
bars[i].style.position = "absolute";
bars[i].style.left = barsLeft + i + "px";
bars[i].style.top = barsBottom + "px";
bars[i].style.marginBottom = 50 + "px";
bars[i].style.backgroundColor = "blue";
bars[i].style.width = "1px";
bars[i].style.height = "1px";
document.body.appendChild(bars[i]);
}
var samplePlayer = new maximJs.maxiSample();
}
var stretch = new Module.maxiPitchStretch();
// var grains = new Module.maxiTimestretch();
// var shift = new Module.maxiPitchShift();
function play(){
// create wave for fft
var wave = osc.square(220);
// process wave
if(fft.process(wave)){
fft.magsToDB();
count++; // increment counter
// update if counter divisible by updateIncr
if(ignoreCount || count % updateIncr == 0){
for(var i=0; i < fftSize / 2; i++) {
// change elements based on input
bars[i].style.height = (fft.getMagnitude(i) * magMult) + "px";
// this must be done to change height in correct direction
bars[i].style.top = barsBottom + -(fft.getMagnitude(i) * magMult) + "px";
}
}
}
if(!ignoreCount){
// output can sound bad with all this dom business
output = wave;
}
}
var speed = 0.5;
audio.loadSample("audio/beat2.wav", samplePlayer);
</script>
</html>
var grainsSet = false;
audio.play = function(){
// this is necessary as file loading may not complete in setup
if(samplePlayer.isReady()){
// set grainPlayer sample
if(!grainsSet){
stretch.setSample(samplePlayer);
// shift.setSample(samplePlayer);
grainsSet = true;
}
this.output = stretch.play(1, 2,0.1, 2, 0);
// this.ouptut = grains.play2(pos, 0.1, 4);
}
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/23_SamplePlayer_base64.html 0 → 100644
View file @ 9ae2ff82
This source diff could not be displayed because it is too large. You can view the blob instead.
maxiLib/maximilian_examples_web/2_TwoTones.html
View file @ 9ae2ff82
......@@ -36,24 +36,26 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Javascript Audio Processing
</title>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- show all line numbers-->
<style type="text/css">.prettyprint ol.linenums > li { list-style-type: decimal }</style>
<script src="../maxiLib.js"></script>
<!-- <script src="../maxi_webAudio.js"></script> -->
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
function play(){
// these two sines will beat together. They're now a bit too loud though..
output = mySine.sinewave(440) + myOtherSine.sinewave(441);
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though..
this.output = mySine.sinewave(440) + myOtherSine.sinewave(441);
}
</script>
</head>
......@@ -65,4 +67,17 @@ var myOtherSine = new maximJs.maxiOsc();
<p>
These sines are taking a beating...
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though..
this.output = mySine.sinewave(440) + myOtherSine.sinewave(441);
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/3_AM1.html
View file @ 9ae2ff82
......@@ -35,35 +35,48 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
<script src="../maxiLib.js"></script>
<!-- <script src="../maxi_webAudio.js"></script> -->
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic amplitude modulation
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
function play(){
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though..
output = mySine.sinewave(440)*myOtherSine.sinewave(1);
this.output = mySine.sinewave(440)*myOtherSine.sinewave(1);
}
</script>
</head>
<body>
<h1> Two Tones </h1>
<h1>Amplitude Modulation</h1>
<p>
Basic amplitude modulation
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic amplitude modulation
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though..
this.output = mySine.sinewave(440)*myOtherSine.sinewave(1);
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/4_AM2.html
View file @ 9ae2ff82
......@@ -35,6 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
......@@ -43,27 +44,42 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic amplitude modulation
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
var myPhasor = new maximJs.maxiOsc();
function play(){
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though..
output = mySine.sinewave(440)*myOtherSine.sinewave(myPhasor.phasor(0.1,0,440));
this.output = mySine.sinewave(440)*myOtherSine.sinewave(myPhasor.phasor(0.1,0,440));
}
</script>
</head>
<body>
<h1> Two Tones </h1>
<h1> AM2 </h1>
<p>
Basic amplitude modulation
More amplitude modulation
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic amplitude modulation
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
var myPhasor = new maximJs.maxiOsc();
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though..
this.output = mySine.sinewave(440)*myOtherSine.sinewave(myPhasor.phasor(0.1,0,440));
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/5_FM1.html
View file @ 9ae2ff82
......@@ -35,6 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
......@@ -43,18 +44,18 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic amplitude modulation
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
function play(){
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though.
output = mySine.sinewave(440+(myOtherSine.sinewave(1)*100));
this.output = mySine.sinewave(440+(myOtherSine.sinewave(1)*100));
}
</script>
</head>
......@@ -66,4 +67,20 @@ function play(){
<p>
Basic amplitude modulation
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic amplitude modulation
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
audio.play = function(){
// these two sines will beat together. They're now a bit too loud though.
this.output = mySine.sinewave(440+(myOtherSine.sinewave(1)*100));
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/6_FM2.html
View file @ 9ae2ff82
......@@ -35,6 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
......@@ -43,6 +44,8 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic frequency modulation
var mySine = new maximJs.maxiOsc();
......@@ -50,8 +53,8 @@ var myOtherSine = new maximJs.maxiOsc();
var myLastSine = new maximJs.maxiOsc();
var myPhasor = new maximJs.maxiOsc();
function play(){
output=mySine.sinewave(myOtherSine.sinewave(myLastSine.sinewave(0.1)*30)*440);//awesome bassline
audio.play = function(){
this.output=mySine.sinewave(myOtherSine.sinewave(myLastSine.sinewave(0.1)*30)*440);//awesome bassline
}
......@@ -66,4 +69,19 @@ function play(){
<p>
More basic frequency modulation
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
//This shows how to use maximilian to do basic frequency modulation
var mySine = new maximJs.maxiOsc();
var myOtherSine = new maximJs.maxiOsc();
var myLastSine = new maximJs.maxiOsc();
var myPhasor = new maximJs.maxiOsc();
audio.play = function(){
this.output=mySine.sinewave(myOtherSine.sinewave(myLastSine.sinewave(0.1)*30)*440);//awesome bassline
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/7_Counting1.html
View file @ 9ae2ff82
......@@ -35,6 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
......@@ -43,20 +44,20 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var mySine = new maximJs.maxiOsc(); // This is the oscillator we will use to generate the test tone
var myClock = new maximJs.maxiClock(); // This will allow us to generate a clock signal and do things at specific times
var freq; // This is a variable that we will use to hold and set the current frequency of the oscillator
function setup(){
myClock.setTicksPerBeat(1);//This sets the number of ticks per beat
myClock.setTempo(120);// This sets the tempo in Beats Per Minute
freq=20; // Here we initialise the variable
}
myClock.setTicksPerBeat(1);//This sets the number of ticks per beat
myClock.setTempo(120);// This sets the tempo in Beats Per Minute
freq=20; // Here we initialise the variable
function play(){
audio.play = function(){
myClock.ticker(); // This makes the clock object count at the current samplerate
//This is a 'conditional'. It does a test and then does something if the test is true
......@@ -65,9 +66,8 @@ function play(){
freq+=100; // DO SOMETHING
} // The curly braces close the conditional
output=mySine.sinewave(freq);//simple as that!
this.output=mySine.sinewave(freq);//simple as that!
}
......@@ -82,4 +82,33 @@ function play(){
<p>
Using phasor to count
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var mySine = new maximJs.maxiOsc(); // This is the oscillator we will use to generate the test tone
var myClock = new maximJs.maxiClock(); // This will allow us to generate a clock signal and do things at specific times
var freq; // This is a variable that we will use to hold and set the current frequency of the oscillator
myClock.setTicksPerBeat(1);//This sets the number of ticks per beat
myClock.setTempo(120);// This sets the tempo in Beats Per Minute
freq=20; // Here we initialise the variable
audio.play = function(){
myClock.ticker(); // This makes the clock object count at the current samplerate
//This is a 'conditional'. It does a test and then does something if the test is true
// console.log(myClock.isTick());
if (myClock.tick) { // If there is an actual tick at this time, this will be true.
freq+=100; // DO SOMETHING
} // The curly braces close the conditional
this.output=mySine.sinewave(freq);//simple as that!
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/8_Counting2.html
View file @ 9ae2ff82
......@@ -35,7 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
......@@ -43,6 +43,8 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc(); //these oscillators will help us count and play sound
var mySquare = new maximJs.maxiOsc();
......@@ -50,12 +52,10 @@ var mySquare = new maximJs.maxiOsc();
//we're going to put the current count in this variable so that we can use it more easily.
var currentCount;
function play(){
audio.play = function(){
CurrentCount = Math.floor(myCounter.phasor(1, 1, 9));//phasor can take three arguments; frequency, start value and end value
output=mySquare.square(CurrentCount*100);
}
</script>
</head>
......@@ -67,4 +67,20 @@ function play(){
<p>
Using phasor to count
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc(); //these oscillators will help us count and play sound
var mySquare = new maximJs.maxiOsc();
//we're going to put the current count in this variable so that we can use it more easily.
var currentCount;
audio.play = function(){
CurrentCount = Math.floor(myCounter.phasor(1, 1, 9));//phasor can take three arguments; frequency, start value and end value
output=mySquare.square(CurrentCount*100);
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/8_Counting3.html
View file @ 9ae2ff82
......@@ -35,7 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
......@@ -44,13 +44,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc();
var mySwitchableOsc = new maximJs.maxiOsc();//these oscillators will help us count and make sound.
var CurrentCount;//we're going to put the current count in this variable so that we can use it more easily.
var myOscOutput;//we're going to stick the output here to make it easier to mess with stuff.
function play(){
audio.play = function(){
CurrentCount=Math.floor(myCounter.phasor(1, 1, 9));//phasor can take three arguments; frequency, start value and end value.
if (CurrentCount<5){//simple if statement
......@@ -59,7 +61,7 @@ function play(){
else if (CurrentCount>=5){//and the 'else' bit.
myOscOutput=mySwitchableOsc.sinewave(CurrentCount*50);//one osc object can produce whichever waveform you want.
}
output=myOscOutput;//point me at your speakers and fire.
this.output=myOscOutput;//point me at your speakers and fire.
}
......@@ -74,4 +76,26 @@ function play(){
<p>
Using phasor to count
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc();
var mySwitchableOsc = new maximJs.maxiOsc();//these oscillators will help us count and make sound.
var CurrentCount;//we're going to put the current count in this variable so that we can use it more easily.
var myOscOutput;//we're going to stick the output here to make it easier to mess with stuff.
audio.play = function(){
CurrentCount=Math.floor(myCounter.phasor(1, 1, 9));//phasor can take three arguments; frequency, start value and end value.
if (CurrentCount<5){//simple if statement
myOscOutput=mySwitchableOsc.square(CurrentCount*100);
}
else if (CurrentCount>=5){//and the 'else' bit.
myOscOutput=mySwitchableOsc.sinewave(CurrentCount*50);//one osc object can produce whichever waveform you want.
}
this.output=myOscOutput;//point me at your speakers and fire.
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/8_Counting4.html
View file @ 9ae2ff82
......@@ -35,7 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
......@@ -44,6 +44,8 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
//these oscillators will help us count and make sound.
var myCounter = new maximJs.maxiOsc();
......@@ -54,7 +56,7 @@ var CurrentCount;//we're going to put the current count in this variable so that
var myOscOutput;//we're going to stick the output here to make it easier to mess with stuff.
var myArray=[100,200,300,400,300,200,100,240,640,360];
function play(){
audio.play = function(){
CurrentCount=Math.round(myCounter.phasor(1*((another.sawn(0.1)+1)/2), 1, 9));//phasor can take three arguments; frequency, start value and end value.
if (CurrentCount<5) {//simple if statement
......@@ -65,11 +67,8 @@ function play(){
myOscOutput=mySwitchableOsc.sawn(myArray[CurrentCount]);//one osc object can produce whichever waveform you want.
}
output=myOscOutput;//point me at your speakers and fire.
this.output=myOscOutput;//point me at your speakers and fire.
}
</script>
</head>
......@@ -81,4 +80,32 @@ function play(){
<p>
Using phasor to count
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
//these oscillators will help us count and make sound.
var myCounter = new maximJs.maxiOsc();
var mySwitchableOsc = new maximJs.maxiOsc();
var another = new maximJs.maxiOsc();
var CurrentCount;//we're going to put the current count in this variable so that we can use it more easily.
var myOscOutput;//we're going to stick the output here to make it easier to mess with stuff.
var myArray=[100,200,300,400,300,200,100,240,640,360];
audio.play = function(){
CurrentCount=Math.round(myCounter.phasor(1*((another.sawn(0.1)+1)/2), 1, 9));//phasor can take three arguments; frequency, start value and end value.
if (CurrentCount<5) {//simple if statement
myOscOutput=mySwitchableOsc.square(myArray[CurrentCount]);
}
else if (CurrentCount>=5) {//and the 'else' bit.
myOscOutput=mySwitchableOsc.sawn(myArray[CurrentCount]);//one osc object can produce whichever waveform you want.
}
this.output=myOscOutput;//point me at your speakers and fire.
}
</pre>
</body></html>
maxiLib/maximilian_examples_web/9_Envelopes.html
View file @ 9ae2ff82
......@@ -35,7 +35,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<title>
Javascript Audio Processing
</title>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
<script src="../maxiLib.js"></script>
......@@ -43,6 +43,9 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<!-- Our javascript code -->
<script type="text/javascript">
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc(); //these oscillators will help us count and play sound
var mySwitchableOsc = new maximJs.maxiOsc();//
......@@ -52,19 +55,15 @@ var myOscOutput,myCurrentVolume;//
var myEnvelope = new maximJs.maxiEnv();
// unfortunately, '.get(n)' must be used to access vector data
// or the data can be used as an array and the GetArray... function used when required
// var myEnvelopeData = GetArrayAsVectorDbl([1,0,0,500]);//this data will be used to make an envelope. Value and time to value in ms.
function setup(){
//Timing is in ms
myEnvelope.setAttack(0);
myEnvelope.setDecay(1); // Needs to be at least 1
myEnvelope.setSustain(1);
myEnvelope.setRelease(1000);
}
//Timing is in ms
myEnvelope.setAttack(0);
myEnvelope.setDecay(1); // Needs to be at least 1
myEnvelope.setSustain(1);
myEnvelope.setRelease(1000);
function play(){
audio.play = function(){
//notice that we feed in a value of 1. to create an envelope shape we can apply later.
myCurrentVolume=myEnvelope.adsr(1.,myEnvelope.trigger);
......@@ -91,7 +90,7 @@ if (CurrentCount<5){
myOscOutput=mySwitchableOsc.sinewave(CurrentCount*50);//one osc object can produce whichever waveform you want.
}
output=myOscOutput*myCurrentVolume;//left speaker
this.output=myOscOutput*myCurrentVolume;//left speaker
}
......@@ -106,4 +105,56 @@ if (CurrentCount<5){
<p>
</p>
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
var audio = new maximJs.maxiAudio();
audio.init();
var myCounter = new maximJs.maxiOsc(); //these oscillators will help us count and play sound
var mySwitchableOsc = new maximJs.maxiOsc();//
var CurrentCount;//
var myOscOutput,myCurrentVolume;//
var myEnvelope = new maximJs.maxiEnv();
//Timing is in ms
myEnvelope.setAttack(0);
myEnvelope.setDecay(1); // Needs to be at least 1
myEnvelope.setSustain(1);
myEnvelope.setRelease(1000);
audio.play = function(){
//notice that we feed in a value of 1. to create an envelope shape we can apply later.
myCurrentVolume=myEnvelope.adsr(1.,myEnvelope.trigger);
CurrentCount=Math.round(myCounter.phasor(1, 1, 9));//phasor can take three arguments; frequency, start value and end value.
// You'll notice that these 'if' statements don't require curly braces "{}".
// This is because there is only one outcome if the statement is true.
if (CurrentCount==1){
myEnvelope.trigger=1; //trigger the envelope
}
else {
myEnvelope.trigger=0;//release the envelope to make it fade out only if it's been triggered
}
if (CurrentCount<5){
myOscOutput=mySwitchableOsc.sawn(CurrentCount*100);
}
else if (CurrentCount>=5) {//and the 'else' bit.
myOscOutput=mySwitchableOsc.sinewave(CurrentCount*50);//one osc object can produce whichever waveform you want.
}
this.output=myOscOutput*myCurrentVolume;//left speaker
}
</pre>
</body></html>
old_stuff/maxiTest.html → maxiLib/maximilian_examples_web/X_ManualWebAudio.html
View file @ 9ae2ff82
......@@ -33,133 +33,149 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Javascript Audio Processing
Javascript Audio Processing
</title>
<!-- <link rel="stylesheet" type="text/css" href="javascript-processing_files/simple.css"> -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
<!-- show all line numbers-->
<style type="text/css">.prettyprint ol.linenums > li { list-style-type: decimal }</style>
<script src="maxiLib.js"></script>
<!-- Our javascript code -->
<script type="text/javascript">
<script src="../maxiLib.js"></script>
// Temporary patch until all browsers support unprefixed context.
AudioContext = AudioContext || webkitAudioContext;
<!-- <script src="../maxiLib_noWebAudio.js"></script> -->
<!-- <script src="../../src/js/maxi_webAudio.js"></script> -->
// init() once the page has finished loading.
window.onload = init;
<!-- Our javascript code -->
<script type="text/javascript">
// An example of jsMaxim with manual implementation of webAudio
var context = new (window.AudioContext || window.webkitAudioContext)();
var context;
var source = 0;
var source;
var jsProcessor = 0;
var analyser;
var analyserView1;
var phaseL = 0.0;
var phaseR = 0.0;
var kBaseFrequency = 440.0;
var phaseIncrL = 2.0 * Math.PI * 440.0 / 44100.0;
var phaseIncrR = 2.0 * Math.PI * (kBaseFrequency * 1.1) / 44100.0; // modulate slightly different on right channel
var kTwoPi = 2.0 * Math.PI;
var pitchRate = 1.0;
var mySine = new Module.maxiOsc();
var osc2 = new Module.maxiOsc();
var osc3 = new Module.maxiOsc();
// var filt = new Module.maxiFilter();
var passFreq = 880;
var m = 10;
var output = 0;
var bufferLoader;
// function handling audio processing
// called byjsProcessor
function process(event) {
// Get left/right input and output arrays
// var inputArrayL = event.inputBuffer.getChannelData(0);
// var inputArrayR = event.inputBuffer.getChannelData(1);
var outputArrayL = event.outputBuffer.getChannelData(0);
var outputArrayR = event.outputBuffer.getChannelData(1);
var n = outputArrayL.length;
if(passFreq < 220 || passFreq > 1020){
m = -m;
}
passFreq-=m;
for (var i = 0; i < n; ++i) {
// var sampleL = Math.sin(phaseL);
// var sampleR = Math.sin(phaseR);
// phaseL += pitchRate * phaseIncrL;
// phaseR += pitchRate * phaseIncrR;
// if (phaseL > kTwoPi) phaseL -= kTwoPi;
// if (phaseR > kTwoPi) phaseR -= kTwoPi;
// Amplitude modulation effect
// outputArrayL[i] = inputArrayL[i] * sampleL;
// outputArrayR[i] = inputArrayR[i] * sampleR;
var output = mySine.sinewave(440);
// outputArrayL[i] = Math.random();
// outputArrayR[i] = Math.random();
outputArrayL[i] = output;
outputArrayR[i] = output;
var numChannels = event.outputBuffer.numberOfChannels;
var outputLength = event.outputBuffer.getChannelData(0).length;
for (var i = 0; i < outputLength; ++i) {
play();
if(output instanceof Array){ // check if we're using arrays
for (var channel = 0; channel < numChannels; channel++) {
event.outputBuffer.getChannelData(channel)[i] = output[channel];
}
}
else
{
for (var channel = 0; channel < numChannels; channel++) {
event.outputBuffer.getChannelData(channel)[i] = output;
}
}
}
}
function initAudio(numChannels) {
source = context.createBufferSource();
jsProcessor = context.createScriptProcessor(4096, numChannels, numChannels);
jsProcessor.onaudioprocess = process;
analyser = context.createAnalyser();
analyser.fftSize = 2048;
// Connect the processing graph: source -> jsProcessor -> analyser -> destination
source.connect(jsProcessor);
jsProcessor.connect(analyser);
analyser.connect(context.destination);
}
function init() {
initAudio(2);
setup();
}
// function loadSample(url) {
// // Load asynchronously
window.onload = init;
// var request = new XMLHttpRequest();
// request.open("GET", url, true);
// request.responseType = "arraybuffer";
// ----------------------------------------------------------------------
// The code
// request.onload = function() {
// context.decodeAudioData(
// request.response,
// function(buffer) {
// source.buffer = buffer;
// source.loop = true;
// source.start(0);
var mySine = new maximJs.maxiOsc();
var mySamp = new maximJs.maxiSample();
// draw();
// },
// function(buffer) {
// console.log("Error decoding source!");
// }
// );
// }
function setup(){
// assign sample to mySamp using current context
maximJs.maxiTools.loadSample("audio/beat2.wav", mySamp, context);
// makes temporary AudioContext to assign file
// maximJs.maxiTools.loadSample("audio/beat2.wav", mySamp);
}
// request.send();
// }
// called from process() function
function play(){
// output = mySine.sinewave(440);
// if ( !window.requestAnimationFrame ) {
if(mySamp.isReady()){
output = mySamp.play();
}
}
// window.requestAnimationFrame = ( function() {
</script>
// return window.webkitRequestAnimationFrame ||
// window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
// window.oRequestAnimationFrame ||
// window.msRequestAnimationFrame ||
// function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
</head>
// window.setTimeout( callback, 1000 / 60 );
<body>
// };
<h1> </h1>
<p id="funcs"></p>
<p>
</p>
// } )();
<pre class="prettyprint lang-js linenums:true" id="quine" style="border:4px solid #88c" >
// An example of jsMaxim with manual implementation of webAudio
var context = new (window.AudioContext || window.webkitAudioContext)();
// }
var source;
var jsProcessor = 0;
var analyser;
var output = 0;
var bufferLoader;
// function handling audio processing
// called byjsProcessor
function process(event) {
var numChannels = event.outputBuffer.numberOfChannels;
var outputLength = event.outputBuffer.getChannelData(0).length;
for (var i = 0; i < outputLength; ++i) {
play();
if(output instanceof Array){ // check if we're using arrays
for (var channel = 0; channel < numChannels; channel++) {
event.outputBuffer.getChannelData(channel)[i] = output[channel];
}
}
else
{
for (var channel = 0; channel < numChannels; channel++) {
event.outputBuffer.getChannelData(channel)[i] = output;
}
}
}
}
function initAudio() {
context = new AudioContext();
function initAudio(numChannels) {
source = context.createBufferSource();
// This AudioNode will do the amplitude modulation effect directly in JavaScript
jsProcessor = context.createScriptProcessor(4096);
jsProcessor = context.createScriptProcessor(4096, numChannels, numChannels);
jsProcessor.onaudioprocess = process;
analyser = context.createAnalyser();
......@@ -169,32 +185,38 @@ function initAudio() {
source.connect(jsProcessor);
jsProcessor.connect(analyser);
analyser.connect(context.destination);
}
function init() {
//analyserView1 = new AnalyserView("view1");
initAudio();
//analyserView1.initByteBuffer();
initAudio(2);
setup();
}
</script>
</head>
<body>
window.onload = init;
<h1> JavaScript Processing </h1>
// ----------------------------------------------------------------------
// The code
<p>
This example illustrates a simple amplitude modulation effect processed directly in JavaScript.
</p>
var mySine = new maximJs.maxiOsc();
var mySamp = new maximJs.maxiSample();
<!-- Real-time visualizer view -->
<!--<canvas id="view1" width="800px" height="600px"></canvas>-->
function setup(){
// assign sample to mySamp using current context
maximJs.maxiTools.loadSample("audio/beat2.wav", mySamp, context);
// makes temporary AudioContext to assign file
// maximJs.maxiTools.loadSample("audio/beat2.wav", mySamp);
}
// called from process() function
function play(){
// output = mySine.sinewave(440);
if(mySamp.isReady()){
output = mySamp.play();
}
}
</pre>
</body>
</body></html>
</html>
maxiLib/index.php → maxiLib/maximilian_examples_web/index.php
View file @ 9ae2ff82
......@@ -7,14 +7,16 @@
<body>
<?php
$directory = "maximilian_examples_web/";
$phpfiles = glob($directory . "*.html");
$phpfiles = glob("*.html");
// $phpfiles = glob($directory . "*.html");
natsort($phpfiles);
foreach($phpfiles as $phpfile)
{
echo "</br>";
echo "<a href=$phpfile>".basename($phpfile)."</a>";
echo "<a href=./$phpfile>".basename($phpfile)."</a>";
echo "\n</br>";
}
?>
</body>
......