梁美英 / programming · Commits

Commit 47d0dca7b001a21696210cfa1f7e6401e002e90c

Authored by ykxie
1 parent 23052588

更改逻辑

Inline Side-by-side
Showing 5 changed files with 182 additions and 168 deletions
example/recording.html 0 → 100644
  View file @47d0dca
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>录音demo</title>
  6 +</head>
  7 +<body>
  8 + <div class="code-warp"></div>
  9 + <audio controls autoplay></audio>
  10 + <fieldset>
  11 + <legend>录音 AUDIO</legend>
  12 + <input onclick="startRecording()" type="button" value="录音" />
  13 + <input onclick="stopRecording()" type="button" value="停止" />
  14 + <input onclick="playRecording()" type="button" value="播放" />
  15 + <input onclick="uploadAudio()" type="button" value="提交" />
  16 + <input onclick="downloadAudio()" type="button" value="下载" />
  17 + <input onclick="pauseAudio()" type="button" value="暂停／继续" />
  18 + </fieldset>
  19 +
  20 +<script type="text/javascript" src="../src/js/recorder/Myna.js"></script>
  21 +<script>
  22 + var recorder;
  23 + var audioData = [];
  24 + var _audio = '';
  25 + var size = 0;
  26 + window.URL = window.URL || window.webkitURL;
  27 + console.log(recorder)
  28 + var audio = document.querySelector('audio');
  29 +
  30 + function startRecording() {
  31 + HZRecorder.get(function (rec) {
  32 + console.log(recorder)
  33 + console.log('----------------------')
  34 + recorder = rec;
  35 + recorder.start();
  36 + console.log(recorder)
  37 + });
  38 + }
  39 + console.log('++++++++++++++++++++')
  40 + console.log(recorder)
  41 +
  42 + function pauseAudio(){
  43 + recorder.pause();
  44 + }
  45 +
  46 + function stopRecording() {
  47 + recorder.stop();
  48 + // audioData.push(recorder.getBlobData());
  49 + audioData.push(window.URL.createObjectURL(recorder.getBlobData()));
  50 + console.log(audioData);
  51 + }
  52 +
  53 + function playRecording() {
  54 + recorder.play(audio);
  55 + }
  56 +
  57 + function uploadAudio() {
  58 + recorder.upload("Handler1.ashx", function (state, e) {
  59 + switch (state) {
  60 + case 'uploading':
  61 + //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
  62 + break;
  63 + case 'ok':
  64 + //alert(e.target.responseText);
  65 + alert("上传成功");
  66 + break;
  67 + case 'error':
  68 + alert("上传失败");
  69 + break;
  70 + case 'cancel':
  71 + alert("上传被取消");
  72 + break;
  73 + }
  74 + });
  75 + }
  76 +</script>
  77 +</body>
  78 +</html>
  79 +
... ...
src/index.html
  View file @47d0dca
... ... @@ -93,15 +93,14 @@
93 93 </div>
94 94 </div>
95 95 </div>
96   -
97 96 </div>
  97 +
98 98 <div class="col-md-4" id="previewpanel">
99 99 <div id="resultpanel" class="panel panel-default">
100 100 <div class="panel-heading">
101 101 <div class="btn-group">
102 102 <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>
103 103 <p id="replay">预览录制</p>
104   -
105 104 </div>
106 105 <div class="btn-group pull-right" id="comprunbtngrp"></div>
107 106 </div>
... ... @@ -135,17 +134,18 @@
135 134  
136 135 <!-- 录音控制条 -->
137 136 <div class="recording-ctrl-bar">
138   - <button id="recording-btn" class="btn recording" type="button" data="1" title="正在录制"></button>
139   - <button class="btn new-recording" title="重新录制" style="display: none;"></button>
  137 + <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button>
  138 + <!-- <button id="recording-btn" class="btn recording" type="button" data="1" title="结束录制" style="display: none;"></button> -->
  139 + <!-- <button class="btn new-recording" title="重新录制" style="display: none;"></button> -->
140 140 <button class="audio-play hidden" title="播放预览" data="1">
141 141 <i class="icon iconfont icon-play"></i>
142 142 </button>
143   - <div class="recording-time twinkle" value="">00:00:00</div>
  143 + <div class="recording-time" value="">00:00:00</div>
144 144 <div class="audio-view" style="display: none;">
145 145 <audio id="audio" autoplay></audio>
146 146 </div>
147 147 <div class="save-wrap">
148   - <input type="button" id="upload" class="upload-teach" style="display: ;" disabled="disabled" value="保存">
  148 + <input type="button" id="upload" class="upload-teach" disabled="disabled" value="保存">
149 149 <input type="button" id="savecorde" class="upload-stud" style="display: none;" disabled="disabled" value="保存">
150 150 <input type="button" id="cancel" value="关闭">
151 151 </div>
... ... @@ -156,7 +156,7 @@
156 156 </div>
157 157  
158 158 <div class="record-before">
159   - <div class="tip" style="display: none;">
  159 + <div class="tip">
160 160 <a class="start-btn"></a>
161 161 </div>
162 162 <div class="error" style="display: none;">
... ... @@ -173,138 +173,22 @@
173 173 <script src="js/recording/recording.js"></script>
174 174  
175 175 <script>
176   - var global_trigger_record = 1;
177 176 var recorder;
178   - var startRec = $('#startRec');
179   - var stopRec = $('#stopRec');
180   - var playRec = $('#playRec');
181   - var submitRec = $('#submitRec');
182 177 var _role = getQuery('role');
183 178 var _chapterId = getQuery('chapterId');
184 179 var userId = getQuery('userId');
185 180  
186 181 var audio = document.querySelector('audio');
187   -
188 182 var saveAudio = document.getElementById("save");
189   -
190   - $('.recording').click(function(){
191   - $('.recording').hide();
192   - $('.recording-time').removeClass('twinkle');
193   - timer.stopTimer(); // 停止计时器
194   -
195   - $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
196   - $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
197   - // $('#cancel').attr('disabled', 'disabled').prop("disabled", true);
198   -
199   - // $('.recording').hide();
200   - $('.new-recording').show();
201   - $('.audio-play').removeClass('hidden').addClass('show');
202   -
203   - if (_role == 0) {
204   - recorder.stop();
205   - $('#upload').show();
206   -
207   - }else if (_role == 1) {
208   - $('#savecorde').show();
209   - }
210   -
211   -
212   - })
213   -
214   - $('.new-recording').click(function(){
215   - $('.recording').show();
216   - $('.new-recording').hide();
217   - window.location.reload();
218   - })
219   -
220   -
221   - $('.audio-finish').click(function(){
222   - var data = $(this).attr('data');
223   - timer.stopTimer();
224   -
225   - $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
226   - $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
227   - $('#cancel').attr('disabled', 'disabled').prop("disabled", true);
228   -
229   - if (data == 1){
230   - if (_role == 0) {
231   - recorder.stop();
232   - console.log(recorder);
233   - $('#upload').show()
234   - }else if (_role == 1) {
235   - $('#savecorde').show()
236   - }
237   - submitRec.removeAttr('disabled').prop("disabled", false);
238   - $('#imgAudio').removeClass("microphone")
239   - $(this).attr('data', 0).attr('data-original-title', '重新录制');
240   - $(this).children('span').removeClass('stop').addClass('restart')
241   - $('.audio-play').css('background-color', '#7FDE94').attr('data', '1').attr('data-original-title', '播放录音')
242   - } else {
243   - window.location.reload();
244   - }
245   - })
246 183  
247 184 // 结束播放事件
248 185 audio.addEventListener("ended", function() {
  186 + console.log('结束播放事件');
249 187 timer.stopTimer();
250 188 $('.audio-play').attr('data', '1')
251 189 $('.audio-play').prop('disabled', false);
252 190 }, false);
253 191  
254   -
255   - // 播放录音
256   - $("#startRec").click(function(){
257   - startRecording();
258   - })
259   - function startRecording(obj) {
260   - HZRecorder.get(function(rec) {
261   - var seconds = 0;
262   - var countdown = setInterval(function(){
263   - seconds += 1;
264   - document.getElementById('countdown').innerHTML = 4-seconds;
265   - if(seconds == 4){
266   - clearInterval(countdown);
267   - $("#countdown").css("display", "none");
268   - recorder = rec;
269   - recorder.start();
270   - }
271   - },1000);
272   -
273   - startRec.val('录音中...').attr('disabled', 'disabled').prop("disabled", true);
274   - playRec.attr('disabled', 'disabled').prop("disabled", true);
275   - submitRec.attr('disabled', 'disabled').prop("disabled", true);
276   - });
277   - $("#countdown").css("display", "block")
278   - }
279   - // 停止录音
280   - $("#stopRec").click(function(){
281   - stopRecording()
282   - })
283   - function stopRecording() {
284   - recorder.stop();
285   - startRec.val('重新录音').removeAttr('disabled').prop("disabled", false);
286   - stopRec.val('录制完成').attr('disabled', 'disabled').prop("disabled", true);
287   - playRec.removeAttr('disabled').prop("disabled", false);
288   - submitRec.removeAttr('disabled').prop("disabled", false);
289   - }
290   -
291   - // 播放录音
292   - $("#playRec").click(function(){
293   - playRecording()
294   - })
295   - function playRecording() {
296   - recorder.play(audio);
297   - playRec.val('正在播放...').attr('disabled', 'disabled').prop("disabled", true);
298   - setTimeout(function(){
299   - playRec.val('播放').removeAttr('disabled').prop("disabled", false);
300   - }, 2000);
301   - }
302   -
303   - // 下载录音文件
304   - function downloadAudio(saveAudio){
305   - recorder.download(saveAudio);
306   - }
307   -
308 192 $('#upload').click(function(){
309 193 uploadAudio()
310 194 })
... ...
src/js/gbreplayer.js
  View file @47d0dca
... ... @@ -21,7 +21,6 @@ $(function(){
21 21 $('#upload').show();
22 22 }
23 23  
24   -
25 24 var GBCodePlayBack = {
26 25 records: [],
27 26 excercise_records: [],
... ... @@ -475,6 +474,7 @@ $(function(){
475 474  
476 475 // 播放录制代码过程
477 476 $('.audio-play').click(function(){
  477 + timer.init($recording_time);
478 478 var data = $(this).attr('data');
479 479 if (_role == 0) {
480 480 $('.audio-play').attr('disabled', true);
... ... @@ -560,6 +560,7 @@ $(function(){
560 560 //播放代码回放
561 561 $('#playrecord').click(function(){
562 562 // GBCodePlayBack.playRecordStart = new Date().getTime(); // 开始播放的时间
  563 + console.log("---------------------")
563 564 if($(window).width()>992){
564 565 var $tutorial = $('#tutorialinfopanel'),
565 566 $editorpanel = $('#editorpanel'),
... ... @@ -1319,7 +1320,7 @@ $(function(){
1319 1320 currenttime = new Date().getTime();
1320 1321 // if(!GBCodePlayBack.record_startime) GBCodePlayBack.record_startime = currenttime;
1321 1322 //根据不同的身份设置录制代码的时间间隔，当学生端输入的时候，重置间隔为100毫秒
1322   - if(_role == 0) {
  1323 + if(_role == 0 && GBCodePlayBack.record_startime) {
1323 1324 intervaltime = currenttime - GBCodePlayBack.record_startime;
1324 1325 }
1325 1326 var recordobj = {
... ... @@ -1329,8 +1330,10 @@ $(function(){
1329 1330 trigger: 0,
1330 1331 playTime: 0
1331 1332 };
  1333 + console.log(GBCodePlayBack.records)
1332 1334 GBCodePlayBack.records.push(recordobj);
1333 1335 GBCodePlayBack.record_startime = currenttime; //设定起始时间
  1336 +
1334 1337 },
1335 1338 changeValueCallback: function(record, replay_type, offset) {
1336 1339 var obj = record.changeobj, editor = record.editor;
... ... @@ -1353,7 +1356,7 @@ $(function(){
1353 1356  
1354 1357 record.trigger = 1; //标记已运行
1355 1358 record.playTime = new Date().getTime(); // 播放开始时间
1356   -
  1359 + console.log(record);
1357 1360 if(replay_type){
1358 1361 GBCodePlayBack.excercise_triggertotal += 1;
1359 1362 }else{
... ... @@ -1474,40 +1477,89 @@ $(function(){
1474 1477 }
1475 1478 }
1476 1479  
  1480 + $('.record-before').hide();
  1481 + GBCodePlayBack.recordinit();
  1482 +
  1483 + // 开始录制
  1484 + $('#start-recording').click(function(){
  1485 + console.log('ooooooo');
  1486 + var data = $(this).attr('data');
  1487 + console.log(data);
  1488 + if(data == 1){
  1489 + console.log('++++++++++');
  1490 + startReacoder();
  1491 + }else{
  1492 + console.log('*********');
  1493 + stopReacoder();
  1494 + }
  1495 +
  1496 + })
  1497 +
1477 1498 // 呼气麦克风和录制代码
1478   - if(document.URL.indexOf('index.htm') >= 0 && _role == 0){
1479   - HZRecorder.get(function(rec) {
1480   - var seconds = 0;
1481   - $('.tip').show();
1482   - $('.start-btn').click(function(){
1483   - $('.tip').hide();
1484   - $("#countdown").find('img').attr('src', 'img/dribbble-1.gif');
1485   - var countdown = setInterval(function(){
1486   - seconds += 1;
1487   - if(seconds == 3){
1488   - $('.record-before').hide();
1489   - clearInterval(countdown);
1490   - $("#countdown").css("display", "none");
1491   - $("#countdown").find('img').attr('src', '');
1492   - GBCodePlayBack.record_startime = new Date().getTime();
1493   - recorder = rec;
1494   - recorder.start();
1495   - GBCodePlayBack.recordinit();
1496   - timer.init($recording_time);
1497   - }
1498   - },1000);
1499   - })
1500   - });
  1499 + // if(document.URL.indexOf('index.htm') >= 0 && _role == 0){
  1500 + // HZRecorder.get(function(rec) {
  1501 + // var seconds = 0;
  1502 + // $('.tip').show();
  1503 + // $('.start-btn').click(function(){
  1504 + // $('.tip').hide();
  1505 + // $("#countdown").find('img').attr('src', 'img/dribbble-1.gif');
  1506 + // var countdown = setInterval(function(){
  1507 + // seconds += 1;
  1508 + // if(seconds == 3){
  1509 + // $('.record-before').hide();
  1510 + // clearInterval(countdown);
  1511 + // $("#countdown").css("display", "none");
  1512 + // $("#countdown").find('img').attr('src', '');
  1513 + // GBCodePlayBack.record_startime = new Date().getTime();
  1514 + // recorder = rec;
  1515 + // recorder.start();
  1516 + // GBCodePlayBack.recordinit();
  1517 + // timer.init($recording_time);
  1518 + // }
  1519 + // },1000);
  1520 + // })
  1521 + // });
1501 1522  
1502   - }else{
1503   - $('.record-before').hide();
1504   - GBCodePlayBack.recordinit();
1505   - timer.init($recording_time);
1506   - }
  1523 + // }else{
  1524 + // $('.record-before').hide();
  1525 + // GBCodePlayBack.recordinit();
  1526 + // timer.init($recording_time);
  1527 + // }
1507 1528  
  1529 + function startReacoder(){
  1530 + HZRecorder.get(function(rec) {
  1531 + console.log('+++++++++++++++++++')
  1532 + recorder = rec;
  1533 + recorder.start();
  1534 +
  1535 + GBCodePlayBack.htmleditor.setValue('');
  1536 + GBCodePlayBack.records = [];
  1537 + GBCodePlayBack.record_startime = new Date().getTime();
  1538 +
  1539 + $('#start-recording').removeClass('new-recording').addClass('recording').attr('data', '0').attr('data-original-title', '结束录制');
  1540 + $('.recording-time').addClass('twinkle');
  1541 + timer.init($recording_time);
  1542 + $('.audio-play').removeClass('show').addClass('hidden');
  1543 + });
  1544 + }
1508 1545  
  1546 + function stopReacoder(){
  1547 + $('#start-recording').removeClass('recording').addClass('new-recording').attr('data', '1').attr('data-original-title', '重新录制');
  1548 + $('.recording-time').removeClass('twinkle');
  1549 + timer.stopTimer();
1509 1550  
  1551 + $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
  1552 + $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
  1553 + $('.audio-play').removeClass('hidden').addClass('show');
  1554 + if (_role == 0) {
  1555 + recorder.stop();
  1556 + $('#upload').show();
1510 1557  
  1558 + }else if (_role == 1) {
  1559 + $('#savecorde').show();
  1560 + }
  1561 +
  1562 + }
1511 1563  
1512 1564  
1513 1565 // 初始化渲染编辑页面
... ...
src/js/recorder/Myna.js
  View file @47d0dca
... ... @@ -14,18 +14,12 @@
14 14 var recorder = createScript.apply(context, [4096, 1, 1]);
15 15  
16 16 var audioData = {
17   - size: 0 //录音文件长度
18   - ,
19   - buffer: [] //录音缓存
20   - ,
21   - inputSampleRate: context.sampleRate //输入采样率
22   - ,
23   - inputSampleBits: 16 //输入采样数位 8, 16
24   - ,
25   - outputSampleRate: config.sampleRate //输出采样率
26   - ,
27   - oututSampleBits: config.sampleBits //输出采样数位 8, 16
28   - ,
  17 + size: 0, //录音文件长度
  18 + buffer: [], //录音缓存
  19 + inputSampleRate: context.sampleRate, //输入采样率
  20 + inputSampleBits: 16, //输入采样数位 8, 16
  21 + outputSampleRate: config.sampleRate, //输出采样率
  22 + oututSampleBits: config.sampleBits, //输出采样数位 8, 16
29 23 input: function(data) {
30 24 this.buffer.push(new Float32Array(data));
31 25 this.size += data.length;
... ... @@ -148,6 +142,7 @@
148 142  
149 143 //停止
150 144 this.stop = function() {
  145 + console.log('&&&&&&&&&&&&');
151 146 recorder.disconnect();
152 147 }
153 148  
... ... @@ -157,6 +152,11 @@
157 152 return audioData.encodeWAV();
158 153 }
159 154  
  155 + // 获取音频文件
  156 + this.getBlobData = function(){
  157 + return audioData.encodeWAV();
  158 + }
  159 +
160 160 //回放
161 161 this.play = function(audio) {
162 162 console.log(window.URL.createObjectURL(this.getBlob()))
... ...
src/player.html
  View file @47d0dca
... ... @@ -128,7 +128,6 @@
128 128 </div>
129 129 </div>
130 130 </div>
131   -
132 131 <div class="play-bar">
133 132 <button id="playrecord" data-status='0' title="播放">
134 133 <i class="icon iconfont icon-play"></i>
... ...