Ich habe zur Beantwortung der Frage eine Freitextoption und eine Audiooption. Ich habe den Code verwendet, der auch mit Apple-Geräten funktioniert für die Audiooption. Nun kommt der Weiter-Button aber erst, wenn eine Audio-Datei hochgeladen wurde. Ich hätte ihn aber auch gern, wenn ein Text eingegeben wurde. Wie bekomme ich das hin?
Mein Code von der Audio-Option ist:
<!-- Warning -->
<div id="%q.id%NoAudio" class="warning">
<div class="content">
Ihr Gerät und/oder Browser unterstützen derzeit keine Tonaufnahme.
</div>
</div>
<!--[if IE]>
Der Internet Explorer unterstützt diese Aufzeichnung leider nicht.
<![endif]-->
<!-- 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/ai/audio-recorder-polyfill -->
<script src="../plugins/audio-recorder-polyfill/AudioRecorder.min.js"></script>
<script type="text/javascript">
<!--
"use strict";
var buttonStart = document.getElementById("btnStart");
var buttonStop = document.getElementById("btnStop");
var mediaRecorder;
var mediaChunks = [];
function startRecording(button) {
if (mediaRecorder) {
mediaRecorder.start();
buttonStart.disabled = true;
buttonStop.disabled = false;
}
}
function stopRecording(button) {
if (mediaRecorder) {
mediaRecorder.stop();
// You may want to change this to allow a new try (replacing the old one)
buttonStart.disabled = false;
buttonStop.disabled = true;
SoSciTools.submitButtonsDisplay()
}
}
function onStop(audioURL) {
var recordedBlob = new Blob(mediaChunks, { 'type' : 'audio/mpeg' });
// Transfer the data
%q.id%.sendBLOB(recordedBlob);
}
function onStream(stream) {
mediaRecorder = new AudioRecorder(stream);
mediaRecorder.addEventListener("stop", onStop);
mediaRecorder.addEventListener("dataavailable", function(e) {
mediaChunks.push(e.data);
});
// 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) {
document.getElementById("%q.id%NoAudio").style.display = "";
}
if (navigator.mediaDevices) {
navigator.mediaDevices.getUserMedia(mediaConstraints).then(onStream).catch(onError);
document.getElementById("%q.id%NoAudio").style.display = "none";
} else {
onError();
}
};
SoSciTools.attachEvent(window, "load", init);
SoSciTools.attachEvent(buttonStart, "click", startRecording);
SoSciTools.attachEvent(buttonStop, "click", stopRecording);
SoSciTools.submitButtonsHide()
// -->
</script>