chamilo-lms2/plugin/whispeakauth/view/record_audio.html.twig

<div id="record-audio-recordrtc" class="row">
    <div class="col-sm-6">
        {% block intro %}
            <p class="text-center">{{ 'RepeatThisPhrase'|get_plugin_lang('WhispeakAuthPlugin') }}</p>
            <div class="well well-sm">
                <div class="row">
                    <div class="col-sm-3 text-center">
                        <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
                        <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
                    </div>
                    <div class="col-sm-9 text-center">
                        <p class="lead">{{ sample_text }}</p>
                    </div>
                </div>
            </div>
        {% endblock %}

        <ul class="list-inline text-center">
            <li>
                <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>
            </li>
            <li class="hidden">
                <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>
            </li>
            <li class="hidden">
                <button class="btn btn-success" type="button" id="btn-save-record"
                        data-loadingtext="{{ 'Uploading'|get_lang }}" disabled>
                    <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
                </button>
            </li>
        </ul>
        <p class="hidden" id="audio-wrapper">
            <audio class="center-block" controls id="record-preview"></audio>
        </p>
    </div>
    <div class="col-sm-5 col-sm-offset-1" id="messages-deck">
        {% if is_authenticated %}
            <div class="alert alert-info">
                <span class="fa fa-info-circle" aria-hidden="true"></span>
                <strong>{{ 'SpeechAuthAlreadyEnrolled'|get_plugin_lang('WhispeakAuthPlugin') }}</strong>
            </div>
        {% endif %}
    </div>
</div>

<script>
    $(function () {
        {% block config_data %}
            RecordAudio.init(
                {
                    blockId: '#record-audio-recordrtc',
                    btnStartId: '#btn-start-record',
                    btnStopId: '#btn-stop-record',
                    btnSaveId: '#btn-save-record',
                    plyrPreviewId: '#record-preview',
                    data: {
                        action: 'enrollment'
                    }
                }
            );
        {% endblock %}
    });
</script>