oral_expression.tpl 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <div class="alert alert-warning">
  2. <span class="fa fa-warning fa-fw" aria-hidden="true"></span> {{ 'WamiNeedFilename'|get_lang }}
  3. </div>
  4. <div id="record-audio-recordrtc" class="row text-center">
  5. <form>
  6. <div class="row">
  7. <div class="col-sm-4 col-sm-offset-4">
  8. <div class="form-group">
  9. <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
  10. <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
  11. </div>
  12. </div>
  13. <div class="col-sm-12">
  14. <div class="form-groups">
  15. <button class="btn btn-primary" type="button" id="btn-start-record">
  16. <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
  17. </button>
  18. <button class="btn btn-success" type="button" id="btn-stop-record" disabled>
  19. <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
  20. </button>
  21. </div>
  22. </div>
  23. </div>
  24. </form>
  25. </div>
  26. <div class="row" id="record-audio-wami">
  27. <div class="col-sm-4 col-sm-offset-4 text-center">
  28. <div id="record-audio-wami-container" class="wami-container"></div>
  29. </div>
  30. </div>
  31. <script>
  32. $(document).on('ready', function () {
  33. function useRecordRTC() {
  34. $('#record-audio-recordrtc').show();
  35. var mediaConstraints = {audio: true},
  36. recordRTC = null,
  37. btnStart = $('#btn-start-record'),
  38. btnStop = $('#btn-stop-record');
  39. btnStart.on('click', function () {
  40. navigator.getUserMedia = navigator.getUserMedia ||
  41. navigator.mozGetUserMedia ||
  42. navigator.webkitGetUserMedia;
  43. if (navigator.getUserMedia) {
  44. navigator.getUserMedia(mediaConstraints, successCallback, errorCallback);
  45. } else if (navigator.mediaDevices.getUserMedia) {
  46. navigator.mediaDevices.getUserMedia(mediaConstraints)
  47. .then(successCallback).error(errorCallback);
  48. }
  49. function successCallback(stream) {
  50. recordRTC = RecordRTC(stream, {
  51. numberOfAudioChannels: 1,
  52. type: 'audio'
  53. });
  54. recordRTC.startRecording();
  55. btnStop.prop('disabled', false);
  56. btnStart.prop('disabled', true);
  57. }
  58. function errorCallback(error) {
  59. alert(error.message);
  60. }
  61. });
  62. btnStop.on('click', function () {
  63. if (!recordRTC) {
  64. return;
  65. }
  66. recordRTC.stopRecording(function (audioURL) {
  67. var recordedBlob = recordRTC.getBlob(),
  68. fileName = '{{ file_name }}',
  69. fileExtension = '.' + recordedBlob.type.split('/')[1];
  70. var formData = new FormData();
  71. formData.append('audio_blob', recordedBlob, fileName + fileExtension);
  72. formData.append('audio_dir', '{{ directory }}');
  73. $.ajax({
  74. url: '{{ _p.web_ajax }}record_audio_rtc.ajax.php',
  75. data: formData,
  76. processData: false,
  77. contentType: false,
  78. type: 'POST'
  79. });
  80. btnStop.prop('disabled', true);
  81. btnStart.prop('disabled', false);
  82. });
  83. });
  84. }
  85. function useWami() {
  86. $('#record-audio-wami').show();
  87. Wami.setup({
  88. id: "record-audio-wami-container",
  89. onReady: setupGUI,
  90. swfUrl: '{{ _p.web_lib }}wami-recorder/Wami.swf'
  91. });
  92. function setupGUI() {
  93. var gui = new Wami.GUI({
  94. id: 'record-audio-wami-container',
  95. singleButton: true,
  96. recordUrl: '{{ _p.web_ajax }}record_audio_wami.ajax.php?' + $.param({
  97. waminame: '{{ file_name }}.wav',
  98. wamidir: '{{ directory }}',
  99. wamiuserid: {{ user_id }}
  100. }),
  101. buttonUrl: '{{ _p.web_lib }}wami-recorder/buttons.png',
  102. buttonNoUrl: '{{ _p.web_img }}blank.gif'
  103. }
  104. );
  105. gui.setPlayEnabled(false);
  106. }
  107. }
  108. $('#record-audio-recordrtc, #record-audio-wami').hide();
  109. var webRTCIsEnabled = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia ||
  110. navigator.mediaDevices.getUserMedia;
  111. if (webRTCIsEnabled) {
  112. useRecordRTC();
  113. return;
  114. }
  115. useWami();
  116. });
  117. </script>