oral_expression.tpl 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <div id="record-audio-recordrtc-{{ question_id }}" class="row text-center">
  2. <div class="col-sm-4 col-sm-offset-4">
  3. <div class="form-group">
  4. <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
  5. <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
  6. </div>
  7. </div>
  8. <div class="col-sm-12">
  9. <div class="form-group">
  10. <button class="btn btn-primary" type="button" id="btn-start-record-{{ question_id }}">
  11. <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
  12. </button>
  13. <button class="btn btn-primary hidden" type="button" id="btn-pause-record-{{ question_id }}" disabled>
  14. <span class="fa fa-pause fa-fw" aria-hidden="true"></span> {{ 'PauseRecordingAudio'|get_lang }}
  15. </button>
  16. <button class="btn btn-primary hidden" type="button" id="btn-play-record-{{ question_id }}" disabled>
  17. <span class="fa fa-play fa-fw" aria-hidden="true"></span> {{ 'PlayRecordingAudio'|get_lang }}
  18. </button>
  19. <button class="btn btn-danger hidden" type="button" id="btn-stop-record-{{ question_id }}" disabled>
  20. <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
  21. </button>
  22. <button class="btn btn-success hidden" type="button" id="btn-save-record-{{ question_id }}" disabled>
  23. <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
  24. </button>
  25. </div>
  26. <div class="form-group">
  27. <audio class="skip hidden center-block" controls id="record-preview-{{ question_id }}"></audio>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="row" id="record-audio-wami-{{ question_id }}">
  32. <div class="col-sm-4 col-sm-offset-4 text-center">
  33. <div id="record-audio-wami-container-{{ question_id }}" class="wami-container"></div>
  34. </div>
  35. </div>
  36. <script>
  37. $(document).on('ready', function () {
  38. function useRecordRTC() {
  39. $('#record-audio-recordrtc-{{ question_id }}').show();
  40. var mediaConstraints = {audio: true},
  41. recordRTC = null,
  42. btnStart = $('#btn-start-record-{{ question_id }}'),
  43. btnPause = $('#btn-pause-record-{{ question_id }}'),
  44. btnPlay = $('#btn-play-record-{{ question_id }}'),
  45. btnStop = $('#btn-stop-record-{{ question_id }}'),
  46. btnSave = $('#btn-save-record-{{ question_id }}'),
  47. tagAudio = $('#record-preview-{{ question_id }}');
  48. btnStart.on('click', function () {
  49. navigator.getUserMedia = navigator.getUserMedia ||
  50. navigator.mozGetUserMedia ||
  51. navigator.webkitGetUserMedia;
  52. if (navigator.getUserMedia) {
  53. navigator.getUserMedia(mediaConstraints, successCallback, errorCallback);
  54. } else if (navigator.mediaDevices.getUserMedia) {
  55. navigator.mediaDevices.getUserMedia(mediaConstraints)
  56. .then(successCallback).error(errorCallback);
  57. }
  58. function successCallback(stream) {
  59. recordRTC = RecordRTC(stream, {
  60. numberOfAudioChannels: 1,
  61. type: 'audio'
  62. });
  63. recordRTC.startRecording();
  64. btnSave.prop('disabled', true).addClass('hidden');
  65. btnStop.prop('disabled', false).removeClass('hidden');
  66. btnStart.prop('disabled', true).addClass('hidden');
  67. btnPause.prop('disabled', false).removeClass('hidden');
  68. tagAudio.removeClass('show').addClass('hidden');
  69. }
  70. function errorCallback(error) {
  71. alert(error.message);
  72. }
  73. });
  74. btnPause.on('click', function () {
  75. if (!recordRTC) {
  76. return;
  77. }
  78. btnPause.prop('disabled', true).addClass('hidden');
  79. btnPlay.prop('disabled', false).removeClass('hidden');
  80. btnStop.prop('disabled', true).addClass('hidden');
  81. recordRTC.pauseRecording();
  82. });
  83. btnPlay.on('click', function () {
  84. if (!recordRTC) {
  85. return;
  86. }
  87. btnPlay.prop('disabled', true).addClass('hidden');
  88. btnPause.prop('disabled', false).removeClass('hidden');
  89. btnStop.prop('disabled', false).removeClass('hidden');
  90. recordRTC.resumeRecording();
  91. });
  92. btnStop.on('click', function () {
  93. if (!recordRTC) {
  94. return;
  95. }
  96. recordRTC.stopRecording(function (audioURL) {
  97. btnStart.prop('disabled', false).removeClass('hidden');
  98. btnPause.prop('disabled', true).addClass('hidden');
  99. btnStop.prop('disabled', true).addClass('hidden');
  100. btnSave.prop('disabled', false).removeClass('hidden');
  101. tagAudio
  102. .removeClass('hidden')
  103. .addClass('show')
  104. .prop('src', audioURL);
  105. });
  106. });
  107. // Download button
  108. btnSave.on('click', function () {
  109. if (!recordRTC) {
  110. return;
  111. }
  112. var recordedBlob = recordRTC.getBlob();
  113. if (!recordedBlob) {
  114. return;
  115. }
  116. var fileName = '{{ file_name }}',
  117. fileExtension = '.' + recordedBlob.type.split('/')[1];
  118. var formData = new FormData();
  119. formData.append('audio_blob', recordedBlob, fileName + fileExtension);
  120. formData.append('audio_dir', '{{ directory }}');
  121. $.ajax({
  122. url: '{{ _p.web_ajax }}record_audio_rtc.ajax.php',
  123. data: formData,
  124. processData: false,
  125. contentType: false,
  126. type: 'POST'
  127. }).then(function () {
  128. btnSave.prop('disabled', true).addClass('hidden');
  129. btnStop.prop('disabled', true).addClass('hidden');
  130. btnStart.prop('disabled', false).removeClass('hidden');
  131. });
  132. });
  133. }
  134. function useWami() {
  135. $('#record-audio-wami-{{ question_id }}').show();
  136. Wami.setup({
  137. id: "record-audio-wami-container-{{ question_id }}",
  138. onReady: setupGUI,
  139. swfUrl: '{{ _p.web_lib }}wami-recorder/Wami.swf'
  140. });
  141. function setupGUI() {
  142. var gui = new Wami.GUI({
  143. id: 'record-audio-wami-container-{{ question_id }}',
  144. singleButton: true,
  145. recordUrl: '{{ _p.web_ajax }}record_audio_wami.ajax.php?' + $.param({
  146. waminame: '{{ file_name }}.wav',
  147. wamidir: '{{ directory }}',
  148. wamiuserid: {{ user_id }}
  149. }),
  150. buttonUrl: '{{ _p.web_lib }}wami-recorder/buttons.png',
  151. buttonNoUrl: '{{ _p.web_img }}blank.gif'
  152. }
  153. );
  154. gui.setPlayEnabled(false);
  155. }
  156. }
  157. $('#record-audio-recordrtc-{{ question_id }}, #record-audio-wami-{{ question_id }}').hide();
  158. var webRTCIsEnabled = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia ||
  159. navigator.mediaDevices.getUserMedia;
  160. if (webRTCIsEnabled) {
  161. useRecordRTC();
  162. return;
  163. }
  164. useWami();
  165. });
  166. </script>