更改逻辑

ykxie
1 parent 23052588
Showing 5 changed files with 182 additions and 168 deletions
example/recording.html
src/index.html
src/js/gbreplayer.js
src/js/recorder/Myna.js
src/player.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>录音demo</title>
+</head>
+<body>
+    <div class="code-warp"></div>
+    <audio controls autoplay></audio>
+    <fieldset>
+        <legend>录音 AUDIO</legend>
+        <input onclick="startRecording()" type="button" value="录音" />
+        <input onclick="stopRecording()" type="button" value="停止" />
+        <input onclick="playRecording()" type="button" value="播放" />
+        <input onclick="uploadAudio()" type="button" value="提交" />
+        <input onclick="downloadAudio()" type="button" value="下载" />
+        <input onclick="pauseAudio()" type="button" value="暂停／继续" />
+    </fieldset>
+
+<script type="text/javascript" src="../src/js/recorder/Myna.js"></script>
+<script>
+    var recorder;
+    var audioData = [];
+    var _audio = '';
+    var size = 0;
+    window.URL = window.URL || window.webkitURL;
+    console.log(recorder)
+    var audio = document.querySelector('audio');
+
+    function startRecording() {
+        HZRecorder.get(function (rec) {
+            console.log(recorder)
+            console.log('----------------------')
+            recorder = rec;
+            recorder.start();
+            console.log(recorder)
+        });
+    }
+    console.log('++++++++++++++++++++')
+    console.log(recorder)
+
+    function pauseAudio(){
+        recorder.pause();
+    }
+
+    function stopRecording() {
+        recorder.stop();
+        // audioData.push(recorder.getBlobData());
+        audioData.push(window.URL.createObjectURL(recorder.getBlobData()));
+        console.log(audioData);
+    }
+
+    function playRecording() {
+        recorder.play(audio);
+    }
+
+    function uploadAudio() {
+        recorder.upload("Handler1.ashx", function (state, e) {
+            switch (state) {
+                case 'uploading':
+                    //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
+                    break;
+                case 'ok':
+                    //alert(e.target.responseText);
+                    alert("上传成功");
+                    break;
+                case 'error':
+                    alert("上传失败");
+                    break;
+                case 'cancel':
+                    alert("上传被取消");
+                    break;
+            }
+        });
+    }
+</script>
+</body>
+</html>
+
@@ -93,15 +93,14 @@
                         </div>
                     </div>
                 </div>
-
             </div>
+
             <div class="col-md-4" id="previewpanel">
                 <div id="resultpanel" class="panel panel-default">
                     <div class="panel-heading">
                         <div class="btn-group">
                             <button type="button" class="btn btn-success" id="play" data-status="0" title="" style="display: none;"><</button>
                             <p id="replay">预览录制</p>
-
                         </div>
                         <div class="btn-group pull-right" id="comprunbtngrp"></div>
                     </div>
@@ -135,17 +134,18 @@
     <!-- 录音控制条 -->
     <div class="recording-ctrl-bar">
-        <button id="recording-btn" class="btn recording" type="button" data="1" title="正在录制"></button>
-        <button class="btn new-recording" title="重新录制" style="display: none;"></button>
+        <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button>
+        <!-- <button id="recording-btn" class="btn recording" type="button" data="1" title="结束录制" style="display: none;"></button> -->
+        <!-- <button class="btn new-recording" title="重新录制" style="display: none;"></button> -->
         <button class="audio-play hidden" title="播放预览" data="1">
             <i class="icon iconfont icon-play"></i>
         </button>
-        <div class="recording-time twinkle" value="">00:00:00</div>
+        <div class="recording-time" value="">00:00:00</div>
         <div class="audio-view" style="display: none;">
             <audio id="audio" autoplay></audio>
         </div>
         <div class="save-wrap">
-            <input type="button" id="upload" class="upload-teach" style="display: ;" disabled="disabled" value="保存">
+            <input type="button" id="upload" class="upload-teach" disabled="disabled" value="保存">
             <input type="button" id="savecorde" class="upload-stud" style="display: none;" disabled="disabled" value="保存">
             <input type="button" id="cancel" value="关闭">
         </div>
@@ -156,7 +156,7 @@
     </div>
     <div class="record-before">
-        <div class="tip" style="display: none;">
+        <div class="tip">
             <a class="start-btn"></a>
         </div>
         <div class="error" style="display: none;">
@@ -173,138 +173,22 @@
     <script src="js/recording/recording.js"></script>
     <script>
-    var global_trigger_record = 1;
     var recorder;
-    var startRec = $('#startRec');
-    var stopRec = $('#stopRec');
-    var playRec = $('#playRec');
-    var submitRec = $('#submitRec');
     var _role = getQuery('role');
     var _chapterId = getQuery('chapterId');
     var userId = getQuery('userId');
     var audio = document.querySelector('audio');
-
     var saveAudio = document.getElementById("save");
-
-    $('.recording').click(function(){
-        $('.recording').hide();
-        $('.recording-time').removeClass('twinkle');
-        timer.stopTimer();  // 停止计时器
-
-        $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
-        $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
-        // $('#cancel').attr('disabled', 'disabled').prop("disabled", true);
-
-        // $('.recording').hide();
-        $('.new-recording').show();
-        $('.audio-play').removeClass('hidden').addClass('show');
-
-        if (_role == 0) {
-            recorder.stop();
-            $('#upload').show();
-
-        }else if (_role == 1) {
-            $('#savecorde').show();
-        }
-
-
-    })
-
-    $('.new-recording').click(function(){
-        $('.recording').show();
-        $('.new-recording').hide();
-        window.location.reload();
-    })
-
-
-    $('.audio-finish').click(function(){
-        var data = $(this).attr('data');
-        timer.stopTimer();
-
-        $('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
-        $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
-        $('#cancel').attr('disabled', 'disabled').prop("disabled", true);
-
-        if (data == 1){
-            if (_role == 0) {
-                recorder.stop();
-                console.log(recorder);
-                $('#upload').show()
-            }else if (_role == 1) {
-                $('#savecorde').show()
-            }
-            submitRec.removeAttr('disabled').prop("disabled", false);
-            $('#imgAudio').removeClass("microphone")
-            $(this).attr('data', 0).attr('data-original-title', '重新录制');
-            $(this).children('span').removeClass('stop').addClass('restart')
-            $('.audio-play').css('background-color', '#7FDE94').attr('data', '1').attr('data-original-title', '播放录音')
-        } else {
-            window.location.reload();
-        }
-    })
     // 结束播放事件
     audio.addEventListener("ended", function() {
+        console.log('结束播放事件');
         timer.stopTimer();
         $('.audio-play').attr('data', '1')
         $('.audio-play').prop('disabled', false);
     }, false);
-
-    // 播放录音
-    $("#startRec").click(function(){
-        startRecording();
-    })
-    function startRecording(obj) {
-        HZRecorder.get(function(rec) {
-            var seconds = 0;
-            var countdown = setInterval(function(){
-                seconds += 1;
-                document.getElementById('countdown').innerHTML = 4-seconds;
-                if(seconds == 4){
-                    clearInterval(countdown);
-                    $("#countdown").css("display", "none");
-                    recorder = rec;
-                    recorder.start();
-                }
-            },1000);
-            
-            startRec.val('录音中...').attr('disabled', 'disabled').prop("disabled", true);
-            playRec.attr('disabled', 'disabled').prop("disabled", true);
-            submitRec.attr('disabled', 'disabled').prop("disabled", true);
-        });
-        $("#countdown").css("display", "block")
-    }
-    // 停止录音
-    $("#stopRec").click(function(){
-        stopRecording()
-    })
-    function stopRecording() {
-        recorder.stop();
-        startRec.val('重新录音').removeAttr('disabled').prop("disabled", false);
-        stopRec.val('录制完成').attr('disabled', 'disabled').prop("disabled", true);
-        playRec.removeAttr('disabled').prop("disabled", false);
-        submitRec.removeAttr('disabled').prop("disabled", false);
-    }
-
-    // 播放录音
-    $("#playRec").click(function(){
-        playRecording()
-    })
-    function playRecording() {
-        recorder.play(audio);
-        playRec.val('正在播放...').attr('disabled', 'disabled').prop("disabled", true);
-        setTimeout(function(){
-            playRec.val('播放').removeAttr('disabled').prop("disabled", false);
-        }, 2000);
-    }
-
-    // 下载录音文件
-    function downloadAudio(saveAudio){
-        recorder.download(saveAudio);
-    }
-
     $('#upload').click(function(){
         uploadAudio()
     })
@@ -21,7 +21,6 @@ $(function(){
 		$('#upload').show();
 	}
-
 	var GBCodePlayBack = {
 		records: [],
 		excercise_records: [],
@@ -475,6 +474,7 @@ $(function(){
 			// 播放录制代码过程
 			$('.audio-play').click(function(){	
+				timer.init($recording_time);
 				var data = $(this).attr('data');
 				if (_role == 0) {
 					$('.audio-play').attr('disabled', true);
@@ -560,6 +560,7 @@ $(function(){
 			//播放代码回放
 			$('#playrecord').click(function(){
 				// GBCodePlayBack.playRecordStart = new Date().getTime();	// 开始播放的时间
+				console.log("---------------------")
 				if($(window).width()>992){
 					var $tutorial = $('#tutorialinfopanel'),
 						$editorpanel = $('#editorpanel'),
@@ -1319,7 +1320,7 @@ $(function(){
 				currenttime = new Date().getTime();
 			// if(!GBCodePlayBack.record_startime) GBCodePlayBack.record_startime = currenttime;
 			//根据不同的身份设置录制代码的时间间隔，当学生端输入的时候，重置间隔为100毫秒
-			if(_role == 0) {
+			if(_role == 0 && GBCodePlayBack.record_startime) {
 				intervaltime = currenttime - GBCodePlayBack.record_startime; 
 			}
 		  	var recordobj = {
@@ -1329,8 +1330,10 @@ $(function(){
 				trigger: 0,
 				playTime: 0
 			};
+			console.log(GBCodePlayBack.records)
 			GBCodePlayBack.records.push(recordobj);			
 			GBCodePlayBack.record_startime = currenttime; //设定起始时间
+
 		},
 		changeValueCallback: function(record, replay_type, offset) {
 			var obj = record.changeobj, editor = record.editor;
@@ -1353,7 +1356,7 @@ $(function(){
 				record.trigger = 1; //标记已运行
 				record.playTime = new Date().getTime();	// 播放开始时间
-
+				console.log(record);
 				if(replay_type){
 					GBCodePlayBack.excercise_triggertotal += 1;
 				}else{ 
@@ -1474,40 +1477,89 @@ $(function(){
 		}
 	}
+	$('.record-before').hide();
+	GBCodePlayBack.recordinit();
+
+	// 开始录制
+	$('#start-recording').click(function(){
+	    console.log('ooooooo');
+	    var data = $(this).attr('data');
+	    console.log(data);
+	    if(data == 1){
+	    	console.log('++++++++++');
+	    	startReacoder();
+	    }else{
+	    	console.log('*********');
+	    	stopReacoder();
+	    }
+	    
+	})
+	
 	// 呼气麦克风和录制代码
-	if(document.URL.indexOf('index.htm') >= 0 && _role == 0){
-		HZRecorder.get(function(rec) {
-		    var seconds = 0;
-		    $('.tip').show();
-		    $('.start-btn').click(function(){
-		    	$('.tip').hide();
-		    	$("#countdown").find('img').attr('src', 'img/dribbble-1.gif');
-		    	var countdown = setInterval(function(){
-		    	    seconds += 1;
-		    	    if(seconds == 3){
-		    	    	$('.record-before').hide();
-		    	        clearInterval(countdown);
-		    	        $("#countdown").css("display", "none");
-		    	        $("#countdown").find('img').attr('src', '');
-		    	        GBCodePlayBack.record_startime = new Date().getTime();
-		    	        recorder = rec;
-		    	        recorder.start();
-		    	        GBCodePlayBack.recordinit();
-		    	        timer.init($recording_time);
-		    	    }
-		    	},1000);
-		    })
-		});
+	// if(document.URL.indexOf('index.htm') >= 0 && _role == 0){
+	// 	HZRecorder.get(function(rec) {
+	// 	    var seconds = 0;
+	// 	    $('.tip').show();
+	// 	    $('.start-btn').click(function(){
+	// 	    	$('.tip').hide();
+	// 	    	$("#countdown").find('img').attr('src', 'img/dribbble-1.gif');
+	// 	    	var countdown = setInterval(function(){
+	// 	    	    seconds += 1;
+	// 	    	    if(seconds == 3){
+	// 	    	    	$('.record-before').hide();
+	// 	    	        clearInterval(countdown);
+	// 	    	        $("#countdown").css("display", "none");
+	// 	    	        $("#countdown").find('img').attr('src', '');
+	// 	    	        GBCodePlayBack.record_startime = new Date().getTime();
+	// 	    	        recorder = rec;
+	// 	    	        recorder.start();
+	// 	    	        GBCodePlayBack.recordinit();
+	// 	    	        timer.init($recording_time);
+	// 	    	    }
+	// 	    	},1000);
+	// 	    })
+	// 	});
-	}else{
-		$('.record-before').hide();
-		GBCodePlayBack.recordinit();
-		timer.init($recording_time);
-	}
+	// }else{
+	// 	$('.record-before').hide();
+	// 	GBCodePlayBack.recordinit();
+	// 	timer.init($recording_time);
+	// }
+	function startReacoder(){
+	    HZRecorder.get(function(rec) {
+	    	console.log('+++++++++++++++++++')
+	        recorder = rec;
+			recorder.start();
+
+			GBCodePlayBack.htmleditor.setValue('');
+			GBCodePlayBack.records = [];
+			GBCodePlayBack.record_startime = new Date().getTime();
+
+			$('#start-recording').removeClass('new-recording').addClass('recording').attr('data', '0').attr('data-original-title', '结束录制');
+			$('.recording-time').addClass('twinkle');
+			timer.init($recording_time);
+			$('.audio-play').removeClass('show').addClass('hidden');
+	    });
+	}
+	function stopReacoder(){
+		$('#start-recording').removeClass('recording').addClass('new-recording').attr('data', '1').attr('data-original-title', '重新录制');
+		$('.recording-time').removeClass('twinkle');
+		timer.stopTimer();
+		$('#upload').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
+        $('#savecorde').removeClass('upload-teach').addClass('recording-finish').removeAttr('disabled').prop("disabled",false);
+        $('.audio-play').removeClass('hidden').addClass('show');
+        if (_role == 0) {
+            recorder.stop();
+            $('#upload').show();
+        }else if (_role == 1) {
+            $('#savecorde').show();
+        }
+
+	}
 	// 初始化渲染编辑页面
@@ -14,18 +14,12 @@
         var recorder = createScript.apply(context, [4096, 1, 1]);
         var audioData = {
-            size: 0 //录音文件长度
-                ,
-            buffer: [] //录音缓存
-                ,
-            inputSampleRate: context.sampleRate //输入采样率
-                ,
-            inputSampleBits: 16 //输入采样数位 8, 16
-                ,
-            outputSampleRate: config.sampleRate //输出采样率
-                ,
-            oututSampleBits: config.sampleBits //输出采样数位 8, 16
-                ,
+            size: 0,   //录音文件长度
+            buffer: [],  //录音缓存
+            inputSampleRate: context.sampleRate, //输入采样率
+            inputSampleBits: 16, //输入采样数位 8, 16
+            outputSampleRate: config.sampleRate, //输出采样率
+            oututSampleBits: config.sampleBits, //输出采样数位 8, 16
             input: function(data) {
                 this.buffer.push(new Float32Array(data));
                 this.size += data.length;
@@ -148,6 +142,7 @@
         //停止
         this.stop = function() {
+             console.log('&&&&&&&&&&&&');
             recorder.disconnect();
         }
@@ -157,6 +152,11 @@
             return audioData.encodeWAV();
         }
+        // 获取音频文件
+        this.getBlobData = function(){
+            return audioData.encodeWAV();
+        }
+
         //回放
         this.play = function(audio) {
             console.log(window.URL.createObjectURL(this.getBlob()))
@@ -128,7 +128,6 @@
                 </div>
             </div>
         </div>
-
         <div class="play-bar">
             <button id="playrecord" data-status='0' title="播放">
                 <i class="icon iconfont icon-play"></i>