Записи участника (true) (Форум аццкого кодера)

<video autoplay controls id="audio-element" src="http://pinup1.ucoz.ru/Gregorian-Moment_of_Peace.mp4" width="512" height="200"></video>

     <div><canvas style="background:blue;" id="fft" width="512" height="200"></canvas></div>

     <script>
     var canvas = document.getElementById('fft'),
     ctx = canvas.getContext('2d'),
     channels,
     rate,
     frameBufferLength,
     fft;

     function loadedMetadata() {
     channels = audio.mozChannels;
     rate = audio.mozSampleRate;
     frameBufferLength = audio.mozFrameBufferLength;
         
     fft = new FFT(frameBufferLength / channels, rate);
     }

     function audioAvailable(event) {
     var fb = event.frameBuffer,
     t = event.time, /* unused, but it's there */
     signal = new Float32Array(fb.length / channels),
     magnitude;

     for (var i1 = 0, fbl = frameBufferLength / 2; i1 < fbl; i1++ ) {
     // Assuming interlaced stereo channels,
     // need to split and merge into a stero-mix mono signal
     signal[i1] = (fb[2*i1] + fb[2*i1+1]) / 2;
     }

     fft.forward(signal);

     // Clear the canvas before drawing spectrum
     ctx.clearRect(0,0, canvas.width, canvas.height);

     for (var i1 = 0; i1 < fft.spectrum.length; i1++ ) {
     // multiply spectrum by a zoom value
     magnitude = fft.spectrum[i1] * 4000;

     // Draw rectangle bars for each frequency bin
     ctx.fillRect(i1 * 35, canvas.height, 34, -magnitude/ 2);
     }
     }

var audio = document.getElementById('audio-element');

     audio.addEventListener('MozAudioAvailable', audioAvailable, false);
     audio.addEventListener('loadedmetadata', loadedMetadata, false);

     // FFT from dsp.js, see below
     var FFT = function(bufferSize, sampleRate) {
     this.bufferSize = bufferSize;
     this.sampleRate = sampleRate;
     this.spectrum = new Float32Array(bufferSize/2);
     this.real = new Float32Array(bufferSize);
     this.imag = new Float32Array(bufferSize);
     this.reverseTable = new Uint32Array(bufferSize);
     this.sinTable = new Float32Array(bufferSize);
     this.cosTable = new Float32Array(bufferSize);

     var limit = 1,
     bit = bufferSize >> 1;

     while ( limit < bufferSize ) {
     for ( var i1 = 0; i1 < limit; i1++ ) {
     this.reverseTable[i1 + limit] = this.reverseTable[i1] + bit;
     }

     limit = limit << 1;
     bit = bit >> 1;
     }

     for ( var i1 = 0; i1 < bufferSize; i1++ ) {
     this.sinTable[i1] = Math.sin(-Math.PI/i1);
     this.cosTable[i1] = Math.cos(-Math.PI/i1);
     }
     };

     FFT.prototype.forward = function(buffer) {
     var bufferSize = this.bufferSize,
     cosTable = this.cosTable,
     sinTable = this.sinTable,
     reverseTable = this.reverseTable,
     real = this.real,
     imag = this.imag,
     spectrum = this.spectrum;

     if ( bufferSize !== buffer.length ) {
     throw "Supplied buffer is not the same size as defined FFT. FFT Size: " + bufferSize + " Buffer Size: " + buffer.length;
     }

     for ( var i1 = 0; i1 < bufferSize; i1++ ) {
     real[i1] = buffer[reverseTable[i1]];
     imag[i1] = 0;
     }

     var halfSize = 1,
     phaseShiftStepReal,     
     phaseShiftStepImag,
     currentPhaseShiftReal,
     currentPhaseShiftImag,
     off,
     tr,
     ti,
     tmpReal,     
     i1;

     while ( halfSize < bufferSize ) {
     phaseShiftStepReal = cosTable[halfSize];
     phaseShiftStepImag = sinTable[halfSize];
     currentPhaseShiftReal = 1.0;
     currentPhaseShiftImag = 0.0;

     for ( var fftStep = 0; fftStep < halfSize; fftStep++ ) {
     i1 = fftStep;

     while ( i1 < bufferSize ) {
     off = i1 + halfSize;
     tr = (currentPhaseShiftReal * real[off]) - (currentPhaseShiftImag * imag[off]);
     ti = (currentPhaseShiftReal * imag[off]) + (currentPhaseShiftImag * real[off]);

     real[off] = real[i1] - tr;
     imag[off] = imag[i1] - ti;
     real[i1] += tr;
     imag[i1] += ti;

     i1 += halfSize << 1;
     }

     tmpReal = currentPhaseShiftReal;
     currentPhaseShiftReal = (tmpReal * phaseShiftStepReal) - (currentPhaseShiftImag * phaseShiftStepImag);
     currentPhaseShiftImag = (tmpReal * phaseShiftStepImag) + (currentPhaseShiftImag * phaseShiftStepReal);
     }

     halfSize = halfSize << 1;
     }

     i1 = bufferSize/2;
     while(i1--) {
     spectrum[i1] = 2 * Math.sqrt(real[i1] * real[i1] + imag[i1] * imag[i1]) / bufferSize;
     }
     };
     </script>

<noindex><iframe style="background:;" id="text1" src="http://zx-spectrum-online.ru/5/Q.html#l=http://zx-spectrum-online.ru/_fr/52/boa.sna" name="text" frameborder="0" height="400" width="500"></iframe></noindex>

function get_audio()
{function o(e,t,o,u){var a=0,f=n,l=r,c;do c=f+o[a++],f=i*c,e[t++]=l=s*(l+c-f);while(--u);r=l,n=f}
function u()
{if(!this.webkitAudioContext)return;var e,u,a=[];
return e=new webkitAudioContext,u=e.createJavaScriptNode(2048,1,1),u.connect(e.destination),t=e.sampleRate,console.log(u),u.onaudioprocess=function(e){va r t=e.outputBuffer.getChannelData(0),u=0,f=t.length,l,c,h;while(l=a.shift())if(c=l.length){f<c&&a.unshift(l.subarray(c=f)),o(t,u,l,c),u+=c,f-=c;if(!f)break}if(f)do h=n,n*=i,r=s*(r+h-n),t[u++]=r;while(--f);l=e.outputBuffer.getChannelData(1);if(l)for(f=t.length;f--;)l[f]=t[f]},function(e){a.length>9&&a.shift(),a.push(e)}}function a(){var e=new Audio;if(!e.mozSetup)return;return e.mozSetup(1,t=22050),function(t){o(t,0,t,t.length),e.mozWriteAudio(t)}}var e=u()||a();if(!e)throw"No audio";var t,n=0,r=0,i=Math.pow(2,-35e5/(700*t)),s=Math.pow(2,-35e5/(23256*t));return{hz:t,play:e}}

<script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script>

   <style>
   html, body {
   margin: 0px;
   padding: 0;
   width:100%;
   font-family: Arial;
   text-align:center;
   }
     
   .container12{
   width:500px;
   margin: 0 auto;
   }
     
   input{
   test-align:center;
   width:500px;
   height:24px;
   font-size:17px;
   margin-top:50px;
   text-align:center;
   }
     
     
   .line {
   overflow:hidden;
   width:100%;
   border:2px solid #dddddd;
   box-shadow:0px 5px 5px 3px rgba(0,0,0,0.3);
   display:block;
   margin-top:10px;
   border-radius:2px;
   position:relative;
   }
     
   .line .line_cover{
   width:100%;
   height:100%;
   position:absolute;
   z-index:2;
   background:url(http://zx-spectrum-online.ru/_si/34/52057252.png);
   }
     
   .line .line_text{
   width:100%;
   height:100%;
   position:absolute;
   z-index:1;
   }

   #l1.line{
   height:70px;
   background:rgb(50,80,50);
   }

   #l1.line .line_cover{}
     
   #l1.line .line_text{
   font-size:60px;
   font-weight:bold;
   color:#00ff00;
   -webkit-animation: l1_animation 10s linear infinite;
   -moz-animation: l1_animation 10s linear infinite;
   }
     
   @-webkit-keyframes l1_animation {
   0%{left:100%;}
   100%{left:-100%;}
   }
   @-moz-keyframes l1_animation {
   0%{left:100%;}
   100%{left:-100%;}
   }
     
     
   #l2.line{
   height:70px;
   background:rgb(90,60,50);
   }

   #l2.line .line_cover{}
     
   #l2.line .line_text{
   font-size:60px;;
   position:absolute;
   color:#ffb400;
   font-weight:bold;
   -webkit-animation: l2_animation 5s linear infinite;
   -moz-animation: l2_animation 5s linear infinite;
   }
     
   @-webkit-keyframes l2_animation {
   0% { opacity: 0; }
   50% { opacity: 1; }
   100% { opacity: 0; }
   }   
     
   @-moz-keyframes l2_animation {
   0% { opacity: 0; }
   50% { opacity: 1; }
   100% { opacity: 0; }
   }   
     
   #l3.line{
   height:70px;
   background:rgb(90,90,90);
   }

   #l3.line .line_cover{}
     
   #l3.line .line_text{
   font-size:60px;;
   position:absolute;
   color:#ffb400;
   font-weight:bold;
   font-family:"Trebuchet MS", Helvetica, sans-serif";
   -webkit-animation: l3_animation 5s linear infinite;
   -moz-animation: l3_animation 5s linear infinite;
   }
     
   @-webkit-keyframes l3_animation {
   0% {color: rgb(0,0,255); }
   20% {color: rgb(0,255,255); }
   40% {color: rgb(255,0,0); }
   60% {color: rgb(255,255,0); }
   80% {color: rgb(255,255,255); }
   100% {color: rgb(0,0,255); }
   }   
     
   @-moz-keyframes l3_animation {
   0% {color: rgb(0,0,255); }
   20% {color: rgb(0,255,255); }
   40% {color: rgb(255,0,0); }
   60% {color: rgb(255,255,0); }
   80% {color: rgb(255,255,255); }
   100% {color: rgb(0,0,255); }
   }   
     
   </style>
     
<script>
        jQuery(function(){
          jQuery('input').keyup(function(){ jQuery(this).next().find('.line_text').html(this.value)}).keyup();
        })
      </script>
   <div class="container12">
   <input placeholder = "True свой чел :)" value="True свой чел :)">
   <div class="line" id="l1">
   <div class="line_text"></div>
   <div class="line_cover"></div>
   </div>
   <input placeholder = "Сюда впиши строку" value="Сюда впиши строку">
   <div class="line" id="l2">
   <div class="line_text"></div>
   <div class="line_cover"></div>
   </div>
   <input placeholder = "в инпут" value="в инпут">
   <div class="line" id="l3">
   <div class="line_text"></div>
   <div class="line_cover"></div>
   </div>
   </div>