添加录制暂停功能

ykxie
1 parent 7f1d0a06
Showing 8 changed files with 200 additions and 166 deletions
src/css/recording.css
src/css/recording1.css
src/index.html
src/js/audioPlayer/jQuery.AudioPlayer.js
src/js/gbreplayer.js
src/player.html
src/scss/recording.scss
src/scss/recording1.scss
@@ -469,6 +469,8 @@ button {
       background-color: transparent;
       border: 1px solid #1FB6FF;
       color: #1FB6FF; }
+  .recording-ctrl-bar .pause-recording {
+    color: #FFF; }
 .pause-shodow {
   position: absolute;
@@ -156,6 +156,8 @@ a:hover, a:focus {
     height: 48px;
     margin: 16px 0;
     background-color: #979797; }
+  .recording-ctrl-bar .pause-recording {
+    color: #FFF; }
 .recording-audio {
   position: fixed;
@@ -125,6 +125,10 @@
                             <p id="replay">预览录制</p>
                         </div>
                         <div class="btn-group pull-right" id="comprunbtngrp"></div>
+                        <div class="btn-group pull-right" id="fontendrun">
+                            <button id="runnow" type="button" class="btn btn-default" title="手动运行代码" data-placement="bottom" disabled="disabled"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;运行</button>
+                            <button id="autorun" type="button" class="btn btn-primary" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"><span class="glyphicon glyphicon-retweet"></span></button>      
+                        </div>
                     </div>
                     <div class="panel-body hidden" id="cmprun-output">
                         <div id="resultoutput">
@@ -159,6 +163,10 @@
     <div class="recording-ctrl-bar">
         <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button>
         <button id="re-recoding" class="btn new-recording" type="button" data="1" title="重新录制" style="display: none;"></button>
+        <button class="btn pause-recording" id="pause-recording" data-recording='0' title="暂停录制">
+            <i class="icon iconfont icon-playcopy"></i>
+        </button>
+
         <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中">
             <img src="img/pause.svg" alt="">
         </button>
 /**
- * jQuery音频播放
- * @Author syantao
- * v1.0.1
+ * jQuery.AudioPlayer.js
+ * @Author Keystion
+ * @Version 1.0.1
  * Created by Keystion on 2016-12-19
- * @param  {[type]} jQuery [description]
+ * Update on 2017-01-06
  */
 ;(function(jQuery){
     "use strict";
     var AudioPlayer = {
         options: {
-            debuggers: false,           // 是否开启播放记录
-            container: 'body',               // 把组件塞到什么地方
-            source: '',                 // 音频源文件
-            imagePath: './image',                 // 音频源文件
-            seekNum: 0,                 // 拖拽是判断之前是否播放
-            allowSeek: true,            // 是否可以拖拽
-            canplayCallback: null,      // 可以播放之后，做某些事情
-            playCallback: null,         // 播放之后，做某些事情
-            pauseCallback: null,        // 暂停之后，做某些事情
-            timeupdateCallback: null,   // 拖动之后，做某些事情
-            endedCallback: null,        // 播放结束之后，做某些事情
-            mutedCallback: null,        // 静音之后，做某些事情
-            template: $('<div id="componentWrapper">' +
+            // open console log / 打开控制台日志
+            debuggers: false
+            // container, default 'body' / 组件要放到什么地方，默认'body'
+            ,container: 'body'
+            // audio source / 音频源
+            ,source: ''
+            // 音频源文件 / image resources
+            ,imagePath: './image'
+            // Determines whether or not the player is playing before dragging/判断拖拽之前是否正在播放
+            ,seekNum: 0
+            // Whether can drag and drop / 是否可以拖拽
+            ,allowSeek: true
+            // After can play TODO / 可以播放之后，做某些事情
+            ,canplayCallback: null
+            // After playback TODO / 播放之后，做某些事情
+            ,playCallback: null
+            // After the suspension TODO / 暂停之后，做某些事情
+            ,pauseCallback: null
+            // After the drag TODO / 拖动之后，做某些事情
+            ,timeupdateCallback: null
+            // End of the play TODO / 播放结束之后，做某些事情
+            ,endedCallback: null
+            // After the mute TODO / 静音之后，做某些事情
+            ,mutedCallback: null
+            // template dom / 模板节点
+            ,template: $('<div id="componentWrapper">' +
                 '<audio id="audio-element" style="display: none;">您的浏览器不支持 audio 标签。</audio>' +
                 '<div class="controls_toggle"><img src="" alt="controls_toggle" /></div>' +
                 '<div class="player_mediaTime_current">00:00</div>' +
@@ -45,9 +58,11 @@
                 '</div>' +
                 '</div>' +
                 '</div>')
-        },
-        elements: {},
-        init: function(options) {
+        }
+        // elements
+        ,elements: {}
+        // initialize
+        ,init: function(options) {
             var _this = this;
             if (!options || !options.container) {
                 return false;
@@ -56,29 +71,30 @@
             // audio DOM
             _this.elements.audioDom = _this.options.template.find('audio')[0];
-            // 播放按钮
+            _this.elements.componentWrapper = _this.options.template.find('#componentWrapper');
+            // Play button / 播放按钮
             _this.elements.playButton = _this.options.template.find('.controls_toggle');
-            // 当前时间
+            // The current time / 当前时间
             _this.elements.currentTime = _this.options.template.find('.player_mediaTime_current');
-            // 总时长
+            // The total length / 总时长
             _this.elements.totalTime = _this.options.template.find('.player_mediaTime_total');
-            // 加载进度条
+            // Loading progress bar / 加载进度条
             _this.elements.loadProgress = _this.options.template.find('.load_progress');
-            // 播放进度条
+            // Playback progress bar / 播放进度条
             _this.elements.playProgress = _this.options.template.find('.play_progress');
-            // 播放进度条wrap
+            // Playback progress bar wrap / 播放进度条wrap
             _this.elements.playProgressWrap = _this.options.template.find('.player_progress');
-            // 播放进度条总长
+            // The total length of playback progress bar / 播放进度条总长
             _this.elements.totalPlayProgress = _this.options.template.find('.progress_bg');
-            // 静音按钮
+            // Mute button / 静音按钮
             _this.elements.mutedButton = _this.options.template.find('.player_volume');
-            // 音量大小wrap
+            // The volume size wrap / 音量大小wrap
             _this.elements.volumeWrap = _this.options.template.find('.volume_seekbar');
-            // 音量总长
+            // The volume chief / 音量总长
             _this.elements.totalVolume = _this.options.template.find('.volume_bg');
-            // 当前音量
+            // The current volume / 当前音量
             _this.elements.currentVolume = _this.options.template.find('.volume_level');
-            // 音量提示条
+            // The tooltips of the volume / 音量提示条
             _this.elements.tipsVolume = _this.options.template.find('.player_volume_tooltip');
             $(_this.options.container).append(_this.options.template);
@@ -86,32 +102,42 @@
             _this.elements.mutedButton.find('img').attr('src', _this.options.imagePath + '/volume.png');
             if(options.source){
-                _this.updateSource({source: options.source, callback: function(){ _this.log('update source') }});
+                _this.updateSource({source: options.source, callback: function(){ _this.log('The audio source has been updated') }});
             }
             _this.elements.currentVolume.width((60 / 100 * _this.elements.audioDom.volume * 100) + 'px');
-            // 初始化话事件
+            // Initialize the event / 初始化事件
             _this.events();
-        },
-        // 更新音频源
-        updateSource: function(o){
+        }
+        // Update the audio source foo. / 更新音频源
+        ,updateSource: function(o){
             var _this = this;
-            // 重置
+            // reset
             _this.reset();
-            // 更新音频来源
+            // Update the audio source / 更新音频源
             _this.elements.audioDom.setAttribute('src', o.source);
+            // callback
             if(typeof o.callback == 'function'){
                 o.callback();
             }
-        },
-        // dom 绑定事件
-        events: function() {
+        }
+        // dom events
+        ,events: function() {
             var _this = this;
-            // 调节声音大小
+            // Monitor window changes to do some of the UI update / 监听窗口的变化做一些UI的更新
+            $(window).resize(function(event) {
+
+                // Update the width of the download progress bar / 更新下载进度条的宽度
+                _this.setLoadProgressWidth();
+                // Update the playback progress bar width / 更新播放进度条的宽度
+                _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
+            });
+
+            // Adjust the size of sound / 调节声音大小
             _this.elements.volumeWrap.on("mouseenter", function(event) {
                 event.preventDefault();
             }).on("mouseleave", function(event) {
@@ -143,7 +169,8 @@
                 _this.muted();
             });
-            // 播放进度条
+            // Playback progress bar drag and drop events / 播放进度条拖拽事件
+            // To determine whether to allow drag and drop / 判断是否允许拖拽
             if(_this.options.allowSeek){
                 _this.elements.playProgressWrap.on('mousedown', function(event) {
                     event.preventDefault();
@@ -153,15 +180,17 @@
                         _this.options.seekNum = 2;
                         _this.pause();
                     }
-                    // 鼠标按下就更新进度条
+                    // The mouse click will update the progress bar / 鼠标按下就更新进度条
                     _this.setPlayProgressWidth(event);
                 }).on('mousemove', function(event) {
                     event.preventDefault();
-                    // 判断是否已经开始移动 才会设置进度条
+                    // Determine whether have begun to move will set the progress bar / 判断是否已经开始移动 才会设置进度条
                     _this.options.seekNum != 0 && _this.setPlayProgressWidth(event);
                 }).on('mouseup', function(event) {
                     event.preventDefault();
-                    // TODO 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
+                    // TODO 
+                    // Is it necessary to when the mouse button to lift again to update the playback progress bar width
+                    // 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
                     // _this.setPlayProgressWidth(event);
                     if (_this.options.seekNum == 1) {
                         _this.pause();
@@ -185,7 +214,7 @@
                 })
             }
-            // 播放暂停
+            // Click event broadcast suspended / 播放暂停点击事件
             _this.elements.playButton.on('click', function(event) {
                 event.preventDefault();
                 _this.toggleplay({
@@ -194,17 +223,17 @@
                 });
             })
-            // 当音频的加载已放弃时
+            // When audio load has abandoned / 当音频的加载已放弃时
             _this.elements.audioDom.onabort = function() {
                 _this.log('onabort');
                 _this.reset();
             }
-            // 当浏览器可以播放音频时
+            // When the browser can play audio / 当浏览器可以播放音频时
             _this.elements.audioDom.oncanplay = function() {
                 _this.log('oncanplay');
-                // 判断音频加载完毕
+                // Determine the audio to load / 判断音频加载完毕
                 if (_this.elements.audioDom.readyState == 4) {
                     var duration = Math.round(_this.elements.audioDom.duration);
                     var minutes = Math.floor(duration / 60);
@@ -219,31 +248,31 @@
                 }
             }
-            // 当浏览器正在下载音频时
+            // When the browser is downloading audio / 当浏览器正在下载音频时
             _this.elements.audioDom.onprogress = function() {
                 if (_this.elements.audioDom.readyState == 4) {
                     _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
                 }
             };
-            // 当浏览器开始查找音频时
+            // When the browser begins searching for the audio / 当浏览器开始查找音频时
             _this.elements.audioDom.onloadstart = function() {
                 _this.log('onloadstart');
             }
-            // 当音频已开始或不再暂停时
+            // When the audio has begun or is no longer suspended / 当音频已开始或不再暂停时
             _this.elements.audioDom.onplay = function() {
                 _this.log('onplay');
                 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/pause.png');
             }
-            // 当音频已暂停时
+            // When the audio has been suspended / 当音频已暂停时
             _this.elements.audioDom.onpause = function() {
                 _this.log('onpause');
                 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
             }
-            // 当目前的播放列表已结束时
+            // When the current playlist has ended / 当目前的播放列表已结束时
             _this.elements.audioDom.onended = function() {
                 _this.log('onended');
@@ -252,39 +281,43 @@
                 }
             }
+            // When the user starts moving/jump to the new location in the audio
             // 当用户开始移动/跳跃到音频中的新位置时
             _this.elements.audioDom.onseeking = function() {
                 _this.log('onseeking');
             }
+            // When the user has mobile/jump to the new location in the audio
             // 当用户已移动/跳跃到音频中的新位置时
             _this.elements.audioDom.onseeked = function() {
                 _this.log('onseeked');
             }
+            // When the current playback position has changed
             // 当目前的播放位置已更改时
             _this.elements.audioDom.ontimeupdate = function() {
                 _this.log('ontimeupdate');
                 _this.timeupdate();
             }
+            // When the volume is changed
             // 当音量已更改时
             _this.elements.audioDom.onvolumechange = function() {
                 _this.log('onvolumechange');
                 _this.setvolume();
             }
-        },
-        // 切换播放/暂停
-        toggleplay: function(o) {
+        }
+        // Toggle play/pause 切换播放/暂停
+        ,toggleplay: function(o) {
             var _this = this;
             if (_this.elements.audioDom.paused) {
                 _this.play(o.playCallback);
             } else {
                 _this.pause(o.pauseCallback);
             }
-        },
-        // 设置播放
-        play: function(o) {
+        }
+        // Set the playback / 设置播放
+        ,play: function(o) {
             var _this = this;
             _this.elements.audioDom.play();
             if (typeof o == 'function') {
@@ -294,9 +327,9 @@
             if(typeof _this.options.playCallback == 'function'){
                 _this.options.playCallback({'status': _this.elements.audioDom.play});
             }
-        },
-        // 设置暂停
-        pause: function(o) {
+        }
+        // Set the suspend / 设置暂停
+        ,pause: function(o) {
             var _this = this;
             _this.elements.audioDom.pause();
             if (typeof o == 'function') {
@@ -306,9 +339,9 @@
             if(typeof _this.options.pauseCallback == 'function'){
                 _this.options.pauseCallback({'status': _this.elements.audioDom.play});
             }
-        },
-        // 设置静音否
-        muted: function(o) {
+        }
+        // muted / 设置静音否
+        ,muted: function(o) {
             var _this = this;
             if (_this.elements.audioDom.muted) {
                 _this.elements.audioDom.muted = false;
@@ -321,9 +354,9 @@
             if(typeof _this.options.mutedCallback == 'function'){
                 _this.options.mutedCallback({'status': _this.elements.audioDom.muted});
             }
-        },
-        // 设置声音大小
-        setvolume: function(options) {
+        }
+        // Set the sound size / 设置声音大小
+        ,setvolume: function(options) {
             var _this = this;
             if (!options) {
                 _this.elements.currentVolume.width((_this.elements.totalVolume.width() / 100 * _this.elements.audioDom.volume * 100) + 'px');
@@ -331,14 +364,15 @@
                 if (options.event) {
                     return _this.elements.audioDom.volume = _this.sumVolume(options.event) / 100;
                 } else {
-                    // _this.log 需要优化
+                    // TODO _this.log 
+                    // Need to optimize / 需要优化
                     _this.options.debuggers && console.error('缺少参数：options.event');
                     return false;
                 }
             }
-        },
-        // 设置播放进度条
-        setPlayProgressWidth: function(argument) {
+        }
+        // Set the playback progress bar / 设置播放进度条
+        ,setPlayProgressWidth: function(argument) {
             var _this = this;
             if (!argument) {
                 return false;
@@ -350,9 +384,20 @@
                 _this.elements.playProgress.width(argument.clientX - _this.elements.playProgressWrap.offset().left);
                 _this.elements.audioDom.currentTime = (argument.clientX - _this.elements.playProgressWrap.offset().left) / _this.elements.totalPlayProgress.width() * _this.elements.audioDom.duration;
             // }
-        },
-        // 播放时间更改
-        timeupdate: function() {
+        }
+        // Set the width of the download progress bar / 设置下载进度条的宽度
+        ,setLoadProgressWidth: function(){
+            var _this = this;
+
+            // The audio of the ready state / 音频的就绪状态
+            // More docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
+            // TODO Add other state
+            if (_this.elements.audioDom.readyState == 4) {
+                _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
+            }
+        }
+        // Playing time change foo. / 播放时间更改
+        ,timeupdate: function() {
             var _this = this;
             var currTime = Math.floor(_this.elements.audioDom.currentTime).toString();
@@ -366,9 +411,9 @@
                 _this.elements.totalTime.html(_this.formatTime(duration));
             }
             _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
-        },
-        // 格式化时间戳相关
-        formatTime: function(secs, format) {
+        }
+        // Formatting a timestamp / 格式化时间戳相关
+        ,formatTime: function(secs, format) {
             var hr = Math.floor(secs / 3600);
             var min = Math.floor((secs - (hr * 3600)) / 60);
             var sec = Math.floor(secs - (hr * 3600) - (min * 60));
@@ -381,9 +426,9 @@
             }
             return min + ':' + sec;
-        },
-        // 计算音量
-        sumVolume: function(event) {
+        }
+        // To calculate the volume / 计算音量
+        ,sumVolume: function(event) {
             var _this = this;
             if (!event) {
                 return false;
@@ -392,20 +437,26 @@
             num = Math.max(0, Math.min(1, num / _this.elements.totalVolume.width()));
             num = parseInt(100 * num, 10);
             return num;
-        },
-        // 重置函数
-        reset: function(){
+        }
+        // reset / 重置函数
+        ,reset: function(){
             var _this = this;
-            // 播放按钮 当前播放时间 总时间 音量 播放进度条 下载进度条
+            // The play button to return to the initial state / 播放按钮回到初始状态
             _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
+            // The current playback time back to the initial state / 当前播放时间回到初始状态
             _this.elements.currentTime.html('00:00');
+            // Total time to return to the initialization state / 总时间回到初始化状态
             _this.elements.totalTime.html('00:00');
+            // The volume back to initialize the state / 音量回到初始化状态
             _this.elements.currentVolume.width(_this.elements.totalVolume);
+            // Playback progress bar to initialize state / 播放进度条回到初始化状态
             _this.elements.playProgress.width(0);
+            // Audio download progress bar back to the initial state / 音频下载进度条回到初始状态
             _this.elements.loadProgress.width(0);
-        },
-        log: function(log){
+        }
+        // Custom log / 定制log
+        ,log: function(log){
             var _this = this;
             if(_this.options.debuggers){
@@ -547,6 +547,7 @@ $(function(){
 			// 播放录制代码过程
 			$('.audio-play').unbind('click').click(function(){	
+				GBCodePlayBack.htmlplayereditor.setValue('');
 				Hourglass.init();
 				var resultData = {
 					output: '',
@@ -577,7 +578,6 @@ $(function(){
 				}
 				GBCodePlayBack.recordtimeoutcontrolls = [];
 			    /* END 初始化播放 */
-			    GBCodePlayBack.htmlplayereditor.setValue('');
 			    playbtn.data('status', 0);
 			    $('#play').trigger('click');
@@ -1011,7 +1011,7 @@ $(function(){
 					$('#runnow').prop('disabled',true).toggleClass('btn-success').toggleClass('btn-default');
 				}
-				$this.data('autorun', (autorun)?0:1);
+				$this.data('autorun', (autorun) ? 0 : 1);
 				GBCodePlayBack.autorun = !GBCodePlayBack.autorun;
 				$('#runnow').trigger('click');
@@ -1394,16 +1394,18 @@ $(function(){
 			}
 			var pausetatus = $('#pause').data('status');
+			var recordStatus = $('#pause-recording').data('recording');
 			console.log(pausetatus);
 			if(_role == 0 && pausetatus == 1){
-				
 				intervaltime = (currenttime - GBCodePlayBack.record_continue_time) + (GBCodePlayBack.record_pause_time - GBCodePlayBack.record_startime);
-
 				$('#pause').data('status', '0');
-				
-				console.log('--------------开始录制代码===================')
+			}
+
+			if(_role == 0 && recordStatus == 1){
+				intervaltime = (currenttime - GBCodePlayBack.record_continue_time) + (GBCodePlayBack.record_pause_time - GBCodePlayBack.record_startime);
+				$('#pause-recording').data('recording', '0');
 			}
@@ -1600,12 +1602,23 @@ $(function(){
 	    }
 	})
+	// 暂停录制
+	$("#pause-recording").click(function(){
+		
+		var status = $("#pause-recording").data('recording');
+		recordStatus(status);
+		recorder.pause();
+		Hourglass.pauseTimer();
+
+	})
+
+
 	$('#re-recoding').click(function(){
 		$('.re-tips').show();
 	})
 	$('#re-sure').click(function(){
-		initRecoding()
+		initRecoding();
 		$('#start-recording').trigger('click');
 	})
@@ -1613,7 +1626,18 @@ $(function(){
 		$(".re-tips").hide();
 	})
-
+	// 录制暂停样式
+	function recordStatus(status){
+		if (status == 0) {
+			$("#pause-recording").find('i').removeClass('icon-playcopy').addClass('icon-play');
+			$("#pause-recording").data('recording', '1').attr('data-original-title', '继续录制');
+			GBCodePlayBack.record_pause_time = new Date().getTime();	// 暂停的时刻
+		}else{
+			$("#pause-recording").find('i').removeClass('icon-play').addClass('icon-playcopy');
+			$("#pause-recording").attr('data-original-title', '暂停录制');
+			GBCodePlayBack.record_continue_time = new Date().getTime();		// 继续编译的时刻
+		}
+	}
 	// 初始化页面
 	function initRecoding(){
@@ -1668,41 +1692,10 @@ $(function(){
 		}
 	}
-
-
-	// 播放页面-结束播放事件
-	// if (document.URL.indexOf('player.html') >= 0) {
-	// 	var play_audio = document.getElementById('play_audio');
-	// 	play_audio.addEventListener("ended", function() {
-	// 		console.log(GBCodePlayBack.records)
-	// 		console.log('结束播放')
-	// 	    $('#play').hide();
-	// 	    $('#playrecord').show();
-	// 	    if (_role == 0) {
-	// 	        $.ajax({
-	// 	            type: "PUT",
-	// 	            url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
-	// 	            success: function(data){
-	// 	            },
-	// 	            error: function(){
-	// 	                console.log('')
-	// 	            }
-	// 	        });
-	// 	    }
-		        
-	//         GBCodePlayBack.triggertotal = 0;
-
-	//         /* 初始化播放 */
-	//         for (var i = 0; i < GBCodePlayBack.records.length; i++) {
-	//     	     GBCodePlayBack.records[i].trigger = 0;
-	//     	 }
-
-	//         for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
-	//             clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
-	//         }
-
-	// 	}, false);
-	// }
+	// 前端手动运行
+	$('#handleRun').click(function(){
+		console.log("手动运行")
+	})
 	// 开始录制
@@ -1780,7 +1773,7 @@ $(function(){
 	// 判断是否需要有服务端编译
 	function compileMode(langid){
 		if(langid==0 || langid==35){
-			$('#comprunbtngrp').html('<button id="runnow" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>');
+			// $('#comprunbtngrp').html('<button id="handleRun" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>');
 		}else{
 			$('#fontendrun').addClass('hidden');
 			$('#comprunbtngrp').html('<button id="comprun" type="button" data-style="expand-right" class="btn" title="编译并运行代码">&nbsp;编译&运行</button>');
@@ -92,6 +92,10 @@
                             </div>
                             <div class="btn-group pull-right" id="comprunbtngrp"></div>
+                            <div class="btn-group pull-right" id="fontendrun">
+                                <button id="runnow" type="button" class="btn btn-default" title="手动运行代码" data-placement="bottom" disabled="disabled"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;运行</button>
+                                <button id="autorun" type="button" class="btn btn-primary" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"><span class="glyphicon glyphicon-retweet"></span></button>      
+                            </div>
                             <div class="clearfix"></div>
                         </div>
@@ -613,6 +613,9 @@ button{
             color: #1FB6FF;
         }
     }
+    .pause-recording{
+        color: #FFF;
+    }
 }
 .pause-shodow{
@@ -217,38 +217,9 @@ a:hover, a:focus{
         margin: 16px 0;
         background-color: #979797;
     }
-    // .save-wrap{
-    //     position: absolute;
-    //     right: 90px;
-    //     line-height: 80px;
-
-    //     input{
-    //         display: inline-block;
-    //         width: 80px;
-    //         height: 30px;
-    //         line-height: 30px;
-    //         text-align: center;
-    //         border-radius: 15px;
-    //         color: #FFF;
-    //         cursor: pointer;
-    //     }
-    //     .upload-teach, .upload-stud{
-    //         background-color: rgba(255, 255, 255, 0.2)
-    //     }
-    //     .recording-finish{
-    //         background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
-    //         background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
-    //     }
-    //     #upload{
-    //     }
-    //     #savecorde{
-    //     }
-    //     #cancel{
-    //         background-color: transparent;
-    //         border: 1px solid #1FB6FF;
-    //         color: #1FB6FF;
-    //     }
-    // }
+    .pause-recording{
+        color: #FFF;
+    }
 }
 .recording-audio{