Zeitanzeige, wenn START gedrückt wird

Question

Ich möchte einen Zeitanzeiger laufen lassen, der nicht unbedingt ein Countdown sein muss, aber sein kann. Ich habe mich an den vorgeschlagenen Lösungsansatz orientiert, jedoch ohne Erfolg bei mir.
var date0 = new Date(); und var timeout = date0.getTime() + %remain% * 1000; sind vermutlich weiterhin am falschen Ort verwendet.

Folgende Fehlermeldung wird angezeigt: Für den Platzhalter %remain% wurde weder ein Eingabefeld mit prepare_input() vorbereitet, noch ein Inhalt mit replace() festgelegt. Und der Countdown fängt direkt beim Seitenstart an.

<!-- Buttons -->
<div style="margin: 2em 0 0.5em">
  <button id="btnStart" type="button" tabindex="50">START</button>
  <button id="btnStop" type="button" tabindex="50">STOP</button>
</div>
<div style="margin: 0.5em 0" id="audioReload">Bitte laden Sie die Seite neu (<a href="javascript:SoSciTools.reloadPage()">Neu Laden</a>) und gestatten Sie der Seite Zugriff auf Ihr Audio-Gerät.</div>

<!-- Audio recorder from https://github.com/muaz-khan/RecordRTC -->
<script src="../plugins/RecordRTC/RecordRTC.min.js"></script>
<script src="../plugins/RecordRTC/gumadapter.js"></script>


<script type="text/javascript">
<!--
"use strict";

if ((webrtcDetectedVersion === null) || (webrtcDetectedVersion < webrtcMinimumVersion)) {
  alert("Ihr Browser unterstützt diese Aufnahme leider nicht.");
  throw new Error("no audio support");
}

var buttonStart = document.getElementById("btnStart");
var buttonStop = document.getElementById("btnStop");
var recordRTC;

function startRecording(button) {
  if (recordRTC) {
    recordRTC.startRecording();
    buttonStart.disabled = true;
    buttonStop.disabled = false;
  }
}

function stopRecording(button) {
  if (recordRTC) {
    recordRTC.stopRecording(onStop);
    // You may want to change this to allow a new try (replacing the old one)
    buttonStart.disabled = false;
    buttonStop.disabled = true;
  }
}

function onStop(audioURL) {
    var recordedBlob = recordRTC.getBlob();
    // Transfer the data
    %q.id%.sendBLOB(recordedBlob);
}

function onStream(stream) {
    var options = {
        mimeType: "audio/ogg",
        audioBitsPerSecond: 128000
    };
    recordRTC = new RecordRTC(stream, options);
    // Enable the start button
    buttonStart.disabled = false;
    // Remove warning
    document.getElementById("audioReload").style.display = "none";
}

function init() {
    buttonStart.disabled = true;
    buttonStop.disabled = true;

    var mediaConstraints = {
        video: false,
        audio: true
    };

    function onError(error) {
      alert("Ihr Computer oder Ihr Browser unterstützt derzeit keine Tonaufnahme." + "\n\n" + error);
    }
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(onStream).catch(onError);
};

SoSciTools.attachEvent(window, "load", init);
SoSciTools.attachEvent(buttonStart, "click", startRecording);
SoSciTools.attachEvent(buttonStop, "click", stopRecording);
// Countdown anzeigen
var date0 = new Date();
var timeout = date0.getTime() + %remain% * 1000;
function updateCountdown() {
  // Zeit berechnen
  var date = new Date();
  var time = Math.ceil((timeout - date.getTime() - 50) / 1000);  // Verbleibende Zeit in Sekunden
  // Zeit anzeigen
  var out = document.getElementById("remain");
  if (!out) {
    return;
}

// -->
</script>

---

<p>Verbleibende Zeit: <span id="remain"></span></p>

---

<script type="text/javascript">
<!--
// Funktion zur Weiterleitung
function weiter() {
  // Eine Meldung anzeigen (optional)
  alert("Die Zeit ist vorbei.");
  // Den Teilnehmer zur nächsten Seite weiterleiten
  SoSciTools.submitPage();
}
// Countdown anzeigen
var date0 = new Date();
var timeout = date0.getTime() + %remain% * 1000;
function updateCountdown() {
  // Zeit berechnen
  var date = new Date();
  var time = Math.ceil((timeout - date.getTime() - 50) / 1000);  // Verbleibende Zeit in Sekunden
  // Zeit anzeigen
  var out = document.getElementById("remain");
  if (!out) {
    return;
  }
  while (out.lastChild) {
    out.removeChild(out.lastChild);
  }
  var minutes = Math.floor(time / 60);
  var seconds = String(time - 60 * minutes);
  if (seconds.length < 2) seconds = "0" + seconds;
  var display = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(display);
  out.appendChild(displayNode);
}
// Initialisierung der Weiterleitung
SoSciTools.attachEvent(window, "load", function(evt) {
  // Weiter-Knopf ausblenden (optional)
  SoSciTools.submitButtonsHide();
  // Zusätzlicher Timer für die Aktualisierung des Countdowns
  window.setInterval(updateCountdown, 1000);
  updateCountdown();
  // Timer für automatische Weiterleitung starten
  window.setTimeout(weiter, %remain% * 1000);
});
// -->
</script>

Comments

Ich befürchte, ich muss Sie um eine Erklärung bitten, was Sie genau benötigen. Möchten Sie überhaupt Audio aufzeichnen? Und ...

> einen Zeitanzeiger laufen lassen, der nicht unbedingt ein Countdown sein muss, aber sein kann

Soll es denn nun ein Countdown sein oder nicht? Sie können auch einfach die aktuelle Uhrzeit anzeigen ... aber ich vermute, Sie hatten schon eine genauere Vorstellung, was Sie eigentlich brauchen. Bitte beschreiben Sie diese doch einmal, damit wir wissen, was am Ende herauskommen soll.

Answer 1

Danke für die Ergänzung, jetzt wird das ganze ein wenig klarer :)

Für die Integration des zweiten in den ersten Code, ergänzen Sie zunächst im ersten Code eine Variable:

var buttonStart = document.getElementById("btnStart");
var buttonStop = document.getElementById("btnStop");
// Neu
var date0;

Außerdem initialisieren Sie diese neue Variable in startRecording() und starten die Anzeige des Timers.

function startRecording(button) {
  if (recordRTC) {
    recordRTC.startRecording();
    buttonStart.disabled = true;
    buttonStop.disabled = false;
  }
  // Timer
  date0 = new Date();
  window.setInterval(updateCountdown, 1000);
  updateCountdown();
}

Die Funktion updateCountdown() können Sie dann ein wenig verschlanken.

function updateCountdown() {
  // Zeit berechnen
  var date = new Date();
  var time = Math.ceil((date0.getTime() - date.getTime()) / 1000);  // Zeit seit date0 in Sekunden
  // Zeit anzeigen
  var out = document.getElementById("remain");
  if (!out) {
    return;
  }
  while (out.lastChild) {
    out.removeChild(out.lastChild);
  }
  var minutes = Math.floor(time / 60);
  var seconds = String(time - 60 * minutes);
  if (seconds.length < 2) seconds = "0" + seconds;
  var display = String(minutes) + ":" + seconds;
  var displayNode = document.createTextNode(display);
  out.appendChild(displayNode);
}

Und sonst brauchen Sie aus dem Timer-Code eigentlich auch nichts mehr. Den HTML-Code für den Timer möchten Sie vielleicht noch ein wenig anpassen.

<p>Aufzeichungs-Zeit: <span id="remain">(bitte Aufzeichung starten)</span></p>

Dass das remain jetzt sachlich nicht mehr ganz korrekt ist, ist klar. Aber das können Sie je nach ästhetischem Anspruch ja noch ändern.

Comments

Perfekt, es klappt! Vielen vielen Dank für die schnelle und ausführliche Hilfe

Answer 2

Vielen Dank für die schnelle Antwort.

Wir möchten von der Versuchsperson eine Audioaufnahme (60 Sekunden freies Assoziieren) und während dessen soll die Versuchsperson sehen können wie lange sie schon redet bzw. noch reden soll, damit sie die 60 Sekunden auch ungefähr einhält.

Daher wäre eine Zeitanzeige ab START-Klick eigentlich ausreichend. Ein sichtbarer Countdown, der die STOP-Taste des Recorders und die WEITER-Taste der Seite übernimmt, wäre evtl. etwas benutzerfreundlicher, aber nicht notwendig.

Sie können auch einfach die aktuelle Uhrzeit anzeigen

Die aktuelle Uhrzeit würde den Zweck auch erfüllen, wäre aber für die Versuchsperson etwas umständlich im Vergleich zu einem Sekundenanzeiger, der ab START-Klick zählt.