[Hilfe] Button Touch Smartphone Script Problem

[Fonex47]

Guten Abend liebe Tutos

Ich würde gerne wissen wie ich einen Button hinkriege der beim Halten via Mausdruck und noch wichtiger beim Smartphone via Touch eine Audio aufnehmen soll.
Das heißt beim Touch oder Mausdruck soll er anfangen aufzunehmen und beim loslassen soll er anhalten und abschicken.
Mit der Maus am Pc klappt alles soweit aber auf den Smartphones klappt es leider nicht.


Vielen Dank im Voraus für eure Hilfe.
Mfg
FoneX

 

[Fonex47]

Ich hatte nicht das komplette Skript getestet sondern nur das Touch-Verhalten. Wenn Du es in deinem Skript ändern willst, musst Du dieses:

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();
    }
});


micro.addEventListener('mouseup',function(e){
  clearInterval(laufer);
  console.log('stop und sendentimer return auf 10');
  input.value=10;
  if (rec.classList.contains("recording")) {
        audioRecorder.stop();
        rec.classList.remove("recording");
        audioRecorder.getBuffers( gotBuffers );
  }
})

durch dieses ersetzen:

        function startRecording(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();
            }
        }
        micro.addEventListener('mousedown', startRecording);
        micro.addEventListener('touchstart', startRecording);

        function stopRecording(e) {
            e.preventDefault();
            clearInterval(laufer);
            console.log('stop und sendentimer return auf 10');
            input.value = 10;
            if (rec.classList.contains("recording")) {
                audioRecorder.stop();
                rec.classList.remove("recording");
                audioRecorder.getBuffers(gotBuffers);
            }
        }
        micro.addEventListener('mouseup', stopRecording);
        micro.addEventListener('touchend', stopRecording);

Ungetestet aber es sollte so funktionieren.

Es funktioniert nun super!
Ich danke dir so sehr, endlich endlich nach tage langer qualvolle nächte
Vielen vielen dank!

Mfg
Fonex

 

[Sempervivum]

Gern geschehen, freut mich, dass es funktioniert! Das hast Du aber schnell übernommen und getestet.

 

[Fonex47]

Hallo, und sorry das ich nochmal blöd Frage, und zwar hatte es ja geklappt mit dem handy aufzunehmen nur manchmal spackt es rum..

Nun möchte ich gerne wissen ob ich irgendwelche fehler drinne habe oder mir was fehlt, weshalb es nicht immer reibungslos funktioniert. " Manchmal nimmt es auf manchmal wieder nicht"


Ich hänge mal beide Codes hier ran

Die recorderWorker.js

var recLength = 0,
  recBuffersL = [],
  recBuffersR = [],
  sampleRate;

this.onmessage = function(e){
  switch(e.data.command){
    case 'init':
      init(e.data.config);
      break;
    case 'record':
      record(e.data.buffer);
      break;
    case 'exportWAV':
      exportWAV(e.data.type);
      break;
    case 'exportMonoWAV':
      exportMonoWAV(e.data.type);
      break;
    case 'getBuffers':
      getBuffers();
      break;
    case 'clear':
      clear();
      break;
  }
};

function init(config){
  sampleRate = config.sampleRate;
}

function record(inputBuffer){
  recBuffersL.push(inputBuffer[0]);
  recBuffersR.push(inputBuffer[1]);
  recLength += inputBuffer[0].length;
}

function exportWAV(type){
  var bufferL = mergeBuffers(recBuffersL, recLength);
  var bufferR = mergeBuffers(recBuffersR, recLength);
  var interleaved = interleave(bufferL, bufferR);
  var dataview = encodeWAV(interleaved);
  var audioBlob = new Blob([dataview], { type: type });

  this.postMessage(audioBlob);
}

function exportMonoWAV(type){
  var bufferL = mergeBuffers(recBuffersL, recLength);
  var dataview = encodeWAV(bufferL, true);
  var audioBlob = new Blob([dataview], { type: type });

  this.postMessage(audioBlob);
}

function getBuffers() {
  var buffers = [];
  buffers.push( mergeBuffers(recBuffersL, recLength) );
  buffers.push( mergeBuffers(recBuffersR, recLength) );
  this.postMessage(buffers);
}

function clear(){
  recLength = 0;
  recBuffersL = [];
  recBuffersR = [];
}

function mergeBuffers(recBuffers, recLength){
  var result = new Float32Array(recLength);
  var offset = 0;
  for (var i = 0; i < recBuffers.length; i++){
    result.set(recBuffers[i], offset);
    offset += recBuffers[i].length;
  }
  return result;
}

function interleave(inputL, inputR){
  var length = inputL.length + inputR.length;
  var result = new Float32Array(length);

  var index = 0,
    inputIndex = 0;

  while (index < length){
    result[index++] = inputL[inputIndex];
    result[index++] = inputR[inputIndex];
    inputIndex++;
  }
  return result;
}

function floatTo16BitPCM(output, offset, input){
  for (var i = 0; i < input.length; i++, offset+=2){
    var s = Math.max(-1, Math.min(1, input[i]));
    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
  }
}

function writeString(view, offset, string){
  for (var i = 0; i < string.length; i++){
    view.setUint8(offset + i, string.charCodeAt(i));
  }
}

function encodeWAV(samples, mono){
  var buffer = new ArrayBuffer(44 + samples.length * 2);
  var view = new DataView(buffer);

  /* RIFF identifier */
  writeString(view, 0, 'RIFF');
  /* file length */
  view.setUint32(4, 32 + samples.length * 2, true);
  /* RIFF type */
  writeString(view, 8, 'WAVE');
  /* format chunk identifier */
  writeString(view, 12, 'fmt ');
  /* format chunk length */
  view.setUint32(16, 16, true);
  /* sample format (raw) */
  view.setUint16(20, 1, true);
  /* channel count */
  view.setUint16(22, mono?1:2, true);
  /* sample rate */
  view.setUint32(24, sampleRate, true);
  /* byte rate (sample rate * block align) */
  view.setUint32(28, sampleRate * 4, true);
  /* block align (channel count * bytes per sample) */
  view.setUint16(32, 4, true);
  /* bits per sample */
  view.setUint16(34, 16, true);
  /* data chunk identifier */
  writeString(view, 36, 'data');
  /* data chunk length */
  view.setUint32(40, samples.length * 2, true);

  floatTo16BitPCM(view, 44, samples);

  return view;
}

und die sprachnachricht.js

(function(window){
  var WORKER_PATH = '/js/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);
  
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++;
}
 
var cont_input = document.getElementById('container_input');
var micro = document.getElementById('gogo');
var input = document.getElementById('tim');
var rec = document.getElementById('record');
function startRecording(e) {
    cont_input.style.backgroundColor = "red";
    console.log('go animationund start record');

    if(input.value == 0) {
        input.value = 10;
        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();
        }
    }
}
micro.addEventListener('mousedown', startRecording);
micro.addEventListener('touchstart', startRecording);

function stopRecording(e) {
    cont_input.style = "";
    e.preventDefault();
    console.log('stop und sendentimer return auf 10');
    if(!interval_to) {
        var interval_to = setInterval(function() {
            timeout = input.value;
            if(timeout > 0) {
                timeout--;
                input.value = timeout;
            } else {
                clearInterval(interval_to);
            }   
        }, 1000);
    }
    
    if (rec.classList.contains("recording")) {
        audioRecorder.stop();
        rec.classList.remove("recording");
        audioRecorder.getBuffers(gotBuffers);
    }
}
micro.addEventListener('mouseup', stopRecording);
micro.addEventListener('touchend', stopRecording);

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 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 );

Es will halt irgendwie nicht reibungslos funktionieren und das macht mich fertig...

Danke schonmal an alle die helfen werden..
Mfg
Fonex

 

[Sempervivum]

Ich hatte da noch etwas vergessen, aber war der Sache nicht mehr nachgegangen, weil Du schriebst, dass es funktioniert. Hier müsste auch ein preventDefault() rein:

        function startRecording(e) {
            e.preventDefault();
            laufer = setInterval(function () { toggleRecording(); }, 1000);
            console.log('go animationund start record');

Versuche, ob das etwas verbessert. Wenn nicht wäre es hilfreich, wenn Du es online hast, damit man den ganzen Code einsehen und es live untersuchen kann.

 

[basti1012]

Denkt dran das nicht jeder Browser das kann. Beim Handy weiß ich das nicht. Bei mir im Chat geht es nur mit Opera ,mein anderer Browser macht nur leere 4byte Datein.

 

[Fonex47]

Ich hatte da noch etwas vergessen, aber war der Sache nicht mehr nachgegangen, weil Du schriebst, dass es funktioniert. Hier müsste auch ein preventDefault() rein:

        function startRecording(e) {
            e.preventDefault();
            laufer = setInterval(function () { toggleRecording(); }, 1000);
            console.log('go animationund start record');

Versuche, ob das etwas verbessert. Wenn nicht wäre es hilfreich, wenn Du es online hast, damit man den ganzen Code einsehen und es live untersuchen kann.

Sorry das ich so spät antworte, die lösung wäre wenn das script auf dem Handy fragt "darf ich auf deinen Mikrofon zugreifen" sozusagen muss er das erkennen und das tut er bei dem Chrome/Firefox browser auf dem Handy nicht..


Mfg
Fonex