< >

sound-in-grafik-zeigen.php


Quell Code


<canvas id="canvas" style="border:1px solid black;position:absolute:top:0;left:0;" width="300" height="250"></canvas>
<!--
<audio src="http://sebastian1012.bplaced.net/homepage-neu/sounds/01-axel_fischer_-_ich_komm_zurueck_(nach_amsterdam)_(discofox_mix)-zzzz.mp3" controls="controls"></audio>
-->
<audio autoplay='autoplay' id='audio' src='http://hr-youfm-club.cast.addradio.de/hr/youfm/club/mp3/128/stream.mp3'></audio>
<p><video autoplay='autoplay' id='video'></video></p>
<p id="preLog"></p>
<button id="buttonStart">Start</button>
<button id="buttonStopü">Stop</button>
<button id="buttonSnap">Snap</button>

<script>
"use strict";
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var videoStream = null;
var preLog = document.getElementById('preLog');

function log(text)
{
if (preLog) preLog.textContent += ('\n' + text);
else alert(text);
}
function snapshot()
{
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
}
function noStream()
{
log('Access to camera was denied!');
}
function stop()
{
var myButton = document.getElementById('buttonStop');
if (myButton) myButton.disabled = true;
myButton = document.getElementById('buttonSnap');
if (myButton) myButton.disabled = true;
if (videoStream)
{
if (videoStream.stop) videoStream.stop();
else if (videoStream.msStop) videoStream.msStop();
videoStream.onended = null;
videoStream = null;
}
if (video)
{
video.onerror = null;
video.pause();
if (video.mozSrcObject)
video.mozSrcObject = null;
video.src = "";
}
myButton = document.getElementById('buttonStart');
if (myButton) myButton.disabled = false;
}
function gotStream(stream)
{
var myButton = document.getElementById('buttonStart');
if (myButton) myButton.disabled = true;
videoStream = stream;
log('Got stream.');
video.onerror = function ()
{
log('video.onerror');
if (video) stop();
};
stream.onended = noStream;
if (window.webkitURL) video.src = window.webkitURL.createObjectURL(stream);
else if (video.mozSrcObject !== undefined)
{//FF18a
video.mozSrcObject = stream;
video.play();
}
else if (navigator.mozGetUserMedia)
{//FF16a, 17a
video.src = stream;
video.play();
}
else if (window.URL) video.src = window.URL.createObjectURL(stream);
else video.src = stream;
myButton = document.getElementById('buttonSnap');
if (myButton) myButton.disabled = false;
myButton = document.getElementById('buttonStop');
if (myButton) myButton.disabled = false;
}

function start()
{
if ((typeof window === 'undefined') || (typeof navigator === 'undefined')) log('This page needs a Web browser with the objects window.* and navigator.*!');
else if (!(video && canvas)) log('HTML context error!');
else
{
log('Get user media');
if (navigator.getUserMedia) navigator.getUserMedia({video:true}, gotStream, noStream);
else if (navigator.oGetUserMedia) navigator.oGetUserMedia({video:true}, gotStream, noStream);
else if (navigator.mozGetUserMedia) navigator.mozGetUserMedia({video:true}, gotStream, noStream);
else if (navigator.webkitGetUserMedia) navigator.webkitGetUserMedia({video:true}, gotStream, noStream);
else if (navigator.msGetUserMedia) navigator.msGetUserMedia({video:true, audio:false}, gotStream, noStream);
else log('getUserMedia() not available from your Web browser!');
}
}
start();
var musik = new AudioContext();
var quelle = musik.createMediaElementSource(document.getElementById("audio"));
var analyse = musik.createAnalyser();
quelle.connect(analyse);
analyse.connect(musik.destination);
analyse.fftSize = 64;
var frequenzdaten = new Uint8Array(analyse.frequencyBinCount);
analyse.smoothingTimeConstant = 0.85;
var leinwand = document.getElementsByTagName("canvas")[0].getContext("2d");
var leinwand_breite = document.getElementsByTagName("canvas")[0].offsetWidth;
var leinwand_hoehe = document.getElementsByTagName("canvas")[0].offsetHeight;
function audiospektrum() {
  analyse.getByteFrequencyData(frequenzdaten);
  leinwand.clearRect(0, 0, leinwand_breite, leinwand_hoehe);
  for (var i = 0; i < frequenzdaten.length; i++) {
    var balken_x = Math.round(leinwand_breite / frequenzdaten.length) * i;
    var balken_breite = Math.round(leinwand_breite / frequenzdaten.length) - 1;
    var balken_hoehe = leinwand_hoehe / 100 * Math.round(-frequenzdaten[i] / 255 * 100);
    var farbe_rot = frequenzdaten[i];
    var farbe_gruen = 255 - frequenzdaten[i];
leinwand.fillStyle = "rgb(" + farbe_rot + ", " + farbe_gruen + ", 255)";
    leinwand.fillRect(balken_x, leinwand_hoehe, balken_breite, balken_hoehe);
  }
  window.requestAnimationFrame(audiospektrum);
}
window.requestAnimationFrame(audiospektrum);



</script>
<script>
 
var musik = new AudioContext();
var quelle = musik.createMediaElementSource(document.getElementsByTagName("audio")[0]);
var analyse = musik.createAnalyser();

quelle.connect(analyse);
analyse.connect(musik.destination);


analyse.fftSize = 64;
var frequenzdaten = new Uint8Array(analyse.frequencyBinCount);

analyse.smoothingTimeConstant = 0.85;
var leinwand = document.getElementsByTagName("canvas")[0].getContext("2d");
var leinwand_breite = document.getElementsByTagName("canvas")[0].offsetWidth;
var leinwand_hoehe = document.getElementsByTagName("canvas")[0].offsetHeight;

function audiospektrum() {

  analyse.getByteFrequencyData(frequenzdaten);
  leinwand.clearRect(0, 0, leinwand_breite, leinwand_hoehe);

  for (var i = 0; i < frequenzdaten.length; i++) {
    var balken_x = Math.round(leinwand_breite / frequenzdaten.length) * i;
    var balken_breite = Math.round(leinwand_breite / frequenzdaten.length) - 1;
    var balken_hoehe = leinwand_hoehe / 100 * Math.round(-frequenzdaten[i] / 255 * 100);
    var farbe_rot = frequenzdaten[i];
    var farbe_gruen = 255 - frequenzdaten[i];
    leinwand.fillStyle = "rgb(" + farbe_rot + ", " + farbe_gruen + ", 0)";
    leinwand.fillRect(balken_x, leinwand_hoehe, balken_breite, balken_hoehe);
  }

  window.requestAnimationFrame(audiospektrum);

}

//window.requestAnimationFrame(audiospektrum);

 
</script>