[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

 

[Yaslaw]

Mit was für Javaframeworks arbeitest du?
Webbasiert mit Primefaces, JSF etc?

 

[basti1012]

er meint javascript. er hat es in falschen forum gepostet

 

[Fonex47]

er meint javascript. er hat es in falschen forum gepostet

Oh ja stimmt, das tut mir leid hab es wohl in die falsche Sektion geschrieben.

edit: kann das jemand bitte in das richtige Forum verschieben.
Danke

 

[Fonex47]

Hat den niemand irgendeine idee ?

Mfg

 

[Technipion]

Mit der Maus am Pc klappt alles soweit aber auf den Smartphones klappt es leider nicht.

Willst du denn nicht posten, was du bist jetzt hast?
Und was genau willst du dann? Der Button funktioniert am PC aber nicht am Smartphone?

 

[Fonex47]

Willst du denn nicht posten, was du bist jetzt hast?
Und was genau willst du dann? Der Button funktioniert am PC aber nicht am Smartphone?

(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++;
}
 
micro=document.getElementById('gogo');
input=document.getElementById('tim');
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();
    }
});


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


lang=200;
function toggleRecording() {
  was=input.value;
  if(was>=1){
      was--;
      input.value=was; 
      was2=was*20;
      was1=lang-was2;
  }
}


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

Mit der Maus kann ich aufnehmen indem ich gedrückt drauf drücke und halte.
Aber auf dem Handy, wenn ich drauf drücke also TOUCH nimmt er nicht auf. es funktioniert bei keins weder Android noch iOS

Mfg

 

[Sempervivum]

Ich habe das mal auf meinem Handy, Samsung S4, untersucht und zusätzlich touchstart und touchend registriert. Dann ist das Problem folgendes: Für langes Touch (berühren und halten) findet eine Sonderbehandlung statt (Selektieren) und das touchend triggert nicht. Lösung indem ich event.preventDefault() im Handler aufgerufen habe, dann triggern sowohl touchstart als auch touchend bei langem Touch wie gewünscht.

 

[Fonex47]

Ich habe das mal auf meinem Handy, Samsung S4, untersucht und zusätzlich touchstart und touchend registriert. Dann ist das Problem folgendes: Für langes Touch (berühren und halten) findet eine Sonderbehandlung statt (Selektieren) und das touchend triggert nicht. Lösung indem ich event.preventDefault() im Handler aufgerufen habe, dann triggern sowohl touchstart als auch touchend bei langem Touch wie gewünscht.

Hallo Sempervivum, danke erstmals für deine Hilfe, kannst du mir vielleicht den überarbeiteten code schicken?
Das wäre echt nett.

Mfg

 

[Sempervivum]

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.