RecordAudio.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /* For licensing terms, see /license.txt */
  2. window.RecordAudio = (function () {
  3. function useRecordRTC(rtcInfo) {
  4. $(rtcInfo.blockId).show();
  5. var mediaConstraints = {audio: true},
  6. localStream = null,
  7. recordRTC = null,
  8. btnStart = $(rtcInfo.btnStartId),
  9. btnStop = $(rtcInfo.btnStopId),
  10. btnSave = $(rtcInfo.btnSaveId),
  11. tagAudio = $(rtcInfo.plyrPreviewId);
  12. function saveAudio() {
  13. var recordedBlob = recordRTC.getBlob();
  14. if (!recordedBlob) {
  15. return;
  16. }
  17. var btnSaveText = btnSave.html();
  18. var fileExtension = recordedBlob.type.split('/')[1];
  19. var formData = new FormData();
  20. formData.append('audio', recordedBlob, 'audio.' + fileExtension);
  21. for (var prop in rtcInfo.data) {
  22. if (!rtcInfo.data.hasOwnProperty(prop)) {
  23. continue;
  24. }
  25. formData.append(prop, rtcInfo.data[prop]);
  26. }
  27. $.ajax({
  28. url: _p.web_plugin + 'whispeakauth/ajax/record_audio.php',
  29. data: formData,
  30. processData: false,
  31. contentType: false,
  32. type: 'POST',
  33. beforeSend: function () {
  34. btnStart.prop('disabled', true);
  35. btnStop.prop('disabled', true);
  36. btnSave.prop('disabled', true).text(btnSave.data('loadingtext'));
  37. }
  38. }).done(function (response) {
  39. $('#messages-deck').append(response);
  40. }).always(function () {
  41. btnSave.prop('disabled', true).html(btnSaveText).parent().addClass('hidden');
  42. btnStop.prop('disabled', true).parent().addClass('hidden');
  43. btnStart.prop('disabled', false).parent().removeClass('hidden');
  44. });
  45. }
  46. btnStart.on('click', function () {
  47. tagAudio.prop('src', '');
  48. function successCallback(stream) {
  49. localStream = stream;
  50. recordRTC = RecordRTC(stream, {
  51. recorderType: StereoAudioRecorder,
  52. numberOfAudioChannels: 1,
  53. type: 'audio'
  54. });
  55. recordRTC.startRecording();
  56. btnSave.prop('disabled', true).parent().addClass('hidden');
  57. btnStop.prop('disabled', false).parent().removeClass('hidden');
  58. btnStart.prop('disabled', true).parent().addClass('hidden');
  59. tagAudio.removeClass('show').parents('#audio-wrapper').addClass('hidden');
  60. }
  61. function errorCallback(error) {
  62. alert(error.message);
  63. }
  64. if (navigator.mediaDevices.getUserMedia) {
  65. navigator.mediaDevices.getUserMedia(mediaConstraints)
  66. .then(successCallback)
  67. .catch(errorCallback);
  68. return;
  69. }
  70. navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
  71. if (navigator.getUserMedia) {
  72. navigator.getUserMedia(mediaConstraints, successCallback, errorCallback);
  73. }
  74. });
  75. btnStop.on('click', function () {
  76. if (!recordRTC) {
  77. return;
  78. }
  79. recordRTC.stopRecording(function (audioURL) {
  80. btnStart.prop('disabled', false).parent().removeClass('hidden');
  81. btnStop.prop('disabled', true).parent().addClass('hidden');
  82. btnSave.prop('disabled', false).parent().removeClass('hidden');
  83. tagAudio
  84. .prop('src', audioURL)
  85. .parents('#audio-wrapper')
  86. .removeClass('hidden')
  87. .addClass('show');
  88. localStream.getTracks()[0].stop();
  89. });
  90. });
  91. btnSave.on('click', function () {
  92. if (!recordRTC) {
  93. return;
  94. }
  95. saveAudio();
  96. });
  97. }
  98. return {
  99. init: function (rtcInfo) {
  100. $(rtcInfo.blockId).hide();
  101. var userMediaEnabled = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ||
  102. !!navigator.webkitGetUserMedia ||
  103. !!navigator.mozGetUserMedia ||
  104. !!navigator.getUserMedia;
  105. if (!userMediaEnabled) {
  106. return;
  107. }
  108. useRecordRTC(rtcInfo);
  109. }
  110. }
  111. })();