[Hilfe] Button Touch Smartphone Script Problem


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Fonex47

Grünschnabel
#1
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

Grünschnabel
#7
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?
Javascript:
(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

Erfahrenes Mitglied
#8
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

Grünschnabel
#9
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

Erfahrenes Mitglied
#10
Ich hatte nicht das komplette Skript getestet sondern nur das Touch-Verhalten. Wenn Du es in deinem Skript ändern willst, musst Du dieses:
Code:
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:
Code:
        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.
 
#11
Ich hatte nicht das komplette Skript getestet sondern nur das Touch-Verhalten. Wenn Du es in deinem Skript ändern willst, musst Du dieses:
Code:
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:
Code:
        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
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…