record_audio.html.twig 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <div id="record-audio-recordrtc" class="row">
  2. <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-0">
  3. {% block intro %}
  4. <p class="text-center">{{ 'RepeatThisPhrase'|get_plugin_lang('WhispeakAuthPlugin') }}</p>
  5. <div class="well well-sm">
  6. <div class="row">
  7. <div class="col-sm-3 text-center">
  8. <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
  9. <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
  10. </div>
  11. <div class="col-sm-9 text-center">
  12. <p class="lead">{{ sample_text }}</p>
  13. </div>
  14. </div>
  15. </div>
  16. {% endblock %}
  17. <div class="text-center">
  18. {% if action == 'enrollment' %}
  19. <p>
  20. <label>
  21. <input type="checkbox" id="chk-agree-research">
  22. {{ 'AgreeAllowResearch'|get_plugin_lang('WhispeakAuthPlugin') }}
  23. </label>
  24. </p>
  25. {% endif %}
  26. <p>
  27. <button class="btn btn-primary" type="button" id="btn-start-record">
  28. <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
  29. </button>
  30. </p>
  31. <p class="hidden">
  32. <button class="btn btn-danger" type="button" id="btn-stop-record" disabled
  33. data-loadingtext="{{ 'Uploading'|get_lang }}">
  34. <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
  35. </button>
  36. </p>
  37. </div>
  38. </div>
  39. <div class="col-sm-8 col-sm-offset-2 col-md-5 col-md-offset-1">
  40. <hr class="visible-sm">
  41. <div id="messages-deck"></div>
  42. <div class="hidden" id="audio-wrapper">
  43. <p>
  44. <audio class="center-block" controls id="record-preview"></audio>
  45. </p>
  46. </div>
  47. </div>
  48. </div>
  49. <script>
  50. $(function () {
  51. {% block config_data %}
  52. var data = {action: 'enrollment', license: 0 };
  53. {% if action == 'enrollment' %}
  54. $('#chk-agree-research').on('change', function () {
  55. data.license = $('#chk-agree-research').is(':checked') ? 1 : 0;
  56. });
  57. {% endif %}
  58. RecordAudio.init(
  59. {
  60. blockId: '#record-audio-recordrtc',
  61. btnStartId: '#btn-start-record',
  62. btnStopId: '#btn-stop-record',
  63. plyrPreviewId: '#record-preview',
  64. data: data
  65. }
  66. );
  67. {% endblock %}
  68. });
  69. </script>