File: FT-Audiosignal-StimmeUndVuvuzela_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 (356 lines) | stat: -rw-r--r-- 10,655 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 Signal-VoiceAndVuvuzela</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;

        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 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.1 Audio Signal - Voice and Vuvuzela
</h1>

<div id="Beschreibung">
	Here you see a speech signal, which is overlaid with the sound of a vuvuzela. 
	After the frequency spectrum is represented by using the FFT the frequency of 
	the vuvuzela can be filtered. After having used the IFFT the filtered speech 
	signal shall be better hearable.
	<br />
	The FFT and the 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">
	This image shows a speech signal, which is overlaid with the sound 
	of a vuvuzela. The spoken sentence is hardly understandable. In order 
	to understand the speaker better the noise of the vuvuzela needs to 
	be filtered as well as possible. <br />
	The graph is a function of time.<br />
    <br />
	
    <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 a function of time. Now you can see 
	the signal&prime;s frequencies with the absolute values of the Fourier transformed.
	<br />
	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. So the task is to identify the vuvuzela frequencies 
	in order to filter them.

	</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('vuvuzelashort', 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 the vuvuzela example
    JXG.Server.modules.fft.loadAudio('ogg', 'vuvuzelashort', 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);
            cleanedBoard.setBoundingBox([-0.1, 2, Math.ceil(data.seconds+1), -2], false);
            clearBoard.update();
        }
    }, true);
</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 signal is 
	generated out of the filtered frequency spectrum and can be viewed.
	<br />
	Now you can hear, whether the right frequencies have been filtered or whether you 
	need to go back to the previous application and change the controller settings.
<br />
	The graph is a function of time again.<br />
    <br />
    <audio src="" id="cleanedaudio" controls="controls"></audio>
	</div>
</div>


</body>
</html>