Audioaufnahme und Videos einbinden

Question

Hallo,
ich habe eine Umfrage erstellt, in die auch Audioaufnahmen integriert sind. Im Pretest haben einige Teilnehmende angemerkt, dass ihnen unklar war, ob der Ton tatsächlich aufgezeichnet wurde, nachdem sie auf „Start” geklickt hatten. Es hätte ihnen geholfen, die Tonspur abspielen zu können, um zu überprüfen, ob alles gut aufgenommen wurde.
Ist das umsetzbar?

Weiterhin habe ich das Problem, dass ich Videos in der Studie integriere. Diese habe ich auf einem Server der Uni hochgeladen und denk Link dann eingefügt. Leider haken die Video beim abspielen. Haben Sie noch einen Tipp, das ich noch tun könnte?

Danke und liebe Grüße

Comments

Was die Aufzeichnung angeht ... wie haben Sie diese denn umgesetzt?

Und was die eingebundenen Videos angeht: Wie genau äußert sich "hakt beim Abspielen"? Möchten sie eine der Video-URLs vielleicht mal hier posten?

---

Zu den Aufzeichnungen: ich habe unter "Daten übertragen" den Audio-Recorder in die Umfrage eingefügt. Hier der Code:
<!-- 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 = [];
var mediaStatus = 0;

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

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;
  }
  mediaStatus = 2;
}

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

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 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);
s2.attachCheck(checkSubmit);

// -->
</script>


zu 2. Hier die Video-URLs: es gibt fünf Kategorien, in denen randomisiert (per Zufallsgenerator) Videos abgespielt werden sollen, auf denen die Teilnehmenden per Audioaufnahme reagieren sollen. Hier mal die Video-URLs auf einer Kategorie:
1 = https://hessenbox.uni-marburg.de/dl/fiHU9bn9UHYwZJo8Di7khd/27_1_a.mp4
2 = https://hessenbox.uni-marburg.de/dl/fiB7yiYjGFpHCEQh5WedN7/29_1_a.mp4
3 = https://hessenbox.uni-marburg.de/dl/fiFcA1iRoDEspTKenx4Pto/30_1_c.mp4
4 = https://hessenbox.uni-marburg.de/dl/fiAxxnAqmpbKFcZ5ck7Smc/31_1_e.mp4
5 = https://hessenbox.uni-marburg.de/dl/fi4qc1ycwDFvSwaY1iCGwR/32_2_c.mp4
6 = https://hessenbox.uni-marburg.de/dl/fi9CheiDGG9GPvniBfqPNm/33_1_a.mp4
7 = https://hessenbox.uni-marburg.de/dl/fiHtvYE3M52zX1TQtMXhk2/34_1_a.mp4

Danke vorab!

---

Was die Audio-Aufnahme angeht ... ich prüfe mal, ob wir in absehbarer Zeit eine verbesserte Vorlage entwickeln können. Versprechen kann ich das allerdings nicht. Natürlich können Sie sich auch selbst an die JavaScript-Programmierung wagen.

Was die URLs angeht, sehe diese auf den ersten Blick gut aus.

Wie genau äußert sich "hakt beim Abspielen" denn genau?  Erstellen und posten Sie gerne einen Pretest-Link, der direkt zu einer Seite mit Video führt.