Ask a Question

Automatischer Start von Tonaufnahme

0 votes
in SoSci Survey (dt.) by s098891 (355 points)
edited by SoSci Survey

Ich verwende einen HTML-Code, damit der START Knopf automatisch gedrückt wird und die Aufnahme beginnt. Das geschieht nach 1000ms. Was gebe ich ein, damit die Aufnahme sofort beginnt? Mit 0 funktioniert es anscheinend nicht. Das ist mein Code:

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

window.addEventListener("load", startRecording)
window.addEventListener("load", function() {
  window.setTimeout(startRecording, 1000);
});

// -->
</script>

2 Answers

0 votes
by SoSci Survey (304k points)
edited by SoSci Survey

Mit 0 funktioniert es anscheinend nicht.

Sie rufen den Start ja bereits doppelt auf:

window.addEventListener("load", startRecording)
window.addEventListener("load", function() {
  window.setTimeout(startRecording, 1000);
});

Damit wird die Funktion startRecording() einmal direkt nach dem Laden und dann nochmal nach 1 Sek. aufgerufen. Beides sollte funktionieren - vorbehaltlich der Zustimmung des Teilnehmers im Browser, dass die Website auf das Mikrofon zugreifen darf.

Wenn Sie den Timer von 1000 auf 0 setzen, wird der Start direkt zweimal aufgerufen. Wenn das nicht funktioniert, müssten Sie bitte einmal in der JavaScript-Fehlerkonsole des Browsers nachsehen, was dort als Fehler angezeigt wird.

Beachten Sie bitte, dass die Aufnahme nach dem Laden der Seite erst einmal initialisiert werden muss. Dafür steht folgendes im Code:

SoSciTools.attachEvent(window, "load", init);

[Ergänzung] Die nachfolgende Information ist falsch - siehe andere Antwort

Ändern Sie das testweise einmal wie folgt und entfernen Sie die anderen beiden (o.g.) Aufrufe.

SoSciTools.attachEvent(window, "load", function() {
  init();
  startRecording();
});
by s098891 (355 points)
Hmm, jetzt wird START gar nicht mehr automatisch aktiviert. So sieht der neue Code aus:

<!-- 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", function() {
  init();
  startRecording();
});
SoSciTools.attachEvent(buttonStart, "click", startRecording);
SoSciTools.attachEvent(buttonStop, "click", stopRecording);

// -->
</script>
by SoSci Survey (304k points)
Was sagt denn die JavaScript-Fehlerkonsole dazu?
by s098891 (355 points)
gumadapter.js:31 spec:   {"video":false,"audio":true}
gumadapter.js:31 chrome: {"video":false,"audio":true}
by SoSci Survey (304k points)
Und was steht dort, wenn Sie den autmatischen Start entfernen und manuell auf den Start-Knopf klicken?
by s098891 (355 points)
Wenn ich "SoSciTools.attachEvent(window, "load", function() {
  init();
  startRecording();
});" entferne, kann ich nicht auf Start klicken, und die Fehlerkonsole sagt gar nichts. Der ganze Code schaut so aus (wahrscheinlich fehlt was?):

<!-- 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(buttonStart, "click", startRecording);
SoSciTools.attachEvent(buttonStop, "click", stopRecording);

// -->
</script>
by SoSci Survey (304k points)
Das init() muss bleiben, bitte entfernen Sie nur das startRecording().
by s098891 (355 points)
spec:   {"video":false,"audio":true}
gumadapter.js:31 chrome: {"video":false,"audio":true}
RecordRTC.min.js:15 started recording audio stream.
RecordRTC.min.js:15 Using recorderType: MediaStreamRecorder
RecordRTC.min.js:15 Passing following config over MediaRecorder API. {mimeType: "audio/ogg", audioBitsPerSecond: 128000, type: "audio", checkForInactiveTracks: false, initCallback: ƒ}
RecordRTC.min.js:15 MediaRecorder API seems unable to record mimeType: audio/ogg
MediaStreamRecorder.record @ RecordRTC.min.js:15
initRecorder @ RecordRTC.min.js:15
startRecording @ RecordRTC.min.js:15
startRecording @ index.php?i=FD8KTUIOZZAJ&rnd=JDER:100
RecordRTC.min.js:15 Recorder state changed: recording
RecordRTC.min.js:15 Initialized recorderType: MediaStreamRecorder for output-type: audio
RecordRTC.min.js:15 Stopped recording audio stream.
RecordRTC.min.js:15 Recorder state changed: stopped
RecordRTC.min.js:15 audio/webm -> 17.6 KB
0 votes
by SoSci Survey (304k points)

So, nach eingehender Analyse des Ablaufs habe ich nun eine funktionieren Lösung :)

Die Initialisierung init() fragt beim Browser zunächst an, ob das Mikrofon verwendet werden darf. Wenn ja, dann wird die Funktion onStream() aufgerufen.

Ergänzen Sie in dieser Funktion bitte am Ende das startRecording():

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";
    // Start recording
    startRecording();
}

Dadurch startet die Aufnahme direkt nach öffnen der Seite und Bestätigung (sofern notwendig) des Nutzers, dass die Website auf das Mikrofon zugreifen darf.

by s098891 (355 points)
Ich hänge es also an den zuletzt von mir geposteten Code an, richtig? Super, das scheint zu funktionieren! Danke!!!
by SoSci Survey (304k points)
Also meine Empfehlung wäre, dass Sie nochmal eine neue Frage "Audio-Recorder" anlegen, den Original-Code von dort kopieren und dann nur die eine Zeile ergänzen. Nur für den Fall, dass sich über die ganzen Versuche hinweg noch ungewünschte Änderungen eingeschlichen haben.
by s098891 (355 points)
edited by s098891
Habe gedacht es funktioniert, aber jetzt wird die Aufnahme kurz gestartet, gestoppt, und wieder gestartet:

https://www.soscisurvey.de/speaking123/?act=JZSfRxHTSSp9ewqPlpxASYL9

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

window.addEventListener("load", startRecording)
window.addEventListener("load", function() {
  window.setTimeout(startRecording, 1000);
});

// -->
</script>
by SoSci Survey (304k points)
Wie schon geschrieben: Ihr Code enthält von den vielen Versuchen m.E. nun überflüssige Inhalte. Auf den ersten Blick würde ich empfehlen, das hier am Ende zu entfernen:

window.addEventListener("load", startRecording)
window.addEventListener("load", function() {
  window.setTimeout(startRecording, 1000);
});

Alternativ wie schon geschrieben: Neue Frage aus der Vorlage "Audio-Recoder" anlegen und die paar Modifikationen einfügen.
by s098891 (355 points)
Sorry, hatte es eh so gemacht, nur noch nicht in allen Sprachversionen und deshalb gab's eine Verwirrung. VIELEN DANK!!!

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen

Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

Categories

Snow Theme by Q2A Market
Powered by Question2Answer
...