|
@@ -36,159 +36,21 @@
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
- $(document).on('ready', function () {
|
|
|
- function useRecordRTC() {
|
|
|
- $('#record-audio-recordrtc-{{ question_id }}').show();
|
|
|
- var mediaConstraints = {audio: true},
|
|
|
- recordRTC = null,
|
|
|
- btnStart = $('#btn-start-record-{{ question_id }}'),
|
|
|
- btnPause = $('#btn-pause-record-{{ question_id }}'),
|
|
|
- btnPlay = $('#btn-play-record-{{ question_id }}'),
|
|
|
- btnStop = $('#btn-stop-record-{{ question_id }}'),
|
|
|
- btnSave = $('#btn-save-record-{{ question_id }}'),
|
|
|
- tagAudio = $('#record-preview-{{ question_id }}');
|
|
|
-
|
|
|
- btnStart.on('click', function () {
|
|
|
- navigator.getUserMedia = navigator.getUserMedia ||
|
|
|
- navigator.mozGetUserMedia ||
|
|
|
- navigator.webkitGetUserMedia;
|
|
|
-
|
|
|
- if (navigator.getUserMedia) {
|
|
|
- navigator.getUserMedia(mediaConstraints, successCallback, errorCallback);
|
|
|
- } else if (navigator.mediaDevices.getUserMedia) {
|
|
|
- navigator.mediaDevices.getUserMedia(mediaConstraints)
|
|
|
- .then(successCallback).error(errorCallback);
|
|
|
- }
|
|
|
-
|
|
|
- function successCallback(stream) {
|
|
|
- recordRTC = RecordRTC(stream, {
|
|
|
- numberOfAudioChannels: 1,
|
|
|
- type: 'audio'
|
|
|
- });
|
|
|
- recordRTC.startRecording();
|
|
|
-
|
|
|
- btnSave.prop('disabled', true).addClass('hidden');
|
|
|
- btnStop.prop('disabled', false).removeClass('hidden');
|
|
|
- btnStart.prop('disabled', true).addClass('hidden');
|
|
|
- btnPause.prop('disabled', false).removeClass('hidden');
|
|
|
- tagAudio.removeClass('show').addClass('hidden');
|
|
|
- }
|
|
|
-
|
|
|
- function errorCallback(error) {
|
|
|
- alert(error.message);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- btnPause.on('click', function () {
|
|
|
- if (!recordRTC) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- btnPause.prop('disabled', true).addClass('hidden');
|
|
|
- btnPlay.prop('disabled', false).removeClass('hidden');
|
|
|
- btnStop.prop('disabled', true).addClass('hidden');
|
|
|
- recordRTC.pauseRecording();
|
|
|
- });
|
|
|
-
|
|
|
- btnPlay.on('click', function () {
|
|
|
- if (!recordRTC) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- btnPlay.prop('disabled', true).addClass('hidden');
|
|
|
- btnPause.prop('disabled', false).removeClass('hidden');
|
|
|
- btnStop.prop('disabled', false).removeClass('hidden');
|
|
|
- recordRTC.resumeRecording();
|
|
|
- });
|
|
|
-
|
|
|
- btnStop.on('click', function () {
|
|
|
- if (!recordRTC) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- recordRTC.stopRecording(function (audioURL) {
|
|
|
- btnStart.prop('disabled', false).removeClass('hidden');
|
|
|
- btnPause.prop('disabled', true).addClass('hidden');
|
|
|
- btnStop.prop('disabled', true).addClass('hidden');
|
|
|
- btnSave.prop('disabled', false).removeClass('hidden');
|
|
|
-
|
|
|
- tagAudio
|
|
|
- .removeClass('hidden')
|
|
|
- .addClass('show')
|
|
|
- .prop('src', audioURL);
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // Download button
|
|
|
- btnSave.on('click', function () {
|
|
|
- if (!recordRTC) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- var recordedBlob = recordRTC.getBlob();
|
|
|
- if (!recordedBlob) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- var fileName = '{{ file_name }}',
|
|
|
- fileExtension = '.' + recordedBlob.type.split('/')[1];
|
|
|
-
|
|
|
- var formData = new FormData();
|
|
|
- formData.append('audio_blob', recordedBlob, fileName + fileExtension);
|
|
|
- formData.append('audio_dir', '{{ directory }}');
|
|
|
-
|
|
|
- $.ajax({
|
|
|
- url: '{{ _p.web_ajax }}record_audio_rtc.ajax.php',
|
|
|
- data: formData,
|
|
|
- processData: false,
|
|
|
- contentType: false,
|
|
|
- type: 'POST'
|
|
|
- }).then(function () {
|
|
|
- btnSave.prop('disabled', true).addClass('hidden');
|
|
|
- btnStop.prop('disabled', true).addClass('hidden');
|
|
|
- btnStart.prop('disabled', false).removeClass('hidden');
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function useWami() {
|
|
|
- $('#record-audio-wami-{{ question_id }}').show();
|
|
|
-
|
|
|
- Wami.setup({
|
|
|
- id: "record-audio-wami-container-{{ question_id }}",
|
|
|
- onReady: setupGUI,
|
|
|
- swfUrl: '{{ _p.web_lib }}wami-recorder/Wami.swf'
|
|
|
- });
|
|
|
-
|
|
|
- function setupGUI() {
|
|
|
- var gui = new Wami.GUI({
|
|
|
- id: 'record-audio-wami-container-{{ question_id }}',
|
|
|
- singleButton: true,
|
|
|
- recordUrl: '{{ _p.web_ajax }}record_audio_wami.ajax.php?' + $.param({
|
|
|
- waminame: '{{ file_name }}.wav',
|
|
|
- wamidir: '{{ directory }}',
|
|
|
- wamiuserid: {{ user_id }}
|
|
|
- }),
|
|
|
- buttonUrl: '{{ _p.web_lib }}wami-recorder/buttons.png',
|
|
|
- buttonNoUrl: '{{ _p.web_img }}blank.gif'
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- gui.setPlayEnabled(false);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- $('#record-audio-recordrtc-{{ question_id }}, #record-audio-wami-{{ question_id }}').hide();
|
|
|
-
|
|
|
- var webRTCIsEnabled = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia ||
|
|
|
- navigator.mediaDevices.getUserMedia;
|
|
|
-
|
|
|
- if (webRTCIsEnabled) {
|
|
|
- useRecordRTC();
|
|
|
-
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- useWami();
|
|
|
- });
|
|
|
+$(document).on('ready', function () {
|
|
|
+ RecordAudio.init({
|
|
|
+ blockId: '#record-audio-recordrtc-{{ question_id }}',
|
|
|
+ btnStartId: '#btn-start-record-{{ question_id }}',
|
|
|
+ btnPauseId: '#btn-pause-record-{{ question_id }}',
|
|
|
+ btnPlayId: '#btn-play-record-{{ question_id }}',
|
|
|
+ btnStopId: '#btn-stop-record-{{ question_id }}',
|
|
|
+ btnSaveId: '#btn-save-record-{{ question_id }}',
|
|
|
+ plyrPreviewId: '#record-preview-{{ question_id }}',
|
|
|
+ directory: '{{ directory }}'
|
|
|
+ }, {
|
|
|
+ blockId: '#record-audio-wami-{{ question_id }}',
|
|
|
+ containerId: 'record-audio-wami-container-{{ question_id }}',
|
|
|
+ directory: '{{ directory }}',
|
|
|
+ userId: {{ user_id }}
|
|
|
+ }, '{{ file_name }}');
|
|
|
+});
|
|
|
</script>
|