chamilo-lms2/main/template/rainbow/exercise/oral_expression.tpl

<div id="record-audio-recordrtc-{{ question_id }}" class="row text-center">
    <div class="col-sm-4 col-sm-offset-4">
        <div class="form-group">
            <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
            <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <button class="btn btn-primary" type="button" id="btn-start-record-{{ question_id }}">
                <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
            </button>
            <button class="btn btn-primary hidden" type="button" id="btn-pause-record-{{ question_id }}" disabled>
                <span class="fa fa-pause fa-fw" aria-hidden="true"></span> {{ 'PauseRecordingAudio'|get_lang }}
            </button>
            <button class="btn btn-primary hidden" type="button" id="btn-play-record-{{ question_id }}" disabled>
                <span class="fa fa-play fa-fw" aria-hidden="true"></span> {{ 'PlayRecordingAudio'|get_lang }}
            </button>
            <button class="btn btn-danger hidden" type="button" id="btn-stop-record-{{ question_id }}" disabled>
                <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
            </button>
            <button class="btn btn-success hidden" type="button" id="btn-save-record-{{ question_id }}" disabled>
                <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
            </button>
        </div>
        <div class="form-group">
            <audio class="skip hidden center-block" controls id="record-preview-{{ question_id }}"></audio>
        </div>
    </div>
</div>

<div class="row" id="record-audio-wami-{{ question_id }}">
    <div class="col-sm-4 col-sm-offset-4 text-center">
        <div id="record-audio-wami-container-{{ question_id }}" class="wami-container"></div>
    </div>
</div>

<script>
    $(document).on('ready', function () {
        function useRecordRTC() {
            $('#record-audio-recordrtc-{{ question_id }}').show();
            var mediaConstraints = {audio: true},
                recordRTC = null,
                btnStart = $('#btn-start-record-{{ question_id }}'),
                btnPause = $('#btn-pause-record-{{ question_id }}'),
                btnPlay = $('#btn-play-record-{{ question_id }}'),
                btnStop = $('#btn-stop-record-{{ question_id }}'),
                btnSave = $('#btn-save-record-{{ question_id }}'),
                tagAudio = $('#record-preview-{{ question_id }}');

            btnStart.on('click', function () {
                navigator.getUserMedia = navigator.getUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.webkitGetUserMedia;

                if (navigator.getUserMedia) {
                    navigator.getUserMedia(mediaConstraints, successCallback, errorCallback);
                } else if (navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia(mediaConstraints)
                        .then(successCallback).error(errorCallback);
                }

                function successCallback(stream) {
                    recordRTC = RecordRTC(stream, {
                        numberOfAudioChannels: 1,
                        type: 'audio'
                    });
                    recordRTC.startRecording();

                    btnSave.prop('disabled', true).addClass('hidden');
                    btnStop.prop('disabled', false).removeClass('hidden');
                    btnStart.prop('disabled', true).addClass('hidden');
                    btnPause.prop('disabled', false).removeClass('hidden');
                    tagAudio.removeClass('show').addClass('hidden');
                }

                function errorCallback(error) {
                    alert(error.message);
                }
            });

            btnPause.on('click', function () {
                if (!recordRTC) {
                    return;
                }

                btnPause.prop('disabled', true).addClass('hidden');
                btnPlay.prop('disabled', false).removeClass('hidden');
                btnStop.prop('disabled', true).addClass('hidden');
                recordRTC.pauseRecording();
            });

            btnPlay.on('click', function () {
                if (!recordRTC) {
                    return;
                }

                btnPlay.prop('disabled', true).addClass('hidden');
                btnPause.prop('disabled', false).removeClass('hidden');
                btnStop.prop('disabled', false).removeClass('hidden');
                recordRTC.resumeRecording();
            });

            btnStop.on('click', function () {
                if (!recordRTC) {
                    return;
                }

                recordRTC.stopRecording(function (audioURL) {
                    btnStart.prop('disabled', false).removeClass('hidden');
                    btnPause.prop('disabled', true).addClass('hidden');
                    btnStop.prop('disabled', true).addClass('hidden');
                    btnSave.prop('disabled', false).removeClass('hidden');

                    tagAudio
                        .removeClass('hidden')
                        .addClass('show')
                        .prop('src', audioURL);
                });
            });

            // Download button
            btnSave.on('click', function () {
                if (!recordRTC) {
                    return;
                }

                var recordedBlob = recordRTC.getBlob();
                if (!recordedBlob) {
                    return;
                }

                var fileName = '{{ file_name }}',
                    fileExtension = '.' + recordedBlob.type.split('/')[1];

                var formData = new FormData();
                formData.append('audio_blob', recordedBlob, fileName + fileExtension);
                formData.append('audio_dir', '{{ directory }}');

                $.ajax({
                    url: '{{ _p.web_ajax }}record_audio_rtc.ajax.php',
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST'
                }).then(function () {
                    btnSave.prop('disabled', true).addClass('hidden');
                    btnStop.prop('disabled', true).addClass('hidden');
                    btnStart.prop('disabled', false).removeClass('hidden');
                });
            });
        }

        function useWami() {
            $('#record-audio-wami-{{ question_id }}').show();

            Wami.setup({
                id: "record-audio-wami-container-{{ question_id }}",
                onReady: setupGUI,
                swfUrl: '{{ _p.web_lib }}wami-recorder/Wami.swf'
            });

            function setupGUI() {
                var gui = new Wami.GUI({
                        id: 'record-audio-wami-container-{{ question_id }}',
                        singleButton: true,
                        recordUrl: '{{ _p.web_ajax }}record_audio_wami.ajax.php?' + $.param({
                            waminame: '{{ file_name }}.wav',
                            wamidir: '{{ directory }}',
                            wamiuserid: {{ user_id }}
                        }),
                        buttonUrl: '{{ _p.web_lib }}wami-recorder/buttons.png',
                        buttonNoUrl: '{{ _p.web_img }}blank.gif'
                    }
                );

                gui.setPlayEnabled(false);
            }
        }

        $('#record-audio-recordrtc-{{ question_id }}, #record-audio-wami-{{ question_id }}').hide();

        var webRTCIsEnabled = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia ||
            navigator.mediaDevices.getUserMedia;

        if (webRTCIsEnabled) {
            useRecordRTC();

            return;
        }

        useWami();
    });
</script>