web-record1.php
Quell Code
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Audio Recorder</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" media="all" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<style>
.control{
background:blue;
border-radius: 50%;
position:absolute;
z-index:1;
top:10px;
left:10px;
width: 100px;
height: 100px;
}
.fa{
color:white;
font-size:60px;
position: absolute;
top: 20px;
left:30px;
z-index: 1;
transform: scale(0.9);
cursor: pointer;
transition: background-color 750ms;
}
.container {
background:red;
border-radius: 50%;
top:10px;
left:calc(70% - 65px);
position:absolute;
width: 120px;
height: 120px;
}
#run{
width:200px;
height:30px;
background:none;
border:1px solid black;
}
#right{
}
#pro{
width:0px;
height:30px;
color:black;
background:green;
position:relative;
display:inline-block;
top:0;
left:0;
}
.speech{
animation: pulse 2.2s linear 33;
}
@keyframes pulse {
0% {
border:10px solid white;
}
25%{
background:white;
}
75%{
border:10px solid red;
}
100% {
border:10px solid white;
background:red;
}
}
#prozent{
position:relative;
left:70px;
z-index:3;
}
</style>
<script>
function drawBuffer( width, height, context, data ) {
var step = Math.ceil( data.length / width );
var amp = height / 2;
context.fillStyle = "silver";
context.clearRect(0,0,width,height);
for(var i=0; i < width; i++){
var min = 1.0;
var max = -1.0;
for (j=0; j<step; j++) {
var datum = data[(i*step)+j];
if (datum < min)
min = datum;
if (datum > max)
max = datum;
}
context.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp));
}
}
</script>
<style>
canvas {
display: inline-block;
background: #202020;
box-shadow: 0px 0px 10px blue;
height:100px;
margin:5px;
width:200px;
}
#record { height: 15vh; }
#record.recording {
background: red;
background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); }
#save, #save img { height: 10vh; }
#save { opacity: 0.25;}
#save[download] { opacity: 1;}
#viz{
display:flex;
flex-direction:row;
justify-content: space-around;
align-items: center;
}
#left,#right{
display:flex;
flex-dirction:column;
}
#server{
position:relative;
height:300px;
overflow:auto;
width:100%;
border:2px solid black;
}
body{
display:flex;
flex-direction:column;
font: 14pt Arial, sans-serif;
background: lightgrey;
}
</style>
</head>
<body>
<h1>Press Micro to Record den Salat</h1>
<div id="viz">
<div id="left">
<canvas id="analyser" width="124" height="50"></canvas>
<canvas id="wavedisplay" width="124" height="50"></canvas>
<a id="save" href="#"><img src="save.svg"></a>
</div>
<div id="right">
<div id="gogo" class="container">
<div class="control">
<div class="fa fa-microphone microphone-icon" id="record" onclick="toggleRecording(this);"></div>
</div>
</div>
<div id="viz1">
<input type="hidden" id="tim" value="10">
<div id="run">
<span id="pro">
<span id="prozent">0%</span>
</span>
</div>
</div>
</div>
</div>
<div id="output"></div>
<div id="server"></div>
<script>
aktu();
function aktu(){
$.ajax({
url: "lese.php",
cache: false,
success: function(res){
document.getElementById('server').innerHTML=res;
},
});
}
</script>
<script>
(function(window){
var WORKER_PATH = 'recorderWorker.js';
var Recorder = function(source, cfg){
var config = cfg || {};
var bufferLen = config.bufferLen || 4096;
this.context = source.context;
if(!this.context.createScriptProcessor){
this.node = this.context.createJavaScriptNode(bufferLen, 2, 2);
} else {
this.node = this.context.createScriptProcessor(bufferLen, 2, 2);
}
var worker = new Worker(config.workerPath || WORKER_PATH);
worker.postMessage({
command: 'init',
config: {
sampleRate: this.context.sampleRate
}
});
var recording = false,
currCallback;
this.node.onaudioprocess = function(e){
if (!recording) return;
worker.postMessage({
command: 'record',
buffer: [
e.inputBuffer.getChannelData(0),
e.inputBuffer.getChannelData(1)
]
});
}
this.configure = function(cfg){
for (var prop in cfg){
if (cfg.hasOwnProperty(prop)){
config[prop] = cfg[prop];
}
}
}
this.record = function(){
recording = true;
}
this.stop = function(){
recording = false;
}
this.clear = function(){
worker.postMessage({ command: 'clear' });
}
this.getBuffers = function(cb) {
currCallback = cb || config.callback;
worker.postMessage({ command: 'getBuffers' })
}
this.exportWAV = function(cb, type){
currCallback = cb || config.callback;
type = type || config.type || 'audio/wav';
if (!currCallback) throw new Error('Callback not set');
worker.postMessage({
command: 'exportWAV',
type: type
});
}
this.exportMonoWAV = function(cb, type){
currCallback = cb || config.callback;
type = type || config.type || 'audio/wav';
if (!currCallback) throw new Error('Callback not set');
worker.postMessage({
command: 'exportMonoWAV',
type: type
});
}
worker.onmessage = function(e){
var blob = e.data;
currCallback(blob);
}
source.connect(this.node);
this.node.connect(this.context.destination); // if the script node is not connected to an output the "onaudioprocess" event is not triggered in chrome.
};
Recorder.setupDownload = function(blob, filename){
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var link = document.getElementById("save");
link.href = url;
link.download = filename || 'output.wav';
}
window.Recorder = Recorder;
})(window);
</script>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
var audioInput = null,
realAudioInput = null,
inputPoint = null,
audioRecorder = null;
var rafID = null;
var analyserContext = null;
var canvasWidth, canvasHeight;
var recIndex = 0;
function saveAudio() {
audioRecorder.exportWAV( doneEncoding );
// audioRecorder.exportMonoWAV( doneEncoding );
}
function gotBuffers( buffers ) {
var canvas = document.getElementById( "wavedisplay" );
drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), buffers[0] );
audioRecorder.exportWAV( doneEncoding );
}
function doneEncoding( blob ) {
var fd = new FormData();
fd.append('data', blob);
$.ajax({
method: 'POST',
url: 'blob.php',
data: fd,
processData: false,
contentType: false,
success: function (output) {
console.log("done");
document.getElementById("output").innerHTML = output;
aktu();
}
});
Recorder.setupDownload( blob, "myRecording" + ((recIndex<10)?"0":"") + recIndex + ".wav" );
recIndex++;
}
micro=document.getElementById('gogo');
inpu=document.getElementById('tim');
proin=document.getElementById('pro');
proz=document.getElementById('prozent');
rec=document.getElementById('record');
micro.addEventListener('mousedown',function(e){
laufer=setInterval(function(){ toggleRecording(); }, 1000);
console.log('go animationund start record');
if (rec.classList.contains("recording")) {
audioRecorder.stop();
rec.classList.remove("recording");
audioRecorder.getBuffers( gotBuffers );
} else {
if (!audioRecorder)
return;
rec.classList.add("recording");
audioRecorder.clear();
audioRecorder.record();
}
document.getElementsByClassName('container')[0].classList.add('speech');
});
micro.addEventListener('mouseup',function(e){
clearInterval(laufer);
console.log('stop und sendentimer return auf 10');
document.getElementsByClassName('container')[0].classList.remove('speech');
inpu.value=10;
proz.innerHTML='0%';
proin.style.width='0px';
if (rec.classList.contains("recording")) {
audioRecorder.stop();
rec.classList.remove("recording");
audioRecorder.getBuffers( gotBuffers );
}
})
lang=200;
function toggleRecording() {
was=inpu.value;
if(was>=1){
was--;
inpu.value=was;
was2=was*20;
was1=lang-was2;
proz.innerHTML=was1/2+'%';
proin.style.width=was1+'px';
}
}
function convertToMono( input ) {
var splitter = audioContext.createChannelSplitter(2);
var merger = audioContext.createChannelMerger(2);
input.connect( splitter );
splitter.connect( merger, 0, 0 );
splitter.connect( merger, 0, 1 );
return merger;
}
function cancelAnalyserUpdates() {
window.cancelAnimationFrame( rafID );
rafID = null;
}
function updateAnalysers(time) {
if (!analyserContext) {
var canvas = document.getElementById("analyser");
canvasWidth = canvas.width;
canvasHeight = canvas.height;
analyserContext = canvas.getContext('2d');
}
// analyzer draw code here
{
var SPACING = 3;
var BAR_WIDTH = 1;
var numBars = Math.round(canvasWidth / SPACING);
var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
analyserNode.getByteFrequencyData(freqByteData);
analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
analyserContext.fillStyle = '#F6D565';
analyserContext.lineCap = 'round';
var multiplier = analyserNode.frequencyBinCount / numBars;
// Draw rectangle for each frequency bin.
for (var i = 0; i < numBars; ++i) {
var magnitude = 0;
var offset = Math.floor( i * multiplier );
for (var j = 0; j< multiplier; j++)
magnitude += freqByteData[offset + j];
magnitude = magnitude / multiplier;
var magnitude2 = freqByteData[i * multiplier];
analyserContext.fillStyle = "hsl( " + Math.round((i*360)/numBars) + ", 100%, 50%)";
analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude);
}
}
rafID = window.requestAnimationFrame( updateAnalysers );
}
function toggleMono() {
if (audioInput != realAudioInput) {
audioInput.disconnect();
realAudioInput.disconnect();
audioInput = realAudioInput;
} else {
realAudioInput.disconnect();
audioInput = convertToMono( realAudioInput );
}
audioInput.connect(inputPoint);
}
function gotStream(stream) {
inputPoint = audioContext.createGain();
realAudioInput = audioContext.createMediaStreamSource(stream);
audioInput = realAudioInput;
audioInput.connect(inputPoint);
// audioInput = convertToMono( input );
analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 2048;
inputPoint.connect( analyserNode );
audioRecorder = new Recorder( inputPoint );
zeroGain = audioContext.createGain();
zeroGain.gain.value = 0.0;
inputPoint.connect( zeroGain );
zeroGain.connect( audioContext.destination );
updateAnalysers();
}
function initAudio() {
if (!navigator.getUserMedia)
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!navigator.cancelAnimationFrame)
navigator.cancelAnimationFrame = navigator.webkitCancelAnimationFrame || navigator.mozCancelAnimationFrame;
if (!navigator.requestAnimationFrame)
navigator.requestAnimationFrame = navigator.webkitRequestAnimationFrame || navigator.mozRequestAnimationFrame;
navigator.getUserMedia(
{
"audio": {
"mandatory": {
"googEchoCancellation": "false",
"googAutoGainControl": "false",
"googNoiseSuppression": "false",
"googHighpassFilter": "false"
},
"optional": []
},
}, gotStream, function(e) {
alert('Error getting audio');
console.log(e);
});
}
window.addEventListener('load', initAudio );
</script>
</body>
</html>