chamilo-lms2/main/template/default/document/record_audio.tpl

<div class="alert alert-warning">
    <span class="fa fa-warning fa-fw" aria-hidden="true"></span> {{ 'WamiNeedFilename'|get_lang }}
</div>

<div id="record-audio-recordrtc" class="row text-center">
    <form>
        <div class="row">
            <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 class="form-group">
                    <input type="text" name="audio_title" id="audio-title-rtc" class="form-control" placeholder="{{ 'InputNameHere'|get_lang }}">
                </div>
            </div>
        </div>
        <div class="text-center">
            <div class="form-group">
                <button class="btn btn-primary" type="button" id="btn-start-record">
                    <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
                </button>
                <button class="btn btn-danger" type="button" id="btn-stop-record" disabled>
                    <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
                </button>
                <button class="btn btn-success" type="button" id="btn-save-record" 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"></audio>
            </div>
        </div>
    </form>
</div>

<div class="row" id="record-audio-wami">
    <div class="col-sm-3 col-sm-offset-3">
        <br>
        <form>
            <div class="form-group">
                <input type="text" name="audio_title" id="audio-title-wami" class="form-control" placeholder="{{ 'InputNameHere'|get_lang }}">
            </div>
            <div class="form-group text-center">
                <button class="btn btn-primary" type="button" id="btn-activate-wami">
                    <span class="fa fa-check fa-fw" aria-hidden=""></span> {{ 'Activate'|get_lang }}
                </button>
            </div>
        </form>
    </div>
    <div class="col-sm-3">
        <div id="record-audio-wami-container" class="wami-container"></div>
    </div>
</div>

<script>
    $(document).on('ready', function() {
        function useRecordRTC() {
            $('#record-audio-recordrtc').show();

            var audioTitle = '';

            var mediaConstraints = {audio: true},
                recordRTC = null,
                btnStart = $('#btn-start-record'),
                btnStop = $('#btn-stop-record'),
                btnSave = $('#btn-save-record'),
                tagAudio = $('#record-preview');

            btnStart.on('click', function () {
                audioTitle = $('#audio-title-rtc').val();

                if (!$.trim(audioTitle)) {
                    return;
                }

                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();

                    $('#audio-title-rtc').prop('readonly', true);
                    btnSave.prop('disabled', true);
                    btnStop.prop('disabled', false);
                    btnStart.prop('disabled', true);
                    tagAudio.removeClass('show').addClass('hidden');
                }

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

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

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

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

                var recordedBlob = recordRTC.getBlob();

                if (!recordedBlob) {
                    return;
                }

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

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

                $.ajax({
                    url: '{{ _p.web_ajax }}record_audio_rtc.ajax.php',
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function (fileURL) {
                        if (!fileURL) {
                            return;
                        }

                        $('#audio-title-rtc').prop('readonly', false);
                        btnSave.prop('disabled', true);
                        btnStop.prop('disabled', true);
                        btnStart.prop('disabled', false);

                        window.location.reload();
                    }
                });
            });
        }

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

            var audioTitle = '';

            $('#btn-activate-wami').on('click', function (e) {
                e.preventDefault();

                audioTitle = $('#audio-title-wami').val();

                if (!$.trim(audioTitle)) {
                    return;
                }

                $('#audio-title-wami').prop('readonly', true);
                $(this).prop('disabled', true);

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

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

                gui.setPlayEnabled(false);
            }
        }

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

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

        if (webRTCIsEnabled) {
            useRecordRTC();

            return;
        }

        useWami();
    });
</script>