Hallo liebes Sosci Survey Team,
für meine Erhebung möchte ich einen Audio Recorder implementieren. Die Probanden sollen 3 Minuten in den Recorder sprechen. Dafür habe ich versucht einen Timer auf der Seite einzufügen der bei Klicken des Start-Buttons zeitgleich mit der Audioaufnahme startet. Ich habe mir zwei Timer aus stackoverflow heruntergeladen. Der Timer startet jedoch nicht bei Klick des Buttons, sondern läuft einfach los, aber endet bei 0:00. Ich habe versucht den Button des Recorders im Timer Skript einzufügen - erfolglos.
Der Timer soll bei Klick des Start-Buttons ("btnStart") starten und sich bei 0:00 wiederholen. Ich habe meinen Versuch nochmal rausgenommen, damit er keinen Schaden anrichtet. Finden Sie den Fehler bzw haben Sie eine Lösung parat? Vielen Dank im Voraus!
Mich wundert es, dass es auf der unten genannten Seite funktioniert aber auf meiner Sosci Survey Seite nicht.
Link zur Umfrage: https://www.soscisurvey.de/tutorial307460/
Timer: https://jsfiddle.net/robbmj/Lzyxnaoq/2/
Code des Recorders (Standard Recorder von Soscisurvey)
<!-- 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>
Code des Timers
<div>Registration closes in <span id="time"></span> minutes!</div>
window.onload = function () {
var display = document.querySelector('#time'),
timer = new CountDownTimer(3),
timeObj = CountDownTimer.parse(3);
format(timeObj.minutes, timeObj.seconds);
timer.onTick(format);
document.querySelector('button').addEventListener('click', function () {
timer.start();
});
function format(minutes, seconds) {
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ':' + seconds;
}
};