SoSci-Survey Audiorecorder

---

The build-in question prototype for audio-recordings is a bit thin. Therefore, I have generated a better one.

Code

Anweisungen

<div style="font-size: 16px;color: #ffff;">
<p>Aufnahme-Test</p>
</div>

<div style="font-size: 16px;color: #000000;">
<p>Hier können Sie die Audio-Aufnahme testen </p>
</div>

Zusätzlicher HTML-Code

<br>
Bitte drücken Sie auf START, um die Aufnahme zu starten.
Drücken Sie auf STOP sobald Sie fertig sind.<br>
Danach erscheint ein Audioplayer, in dem Sie Ihre Aufnahmen anhören können. Wenn Sie damit zufrieden sind, können Sie auf <b>Weiter</b> klicken. Wichtig ist, dass die Aufnahme nicht zu leise ist, aber auch nicht übersteuert.
<!-- <![endif]-->

<!--[if IE]>
Der Internet Explorer unterstützt diese Aufzeichnung leider nicht.
<![endif]-->

<!-- 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]-->

<!-- **Audio Input Selection** -->
<div style="margin: 1em 0">
  <label for="audioInputSelect">Wählen Sie Ihr Aufnahmegerät:</label>
  <select id="audioInputSelect"></select>
</div>

<!-- Buttons -->
<div style="margin: 2em 0 0.5em">
  <button id="btnStart" type="button" tabindex="50" style="background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-right: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: background-color 0.3s;">
    START
  </button>
  <button id="btnStop" type="button" tabindex="50" style="background-color: #f44336; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: background-color 0.3s;">
    STOP
  </button>
</div>

<style>
  #btnStart:hover {
    background-color: #45a049;
  }

  #btnStop:hover {
    background-color: #e53935;
  }
</style>

<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 player -->
<div style="margin: 2em 0" id="audioPlayerContainer"></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 = [];
var mediaStatus = 0;

function startRecording(button) {
  if (mediaRecorder) {
    mediaRecorder.start();
    buttonStart.disabled = true;
    buttonStop.disabled = false;

    // Ändere die Farbe und den Text des Buttons
    buttonStart.style.backgroundColor = "#f0ad4e"; // Gelblich, Aufnahme läuft
    buttonStart.style.color = "black";
    buttonStart.textContent = "Aufnahme...";

    mediaStatus = 1;
  }
}

function stopRecording(button) {
  if (mediaRecorder) {
    mediaRecorder.stop();
    buttonStart.disabled = false;
    buttonStop.disabled = true;

    // Setze die Farbe und den Text des Buttons zurück
    buttonStart.style.backgroundColor = "#4CAF50"; // Grün, bereit für die nächste Aufnahme
    buttonStart.style.color = "white";
    buttonStart.textContent = "START";
  }
  mediaStatus = 2;
}

function onStop(audioURL) {
    var recordedBlob = new Blob(mediaChunks, { 'type' : 'audio/mpeg' });
    // Transfer the data
    %q.id%.sendBLOB(recordedBlob);
    mediaStatus = 3;

    // Create audio URL
    var audioURL = URL.createObjectURL(recordedBlob);

    // Create audio player
    var audioPlayerContainer = document.getElementById("audioPlayerContainer");
    audioPlayerContainer.innerHTML = ''; // Clear previous player if any
    var audioPlayer = document.createElement("audio");
    audioPlayer.controls = true;
    audioPlayer.src = audioURL;
    audioPlayerContainer.appendChild(audioPlayer);
}

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 checkSubmit() {
    // Aufzeichnung noch aktiv?
    if ((mediaStatus == 1) || (mediaStatus == 2)) {
        stopRecording();
        window.setTimeout(SoSciTools.submitPage, 1000);
        return false;
    }
    return true;
}

// **Function to populate audio input devices**
function populateAudioInputDevices() {
    navigator.mediaDevices.enumerateDevices().then(function(devices) {
        devices.forEach(function(device) {
            if (device.kind === 'audioinput') {
                var option = document.createElement("option");
                option.value = device.deviceId;
                option.text = device.label || 'Microphone ' + (audioInputSelect.length + 1);
                audioInputSelect.appendChild(option);
            }
        });
    });
}

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

    var mediaConstraints = {
        video: false,
        audio: {
            deviceId: audioInputSelect.value ? { exact: audioInputSelect.value } : undefined
        }
    };

    function onError(error) {
        document.getElementById("%q.id%NoAudio").style.display = "";
    }

   if (navigator.mediaDevices) {
        populateAudioInputDevices();
        audioInputSelect.onchange = function() {
            navigator.mediaDevices.getUserMedia(mediaConstraints).then(onStream).catch(onError);
        };
        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);
s2.attachCheck(checkSubmit);

// -->
</script>