File: FT-Audiosignale-Instrumente_engl.html

package info (click to toggle)
jsxgraph 0.83%2Bsvn1872~dfsg1-1
links: PTS
area: main
in suites: wheezy
size: 35,272 kB
sloc: xml: 5,881; java: 1,072; python: 884; php: 238; makefile: 70; objc: 30; sh: 1
file content (363 lines) | stat: -rw-r--r-- 11,155 bytes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <title>FT-Audio SignalsInstruments</title>

    <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
    <script type="text/javascript" src="js/jsxgraphcore.js"></script>
    <style type="text/css">

		.breadcrumbs1 {
		width: 981px;
		height: 38px;
		}

		#Platzhalter1 {
		width: 45px;
		height: 5px;
		}

		#Platzhalter2 {
		width: 250px;
		height: 5px;
		}

		.breadcrumbs-link {
		padding: 10px;
		}

		.bild-first {
		width: 25px;
		height: 25px;
		}

		h1 {
		color:#0000CC;
		font-size:28pt;
		font-family:arial;
		background-color:#CCCCFF;
		border-color:#000000;
		border-width:5px;
		border-style:solid;
		padding: 15px;
		margin-top: 0px;
		margin-bottom: 30px;
		}

		a img{
		border-width: 0;
		}

		#Beschreibung {
		margin-bottom: 50px;
		margin-left: 30px;
		margin-right: 30px;
		}

		.links {
		width: 400px;
		height: 400px;
		border: 1px solid black;
		margin-left: 30px;
		float: left;
		}

		.rechts {
		width: 400px;
		height: 400px;
		border: 1px solid white;
		margin-left: 500px;
		margin-bottom: 50px;
		}

		.klein {
		width: 400px;
		height: 180px;
		margin-top: 110px;
		padding: 10px;
		}

	</style>

    <script type="text/javascript">
        // <![CDATA[

        // general variables
        var samplerate = 4000, xSignal = [], xFFT = [], i, samples = 0, seconds = 0, cursample = '';

        JXG.Server.load('fft');
        if(!JXG.Server.modules.fft) {
            alert('Error: Unable to load fft module, aborting!');
        }

        function clearFFT() {
            // check if the fft board has already been initialized
            if(typeof fftSignal !== 'undefined') {
                fftSignal = [];
                fftBoard.update();
            }
            clearCleaned();
        }

        function clearCleaned() {
            // check if the cleaned board has already been initialized
            if(typeof cleanedSignal !== 'undefined') {
                cleanedSignal = [];
                cleanedBoard.update();
            }
        }

        function changesample() {
            cursample = document.getElementById('audioselect').value;
            JXG.Server.modules.fft.loadAudio('ogg', cursample, function(data) {
                var a = document.getElementById('clearaudio');
                a.src = data.audioB64;
                if(data.audioData) {
                    clearSignal = [];
                    samples = data.audioData.length;
                    samplerate = data.samplerate;
                    seconds = data.seconds;

                    for(var i=0; i<samples; i++) {
                        xSignal[i] = data.seconds*i/samples;
                        xFFT[i] = 2*i/samples;
                        clearSignal[i] = data.audioData[i];
                    }
                    clearBoard.setBoundingBox([-0.1, 2, Math.ceil(data.seconds+1), -2], false);
                    //fftBoard.setBoundingBox([-0.01, samplerate*1.1/2, 1.1, -samplerate*0.05], false);
                    //fftBoard.setBoundingBox([-0.01, 1100, 1.1, -50], false);
                    cleanedBoard.setBoundingBox([-0.1, 2, Math.ceil(data.seconds+1), -2], false);
                    clearBoard.update();
                }
            }, true);
        }

        function loadCleanedAudio() {
        	if(cleanedSignal.length ===0) {
        		alert('Error: No cleaned signal available.');
        		return;
        	}

            JXG.Server.modules.fft.makeAudio('ogg', samplerate, cleanedSignal, function(data) {
                var a = document.getElementById('cleanedaudio');
                a.src = data.audioB64;
                a.style.display = 'block';
            }, true);
        }

        // ]]>
    </script>
</head>

<body>

<div class="breadcrumbs1">
	<table class="Tabelle">
		<tr>
			<th>
				<a href="index.html" class="breadcrumbs-link">
				<img src="Icons/go-first.png" class="bild-first" />
				</a>
			</th><th>
				<a href="index_engl.html" class="breadcrumbs-link">
				Home
				</a>
			</th><th>
				<div id="Platzhalter1">
				</div>
			</th><th>
				<a href="FT-Anwendungsbeispiele.html" class="breadcrumbs-link">
				<img src="Icons/go-previous.png" class="bild-first" />
				</a>
			</th><th>
				<a href="FT-Anwendungsbeispiele_engl.html" class="breadcrumbs-link">
				2 Examples for Application - Signal Processing
				</a>
			</th><th>
				<div id="Platzhalter2">
				</div>
			</th><th>
				<a href="FT-Abkuerzungen_engl.html" class="breadcrumbs-link">
				ABBREVIATIONS
				</a>
			</th>
		</tr>
	</table>
</div>

<h1>
	2.3 Audio Signals  Instruments
</h1>

<div id="Beschreibung">
	Here a repertory of audio signals of different instruments is at your command. 
	You can visualize and view their frequency spectra by using the FFT. After working 
	with filters and following IFFT calculation the appropriate audio signals can be 
	generated.<br />
	The FFT and IFFT calculations are carried out by NumPy, a free software for 
	computating numerical problems, on a server. This calculation might take a few minutes.

</div>

<div id="box_clearsample" class="jxgbox links"></div>
<script type="text/javascript">
    // <![CDATA[

    // initialize clearsine board
    var clearBoard = JXG.JSXGraph.initBoard('box_clearsample', {boundingbox:[-0.1, 2, 6, -2], keepaspectratio:false, axis: true, grid: false, showNavigation: false, showCopyright: false}),
        clearSignal = [],
        clearPlot = clearBoard.create('curve', [[], []]);

    clearPlot.updateDataArray = function() {
        this.dataX = xSignal;
        this.dataY = clearSignal;
    };

    // ]]>
</script>

<div class="rechts">
	<div class="klein">
	<select id="audioselect">
	    <option value="acoustic">Acoustic Guitar</option>
	    <option value="bassdrum">Bass drum</option>
    	<option value="bass">Bass</option>
	    <option value="chello">Cello</option>
    	<option value="eguitar1">E-Guitar 1</option>
	    <option value="eguitar2">E-Guitar 2</option>
    	<option value="flute">Flute</option>
	    <option value="sitar">Sitar</option>
    	<option value="synth">Synthesizer</option>
	</select>
	<p>
	After choosing an instrument its audio signal is graphed.<br />
	The graph is a function of time.
	</p>
	<audio id="clearaudio" src="" controls="controls"></audio>
	</div>
</div>

<div id="box_fftsine" class="jxgbox links"></div>
<script type="text/javascript">
    // <![CDATA[

    var fftBoard = JXG.JSXGraph.initBoard('box_fftsine', {boundingbox:[-0.01, 1100, 1.1, -50], keepaspectratio:false, axis: true, grid: false, showNavigation: false, showCopyright: false}),
        fftSignal = [], filterSignal = [],
        fftPlot = fftBoard.create('curve', [[], []]),
        l1 = fftBoard.create('line', [[0,0],[1,0]],{visible:false,straightFirst:false,straightLast:false}),
        g1 = fftBoard.create('glider', [0.1,0,l1],{name:"bass filter"}),
        p1 = fftBoard.create('point', [function(){return g1.X();},2],{visible:false}),
        l2 = fftBoard.create('line', [g1,p1],{strokeColor:"#FF0000", straightFirst:false, straightLast:false}),
        g2 = fftBoard.create('glider', [0.9,0,l1],{name:"treble filter"}),
        p2 = fftBoard.create('point', [function(){return g2.X();},2],{visible:false}),
        l3 = fftBoard.create('line', [g2,p2],{strokeColor:"#FF0000", straightFirst:false, straightLast:false}),
        s1 = fftBoard.create('slider', [[0.05,100],[0.05,600],[0,0,2]],{strokeColor:"#0000FF",fillColor:"#FF0000"});

    function loadFFT() {
        JXG.Server.modules.fft.fft(clearSignal, function(data) {
            fftSignal = data.y;
            cut();
            fftBoard.update();
        }, true);
    }

    fftPlot.updateDataArray = function() {
        this.dataX = xFFT;
        this.dataY = filterSignal;
    };

    function cut() {
        var i;

        clearCleaned();

        if(fftSignal.length === 0) {
            filterSignal = [];
            return;
        }


        for (i = 0; i < Math.floor(g1.X() * samples/2); i++) {
            filterSignal[i] = fftSignal[i] * s1.Value();
        }

        for (i = Math.floor(g1.X() * samples/2); i < Math.floor(g2.X() * samples/2); i++) {
            filterSignal[i] = fftSignal[i];
        }

        for (i = Math.floor(g2.X() * samples/2); i < samples/2; i++) {
            filterSignal[i] = fftSignal[i] * s1.Value();
        }
    }

    fftBoard.addHook(cut);
    fftBoard.update();

    // ]]>
</script>

<div class="rechts">
	<div class="klein">
	<button onclick="loadFFT();">FFT Calculation</button><br />
	After clicking on the button &quot;FFT calculation&quot; the frequency spectrum of the audio 
	signal is shown.<br />
	So a function of frequency has been produced out of the function of time. Now you can 
	see the signal&prime;s frequencies with the absolute values of the Fourier transformed.
	<p>
		By moving the appropriate controllers (red) the frequencies, that shall be filtered, 
		(horizontal controllers: bass and treble filter) as well as the intensity of filtration 
		(vertical controller) can be varied.
	</p>
	</div>
</div>

<div id="box_cleanedsine" class="jxgbox links"></div>
<script type="text/javascript">
    // <![CDATA[

    var cleanedBoard = JXG.JSXGraph.initBoard('box_cleanedsine', {boundingbox:[-0.1, 2, 6, -2], keepaspectratio:false, axis: true, grid: false, showNavigation: false, showCopyright: false}),
        cleanedSignal = [],
        cleanedPlot = cleanedBoard.create('curve', [[], []]);

    function loadIFFT() {
        var tmp;

        JXG.Server.modules.fft.sampleifft(cursample, Math.floor(g1.X() *  samples/2), Math.floor(g2.X() *  samples/2), s1.Value(), function(data) {
            cleanedSignal = data.y;
            cleanedBoard.update();
            document.getElementById('cleanedaudio').src = data.audioB64;
        }, true);
    }

    cleanedPlot.updateDataArray = function() {
        this.dataX = xSignal;
        this.dataY = cleanedSignal;
    };

    // ]]>
</script>


<script type="text/javascript">
    // Everything has been set up, let's load our first example
    document.getElementById('audioselect').onchange = changesample;
    changesample();
</script>

<div class="rechts">
	<div class="klein">
	<button onclick="loadIFFT();">IFFT Calculation</button><br />
	By clicking on the button &quot;IFFT calculation&quot; the appropriate audio 
	signal is generated out of the filtered frequency spectrum and can be viewed.<br />
	The graph is a function of time.<br />
	<br />
	<audio src="" id="cleanedaudio" controls="controls" style="display: none;"></audio>
	</div>
</div>


</body>
</html>