Insert mehrere Zeilen mit einer Dynamic Tabelle

Wie kann ich eine JavaScript-Variable in ein Inputfeld für eine Value-Eingabe umwandeln ?
Ich habe es folgend versucht.. Form usw. habe ich weg gelassen!
HTML:
<input typ="text" class="form-control" name="sprachproben_aufnehmen_audio" id="sprachproben_aufnehmen_audio" value="<?php echo $sprachproben_aufnehmen_audio" ?>>

Das Originalskript (Ausschnitt) wo der Code ausgegeben wird..
Code:
function uploadAudio(mp3Data){
        var reader = new FileReader();
        reader.onload = function(event){
            var fd = new FormData()
            var mp3Name = (new Date().getTime() + '.mp3');
            console.log("mp3name = " + mp3Name);
            fd.append('fname', mp3Name);
            fd.append('data', event.target.result);
            $.ajax({
                type: 'POST',
                url: 'upload.php',
                data: fd,
                processData: false,
                contentType: false
            }).done(function(data) {
                console.log(data);
                log.innerHTML += "\n" + data;
            });
        };
        reader.readAsDataURL(mp3Data);
    }

Diesen Abschnitt wollte ich gern als Value..
Code:
var mp3Name = (new Date().getTime() + '.mp3');

und versucht habe ich folgendes:
Code:
var mp3Name = document.getElementById('sprachproben_aufnehmen_audio').value;

Aber irgendetwas fehlt dort noch... Und ich steh mal wieder auf dem Schlauch..
 
Hallo CreativPur,

du möchtest den Inhalt der Variable "mp3Name" als Value in das Input-Feld eintragen?

Code:
document.getElementById('sprachproben_aufnehmen_audio').value = mp3Name;

Viele Grüße
goto;
 
Hm... Irgendwie klappt es nicht..
Ich möchte mein Anliegen lieber nochmal verdeutlichen..

Ich habe ein Aufnahme-Reorder auf meiner Webseite.
Damit sollen Fremdsprachen-Proben erstellt werden.
Dieser funktioniert auch einwandfrei..

Die mp3-Dateien werden auch in einem Ordner abgelegt.
Auch das abspielen der Sprachprobe funktioniert..

Allerdings gibt es zwei Probleme:
Problem 1. Es wird ein anderer Code unter dem Abspiel-Gerät ausgegeben, als wie die mp3-Datei im Ordner abgespeichert wird.
a: Der Code unter dem Abspielgerät lautet -> 1502896610995.mp3
b: Der Code Code im Ablageordner lautet -> audio_recording_2017-08-16-17-16-51.mp3
Problem 2. Wenn der User sich für die Sprachaufnahme entschieden hat, soll er im 2. Schritt die Auswahl auf die Datenbank speichern können.
Am liebsten im Format .......value="<?php echo $userid ?> + - + Code + .mp3">.. z.B. 78-1502896610995.mp3
Die Tabelle besteht nur aus:
audio_id
userid
sprachproben_aufnehmen_sprache (Welche Sprache)
sprachproben_aufnehmen_audio (Code)
Dies ist mein HTML
HTML:
<div class="row">
                    <div class="col-lg-1">
                    </div>
                    <div class="col-lg-6">
                        <button id="aufnahme" type="button" class="btn btn-danger" onClick="startRecording(this);">Aufnahme</button>
                        <button id="stop" type="button" class="btn btn-success" onClick="stopRecording(this), outline('neue_aufnahme'); outline('aufnahme'); outline('stop'); return false;">STOP</button>
                        <button id="neue_aufnahme" type="button" style="display:none" class="btn btn-info" onClick="location.reload();">Neue Aufnahme</button>
                       <br /><br />
                       <pre id="log"></pre>
                    </div>
                    <div class="col-lg-4">
                        <br /><br />
                        <div id="recordingslist"></div>   
                            <hr />
                                <span style="color:red"><strong>Benennen Sie bitte Ihre Aufnahme:</strong></span>
                                <br />
                            <form action="?aufnahme_sprache" name="aufnahme_sprache" method="post">   
                                <input typ="text" class="form-control" name="sprachproben_aufnehmen_sprache" placeholder="Z.B. Englisch">
                                <br />
                                <input typ="text" class="form-control" name="sprachproben_aufnehmen_audio" id="sprachproben_aufnehmen_audio">
                                <br />
                                <input typ="text" class="form-control" name="userid" value="<?php echo $userid ?>" >
                                <hr />
                                <button type="submit" class="btn btn-primary">Sprachprobe speichern</button>
                            </form>
                        </div>
                    </div>
                </div>

Und dies ist das Script:
Code:
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }
  var audio_context;
  var recorder;
  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    recorder = new Recorder(input, {
                  numChannels: 1
                });
    __log('<pan style="color:green">Sie haben der Aufnahme zugestimmt.</span>');           
    __log('<hr /><pan style="color:red"><strong>Aufnahmebereit.</strong></span<br />');
  }

  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('<span style="color:blue;"><strong>Achtung:</strong></span> AUFNAHME...');
  }

  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('AUFNAHME <strong>beendet</strong>.');

    // create WAV download link using audio data blob
    createDownloadLink();

    recorder.clear();
  }

  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
   
    });
  }

  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
      window.URL = window.URL || window.webkitURL;

      audio_context = new AudioContext;
      __log('<pan style="color:red"><strong>Sie m&uuml;ssen die Aufnahme erst erlauben.</strong></span>');
     
    } catch (e) {
      alert('Ihr Browser unterst&uuml;tzt leider nicht diese Aufnahme! <br /> Bitte nehmen Sie Ihre Sprachaufnahme z.B. mit dem Handy auf und laden diese anschliessend hoch.');
    }

    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('Sie müssen an Ihrem PC die Audiofunktion aktivieren: ' + e);
    });
  };
 
(function(window){

  var WORKER_PATH = 'recorder/recorderWorker.js';
  var encoderWorker = new Worker('recorder/mp3Worker.js');

  var Recorder = function(source, cfg){
    var config = cfg || {};
    var bufferLen = config.bufferLen || 4096;
    var numChannels = config.numChannels || 2;
    this.context = source.context;
    this.node = (this.context.createScriptProcessor ||
                 this.context.createJavaScriptNode).call(this.context,
                 bufferLen, numChannels, numChannels);
    var worker = new Worker(config.workerPath || WORKER_PATH);
    worker.postMessage({
      command: 'init',
      config: {
        sampleRate: this.context.sampleRate,
        numChannels: numChannels
      }
    });
    var recording = false,
      currCallback;

    this.node.onaudioprocess = function(e){
      if (!recording) return;
      var buffer = [];
      for (var channel = 0; channel < numChannels; channel++){
          buffer.push(e.inputBuffer.getChannelData(channel));
      }
      worker.postMessage({
        command: 'record',
        buffer: buffer
      });
    }

    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.getBuffer = function(cb) {
      currCallback = cb || config.callback;
      worker.postMessage({ command: 'getBuffer' })
    }

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

    //Mp3 conversion
    worker.onmessage = function(e){
      var blob = e.data;
      //console.log("the blob " +  blob + " " + blob.size + " " + blob.type);

      var arrayBuffer;
      var fileReader = new FileReader();

      fileReader.onload = function(){
        arrayBuffer = this.result;
        var buffer = new Uint8Array(arrayBuffer),
        data = parseWav(buffer);
        console.log(data);
        console.log("Converting to Mp3");
        log.innerHTML += "\n" + "<hr /><pan style='color:green'>Ihre Aufnahme wird bearbeitet. <br />Dies kann je nach der Aufnahmedauer einige Minuten dauern..</span><hr />";
        encoderWorker.postMessage({ cmd: 'init', config:{
            mode : 3,
            channels:1,
            samplerate: data.sampleRate,
            bitrate: data.bitsPerSample
        }});
        encoderWorker.postMessage({ cmd: 'encode', buf: Uint8ArrayToFloat32Array(data.samples) });
        encoderWorker.postMessage({ cmd: 'finish'});
        encoderWorker.onmessage = function(e) {
            if (e.data.cmd == 'data') {
                console.log("Ihre Aufnahme ist fertig und kann angeh&ouml;rt werden");
                log.innerHTML += "\n" + "<pan style='color:blue'>Ihre Aufnahme ist fertig und kann gleich<br />abgespielt/angeh&ouml;rt werden</span>";
                /*var audio = new Audio();
                audio.src = 'data:audio/mp3;base64,'+encode64(e.data.buf);
                audio.play();*/

                //console.log ("The Mp3 data " + e.data.buf);
                var mp3Blob = new Blob([new Uint8Array(e.data.buf)], {type: 'audio/mp3'});
                uploadAudio(mp3Blob);
                var url = 'data:audio/mp3;base64,'+encode64(e.data.buf);
                var li = document.createElement('li');
                var au = document.createElement('audio');
                var hf = document.createElement('a');
                var input = document.createElement('input');
                au.controls = true;
                au.src = url;
                hf.href = url;
                hf.download = new Date().getTime() + '.mp3';
                hf.innerHTML = hf.download;
                li.appendChild(au);
                li.appendChild(hf);
                recordingslist.appendChild(li);
            }
        };
      };

      fileReader.readAsArrayBuffer(blob);

      currCallback(blob);
    }
    function encode64(buffer) {
        var binary = '',
            bytes = new Uint8Array( buffer ),
            len = bytes.byteLength;

        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode( bytes[ i ] );
        }
        return window.btoa( binary );
    }
    function parseWav(wav) {
        function readInt(i, bytes) {
            var ret = 0,
                shft = 0;

            while (bytes) {
                ret += wav[i] << shft;
                shft += 8;
                i++;
                bytes--;
            }
            return ret;
        }
        if (readInt(20, 2) != 1) throw 'Invalid compression code, not PCM';
        if (readInt(22, 2) != 1) throw 'Invalid number of channels, not 1';
        return {
            sampleRate: readInt(24, 4),
            bitsPerSample: readInt(34, 2),
            samples: wav.subarray(44)
        };
    }

    function Uint8ArrayToFloat32Array(u8a){
        var f32Buffer = new Float32Array(u8a.length);
        for (var i = 0; i < u8a.length; i++) {
            var value = u8a[i<<1] + (u8a[(i<<1)+1]<<8);
            if (value >= 0x8000) value |= ~0x7FFF;
            f32Buffer[i] = value / 0x8000;
        }
        return f32Buffer;
    }
    function uploadAudio(mp3Data){
        var reader = new FileReader();
        reader.onload = function(event){
            var fd = new FormData()
            var mp3Name = (new Date().getTime() + '.mp3');
            console.log("mp3name = " + mp3Name);
            fd.append('fname', mp3Name);
            fd.append('data', event.target.result);
            $.ajax({
                type: 'POST',
                url: 'upload.php',
                data: fd,
                processData: false,
                contentType: false
            }).done(function(data) {
                console.log(data);
                log.innerHTML += "\n" + data;
            });
        };
        reader.readAsDataURL(mp3Data);
    }

    source.connect(this.node);
    this.node.connect(this.context.destination);    //this should not be necessary
  };

  window.Recorder = Recorder;

})(window);

 
Dieser Code ist ja ein Wahnsinn! Hast Du den selber geschrieben?
Verstehe ich das richtig: Es geht dir um dieses Zeile:
Code:
var mp3Name = (new Date().getTime() + '.mp3');
Diese erzeugt den Dateinamen, den Du unter a angibst:
a: Der Code unter dem Abspielgerät lautet -> 1502896610995.mp3
Offenbar ist das, was Du als "Code" bezeichnest, der Zeitpunkt der Aufnahme.
Weiter schreibst Du:
b: Der Code Code im Ablageordner lautet -> audio_recording_2017-08-16-17-16-51.mp3
Meinst Du, dass der Code im Ablageordner so lauten soll?
 
Nein..Den Code habe ich leider nicht selbst geschrieben.. Ich wünschte, ich hätte diese Kenntnisse.
Ich denke mal, der Code (new Date().getTime() + '.mp3') aus dieser Zeile 175 + 233 gibt entweder ->1502896610995.mp3 oder -> audio_recording_2017-08-16-17-16-51.mp3 aus.
Wo er den Vorspann audio_recording_ her holt, weiß ich leider nicht.
Mein Wunsch wäre,dass das Script die pm3-Dateien in 'Userid' + '-' + '1502896610995.mp3' ausgibt, so, dass er z.B. 78-1502896610995.mp3 erzeugt wird.
Außerdem dass dann im VALUE des INPUT FELDES für Name="sprachproben_aufnehmen_audio" der Code (78-1502896610995.mp3) in die Datenbank gespeichert wird.
 
Zu dem Script kommen noch 2 weitere js, die aber für das speichern irrelevant sind.

Wenn die Aufnahme durchgelaufen ist, öffnet sich ein Player und darunter der Link 1502896610995.mp3.
In den Ablageordner wird die Selbe dabei aber folgend als mp3 hinterlegt: audio_recording_2017-08-16-17-16-51.mp3
 
Versuche mal, ob dir dies weiter hilft:
Im head die User-ID in einer Variablen speichern:
Code:
<script> var userid = <?php echo $userid; ?>; </script>

Und dann dieses:
Code:
var mp3Name = (new Date().getTime() + '.mp3');
durch dieses ersetzen:
Code:
var mp3Name = userid + '-' + (new Date().getTime()) + '.mp3';
document.querySelector("input[name='userid']").value = userid + '-' + (new Date().getTime()) + '.mp3';
 
Zuletzt bearbeitet:
Zurück