Audio Recorder automatisch starten

Question

Ist es möglich, dass eine Tonaufnahme automatisch gestartet wird, sobald man auf die jeweilige Seite kommt, und ohne, dass Teilnehmer auf START/STOP klicken müssen?

Das ist der HTML Code, den ich verwende:

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

// -->
</script>

Answer 1

Damit man überhaupt an den Ton kommt, muss der Teilnehmer im Browser ja erstmal die Erlaubnis erteilen. Diesen Schritt darf man im Ablauf nicht vergessen.

Aber im Prinzip ist es kein Problem, gleich den "Start" Knopf zu drücken. Dafür würden Sie am Ende des Codes noch ergänzen:

window.addEventListener("load", startRecording);

Comments

Hab ich jetzt zusätzlich eingefügt, aber leider beginnt die Aufnahme nicht automatisch, oder zumindest sieht es so aus:
https://www.soscisurvey.de/speaking/index.php?l=deu&q=base&act=WjW1h4Ymbt6fwMz2aiCjdduP&htR=AwA%3D

---

Es geht darum, dass TeilnehmerInnen nur eine gewisse Zeit haben sollen, um einen Satz wiederzugeben, und da jeder Teilnehmer unterschiedlich viel Zeit benötigt, auf Start zu klicken, um die Tonaufnahme zu starten, hat nicht jeder gleich viel Zeit für die Reproduktion des Satzes. Wäre es alternativ möglich, den Countdown erst nach Klicken von Start einzusetzen? Aber das wäre wohl noch komplizierter...

---

Ich hatte einen Rechtschreibfehler im Code, es ist nicht setTimout(), sondern natürlich setTimeout().

---

Juhu, es funktioniert, vielen Dank!

---

Testen Sie bitte auf jeden Fall, ob es auch funktioniert, wenn der Teilnehmer die Berechtigung zum Aufnehmen nicht dauerhaft für die Seite setzt. Das kann im Interview ja durchaus passieren.