梁美英 / programming · Commits

Commit ef0ef3cb5958d820b5d7287c36479bd5a5c74060

Authored by ykxie
1 parent 7f1d0a06

添加录制暂停功能

Inline Side-by-side
Showing 8 changed files with 200 additions and 166 deletions
src/css/recording.css
  View file @ef0ef3c
... ... @@ -469,6 +469,8 @@ button {
469 469 background-color: transparent;
470 470 border: 1px solid #1FB6FF;
471 471 color: #1FB6FF; }
  472 + .recording-ctrl-bar .pause-recording {
  473 + color: #FFF; }
472 474  
473 475 .pause-shodow {
474 476 position: absolute;
... ...
src/css/recording1.css
  View file @ef0ef3c
... ... @@ -156,6 +156,8 @@ a:hover, a:focus {
156 156 height: 48px;
157 157 margin: 16px 0;
158 158 background-color: #979797; }
  159 + .recording-ctrl-bar .pause-recording {
  160 + color: #FFF; }
159 161  
160 162 .recording-audio {
161 163 position: fixed;
... ...
src/index.html
  View file @ef0ef3c
... ... @@ -125,6 +125,10 @@
125 125 <p id="replay">预览录制</p>
126 126 </div>
127 127 <div class="btn-group pull-right" id="comprunbtngrp"></div>
  128 + <div class="btn-group pull-right" id="fontendrun">
  129 + <button id="runnow" type="button" class="btn btn-default" title="手动运行代码" data-placement="bottom" disabled="disabled"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;运行</button>
  130 + <button id="autorun" type="button" class="btn btn-primary" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"><span class="glyphicon glyphicon-retweet"></span></button>
  131 + </div>
128 132 </div>
129 133 <div class="panel-body hidden" id="cmprun-output">
130 134 <div id="resultoutput">
... ... @@ -159,6 +163,10 @@
159 163 <div class="recording-ctrl-bar">
160 164 <button id="start-recording" class="btn new-recording" type="button" data="1" title="开始录制"></button>
161 165 <button id="re-recoding" class="btn new-recording" type="button" data="1" title="重新录制" style="display: none;"></button>
  166 + <button class="btn pause-recording" id="pause-recording" data-recording='0' title="暂停录制">
  167 + <i class="icon iconfont icon-playcopy"></i>
  168 + </button>
  169 +
162 170 <button class="btn pause-recording hidden" id="pause" data-status='0' title="录制暂停中">
163 171 <img src="img/pause.svg" alt="">
164 172 </button>
... ...
src/js/audioPlayer/jQuery.AudioPlayer.js
  View file @ef0ef3c
1 1 /**
2   - * jQuery音频播放
3   - * @Author syantao
4   - * v1.0.1
  2 + * jQuery.AudioPlayer.js
  3 + * @Author Keystion
  4 + * @Version 1.0.1
5 5 * Created by Keystion on 2016-12-19
6   - * @param {[type]} jQuery [description]
  6 + * Update on 2017-01-06
7 7 */
8 8 ;(function(jQuery){
9 9 "use strict";
10 10 var AudioPlayer = {
11 11 options: {
12   - debuggers: false, // 是否开启播放记录
13   - container: 'body', // 把组件塞到什么地方
14   - source: '', // 音频源文件
15   - imagePath: './image', // 音频源文件
16   - seekNum: 0, // 拖拽是判断之前是否播放
17   - allowSeek: true, // 是否可以拖拽
18   - canplayCallback: null, // 可以播放之后，做某些事情
19   - playCallback: null, // 播放之后，做某些事情
20   - pauseCallback: null, // 暂停之后，做某些事情
21   - timeupdateCallback: null, // 拖动之后，做某些事情
22   - endedCallback: null, // 播放结束之后，做某些事情
23   - mutedCallback: null, // 静音之后，做某些事情
24   - template: $('<div id="componentWrapper">' +
  12 + // open console log / 打开控制台日志
  13 + debuggers: false
  14 + // container, default 'body' / 组件要放到什么地方，默认'body'
  15 + ,container: 'body'
  16 + // audio source / 音频源
  17 + ,source: ''
  18 + // 音频源文件 / image resources
  19 + ,imagePath: './image'
  20 + // Determines whether or not the player is playing before dragging/判断拖拽之前是否正在播放
  21 + ,seekNum: 0
  22 + // Whether can drag and drop / 是否可以拖拽
  23 + ,allowSeek: true
  24 + // After can play TODO / 可以播放之后，做某些事情
  25 + ,canplayCallback: null
  26 + // After playback TODO / 播放之后，做某些事情
  27 + ,playCallback: null
  28 + // After the suspension TODO / 暂停之后，做某些事情
  29 + ,pauseCallback: null
  30 + // After the drag TODO / 拖动之后，做某些事情
  31 + ,timeupdateCallback: null
  32 + // End of the play TODO / 播放结束之后，做某些事情
  33 + ,endedCallback: null
  34 + // After the mute TODO / 静音之后，做某些事情
  35 + ,mutedCallback: null
  36 + // template dom / 模板节点
  37 + ,template: $('<div id="componentWrapper">' +
25 38 '<audio id="audio-element" style="display: none;">您的浏览器不支持 audio 标签。</audio>' +
26 39 '<div class="controls_toggle"><img src="" alt="controls_toggle" /></div>' +
27 40 '<div class="player_mediaTime_current">00:00</div>' +
... ... @@ -45,9 +58,11 @@
45 58 '</div>' +
46 59 '</div>' +
47 60 '</div>')
48   - },
49   - elements: {},
50   - init: function(options) {
  61 + }
  62 + // elements
  63 + ,elements: {}
  64 + // initialize
  65 + ,init: function(options) {
51 66 var _this = this;
52 67 if (!options || !options.container) {
53 68 return false;
... ... @@ -56,29 +71,30 @@
56 71  
57 72 // audio DOM
58 73 _this.elements.audioDom = _this.options.template.find('audio')[0];
59   - // 播放按钮
  74 + _this.elements.componentWrapper = _this.options.template.find('#componentWrapper');
  75 + // Play button / 播放按钮
60 76 _this.elements.playButton = _this.options.template.find('.controls_toggle');
61   - // 当前时间
  77 + // The current time / 当前时间
62 78 _this.elements.currentTime = _this.options.template.find('.player_mediaTime_current');
63   - // 总时长
  79 + // The total length / 总时长
64 80 _this.elements.totalTime = _this.options.template.find('.player_mediaTime_total');
65   - // 加载进度条
  81 + // Loading progress bar / 加载进度条
66 82 _this.elements.loadProgress = _this.options.template.find('.load_progress');
67   - // 播放进度条
  83 + // Playback progress bar / 播放进度条
68 84 _this.elements.playProgress = _this.options.template.find('.play_progress');
69   - // 播放进度条wrap
  85 + // Playback progress bar wrap / 播放进度条wrap
70 86 _this.elements.playProgressWrap = _this.options.template.find('.player_progress');
71   - // 播放进度条总长
  87 + // The total length of playback progress bar / 播放进度条总长
72 88 _this.elements.totalPlayProgress = _this.options.template.find('.progress_bg');
73   - // 静音按钮
  89 + // Mute button / 静音按钮
74 90 _this.elements.mutedButton = _this.options.template.find('.player_volume');
75   - // 音量大小wrap
  91 + // The volume size wrap / 音量大小wrap
76 92 _this.elements.volumeWrap = _this.options.template.find('.volume_seekbar');
77   - // 音量总长
  93 + // The volume chief / 音量总长
78 94 _this.elements.totalVolume = _this.options.template.find('.volume_bg');
79   - // 当前音量
  95 + // The current volume / 当前音量
80 96 _this.elements.currentVolume = _this.options.template.find('.volume_level');
81   - // 音量提示条
  97 + // The tooltips of the volume / 音量提示条
82 98 _this.elements.tipsVolume = _this.options.template.find('.player_volume_tooltip');
83 99 $(_this.options.container).append(_this.options.template);
84 100  
... ... @@ -86,32 +102,42 @@
86 102 _this.elements.mutedButton.find('img').attr('src', _this.options.imagePath + '/volume.png');
87 103  
88 104 if(options.source){
89   - _this.updateSource({source: options.source, callback: function(){ _this.log('update source') }});
  105 + _this.updateSource({source: options.source, callback: function(){ _this.log('The audio source has been updated') }});
90 106 }
91 107  
92 108 _this.elements.currentVolume.width((60 / 100 * _this.elements.audioDom.volume * 100) + 'px');
93 109  
94   - // 初始化话事件
  110 + // Initialize the event / 初始化事件
95 111 _this.events();
96   - },
97   - // 更新音频源
98   - updateSource: function(o){
  112 + }
  113 + // Update the audio source foo. / 更新音频源
  114 + ,updateSource: function(o){
99 115 var _this = this;
100   - // 重置
  116 + // reset
101 117 _this.reset();
102 118  
103   - // 更新音频来源
  119 + // Update the audio source / 更新音频源
104 120 _this.elements.audioDom.setAttribute('src', o.source);
105 121  
  122 + // callback
106 123 if(typeof o.callback == 'function'){
107 124 o.callback();
108 125 }
109   - },
110   - // dom 绑定事件
111   - events: function() {
  126 + }
  127 + // dom events
  128 + ,events: function() {
112 129 var _this = this;
113 130  
114   - // 调节声音大小
  131 + // Monitor window changes to do some of the UI update / 监听窗口的变化做一些UI的更新
  132 + $(window).resize(function(event) {
  133 +
  134 + // Update the width of the download progress bar / 更新下载进度条的宽度
  135 + _this.setLoadProgressWidth();
  136 + // Update the playback progress bar width / 更新播放进度条的宽度
  137 + _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
  138 + });
  139 +
  140 + // Adjust the size of sound / 调节声音大小
115 141 _this.elements.volumeWrap.on("mouseenter", function(event) {
116 142 event.preventDefault();
117 143 }).on("mouseleave", function(event) {
... ... @@ -143,7 +169,8 @@
143 169 _this.muted();
144 170 });
145 171  
146   - // 播放进度条
  172 + // Playback progress bar drag and drop events / 播放进度条拖拽事件
  173 + // To determine whether to allow drag and drop / 判断是否允许拖拽
147 174 if(_this.options.allowSeek){
148 175 _this.elements.playProgressWrap.on('mousedown', function(event) {
149 176 event.preventDefault();
... ... @@ -153,15 +180,17 @@
153 180 _this.options.seekNum = 2;
154 181 _this.pause();
155 182 }
156   - // 鼠标按下就更新进度条
  183 + // The mouse click will update the progress bar / 鼠标按下就更新进度条
157 184 _this.setPlayProgressWidth(event);
158 185 }).on('mousemove', function(event) {
159 186 event.preventDefault();
160   - // 判断是否已经开始移动 才会设置进度条
  187 + // Determine whether have begun to move will set the progress bar / 判断是否已经开始移动 才会设置进度条
161 188 _this.options.seekNum != 0 && _this.setPlayProgressWidth(event);
162 189 }).on('mouseup', function(event) {
163 190 event.preventDefault();
164   - // TODO 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
  191 + // TODO
  192 + // Is it necessary to when the mouse button to lift again to update the playback progress bar width
  193 + // 是否有必要在鼠标按键抬起的时候再次去更新播放进度条宽度
165 194 // _this.setPlayProgressWidth(event);
166 195 if (_this.options.seekNum == 1) {
167 196 _this.pause();
... ... @@ -185,7 +214,7 @@
185 214 })
186 215 }
187 216  
188   - // 播放暂停
  217 + // Click event broadcast suspended / 播放暂停点击事件
189 218 _this.elements.playButton.on('click', function(event) {
190 219 event.preventDefault();
191 220 _this.toggleplay({
... ... @@ -194,17 +223,17 @@
194 223 });
195 224 })
196 225  
197   - // 当音频的加载已放弃时
  226 + // When audio load has abandoned / 当音频的加载已放弃时
198 227 _this.elements.audioDom.onabort = function() {
199 228 _this.log('onabort');
200 229  
201 230 _this.reset();
202 231 }
203 232  
204   - // 当浏览器可以播放音频时
  233 + // When the browser can play audio / 当浏览器可以播放音频时
205 234 _this.elements.audioDom.oncanplay = function() {
206 235 _this.log('oncanplay');
207   - // 判断音频加载完毕
  236 + // Determine the audio to load / 判断音频加载完毕
208 237 if (_this.elements.audioDom.readyState == 4) {
209 238 var duration = Math.round(_this.elements.audioDom.duration);
210 239 var minutes = Math.floor(duration / 60);
... ... @@ -219,31 +248,31 @@
219 248 }
220 249 }
221 250  
222   - // 当浏览器正在下载音频时
  251 + // When the browser is downloading audio / 当浏览器正在下载音频时
223 252 _this.elements.audioDom.onprogress = function() {
224 253 if (_this.elements.audioDom.readyState == 4) {
225 254 _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
226 255 }
227 256 };
228 257  
229   - // 当浏览器开始查找音频时
  258 + // When the browser begins searching for the audio / 当浏览器开始查找音频时
230 259 _this.elements.audioDom.onloadstart = function() {
231 260 _this.log('onloadstart');
232 261 }
233 262  
234   - // 当音频已开始或不再暂停时
  263 + // When the audio has begun or is no longer suspended / 当音频已开始或不再暂停时
235 264 _this.elements.audioDom.onplay = function() {
236 265 _this.log('onplay');
237 266 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/pause.png');
238 267 }
239 268  
240   - // 当音频已暂停时
  269 + // When the audio has been suspended / 当音频已暂停时
241 270 _this.elements.audioDom.onpause = function() {
242 271 _this.log('onpause');
243 272 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
244 273 }
245 274  
246   - // 当目前的播放列表已结束时
  275 + // When the current playlist has ended / 当目前的播放列表已结束时
247 276 _this.elements.audioDom.onended = function() {
248 277 _this.log('onended');
249 278  
... ... @@ -252,39 +281,43 @@
252 281 }
253 282 }
254 283  
  284 + // When the user starts moving/jump to the new location in the audio
255 285 // 当用户开始移动/跳跃到音频中的新位置时
256 286 _this.elements.audioDom.onseeking = function() {
257 287 _this.log('onseeking');
258 288 }
259 289  
  290 + // When the user has mobile/jump to the new location in the audio
260 291 // 当用户已移动/跳跃到音频中的新位置时
261 292 _this.elements.audioDom.onseeked = function() {
262 293 _this.log('onseeked');
263 294 }
264 295  
  296 + // When the current playback position has changed
265 297 // 当目前的播放位置已更改时
266 298 _this.elements.audioDom.ontimeupdate = function() {
267 299 _this.log('ontimeupdate');
268 300 _this.timeupdate();
269 301 }
270 302  
  303 + // When the volume is changed
271 304 // 当音量已更改时
272 305 _this.elements.audioDom.onvolumechange = function() {
273 306 _this.log('onvolumechange');
274 307 _this.setvolume();
275 308 }
276   - },
277   - // 切换播放/暂停
278   - toggleplay: function(o) {
  309 + }
  310 + // Toggle play/pause 切换播放/暂停
  311 + ,toggleplay: function(o) {
279 312 var _this = this;
280 313 if (_this.elements.audioDom.paused) {
281 314 _this.play(o.playCallback);
282 315 } else {
283 316 _this.pause(o.pauseCallback);
284 317 }
285   - },
286   - // 设置播放
287   - play: function(o) {
  318 + }
  319 + // Set the playback / 设置播放
  320 + ,play: function(o) {
288 321 var _this = this;
289 322 _this.elements.audioDom.play();
290 323 if (typeof o == 'function') {
... ... @@ -294,9 +327,9 @@
294 327 if(typeof _this.options.playCallback == 'function'){
295 328 _this.options.playCallback({'status': _this.elements.audioDom.play});
296 329 }
297   - },
298   - // 设置暂停
299   - pause: function(o) {
  330 + }
  331 + // Set the suspend / 设置暂停
  332 + ,pause: function(o) {
300 333 var _this = this;
301 334 _this.elements.audioDom.pause();
302 335 if (typeof o == 'function') {
... ... @@ -306,9 +339,9 @@
306 339 if(typeof _this.options.pauseCallback == 'function'){
307 340 _this.options.pauseCallback({'status': _this.elements.audioDom.play});
308 341 }
309   - },
310   - // 设置静音否
311   - muted: function(o) {
  342 + }
  343 + // muted / 设置静音否
  344 + ,muted: function(o) {
312 345 var _this = this;
313 346 if (_this.elements.audioDom.muted) {
314 347 _this.elements.audioDom.muted = false;
... ... @@ -321,9 +354,9 @@
321 354 if(typeof _this.options.mutedCallback == 'function'){
322 355 _this.options.mutedCallback({'status': _this.elements.audioDom.muted});
323 356 }
324   - },
325   - // 设置声音大小
326   - setvolume: function(options) {
  357 + }
  358 + // Set the sound size / 设置声音大小
  359 + ,setvolume: function(options) {
327 360 var _this = this;
328 361 if (!options) {
329 362 _this.elements.currentVolume.width((_this.elements.totalVolume.width() / 100 * _this.elements.audioDom.volume * 100) + 'px');
... ... @@ -331,14 +364,15 @@
331 364 if (options.event) {
332 365 return _this.elements.audioDom.volume = _this.sumVolume(options.event) / 100;
333 366 } else {
334   - // _this.log 需要优化
  367 + // TODO _this.log
  368 + // Need to optimize / 需要优化
335 369 _this.options.debuggers && console.error('缺少参数：options.event');
336 370 return false;
337 371 }
338 372 }
339   - },
340   - // 设置播放进度条
341   - setPlayProgressWidth: function(argument) {
  373 + }
  374 + // Set the playback progress bar / 设置播放进度条
  375 + ,setPlayProgressWidth: function(argument) {
342 376 var _this = this;
343 377 if (!argument) {
344 378 return false;
... ... @@ -350,9 +384,20 @@
350 384 _this.elements.playProgress.width(argument.clientX - _this.elements.playProgressWrap.offset().left);
351 385 _this.elements.audioDom.currentTime = (argument.clientX - _this.elements.playProgressWrap.offset().left) / _this.elements.totalPlayProgress.width() * _this.elements.audioDom.duration;
352 386 // }
353   - },
354   - // 播放时间更改
355   - timeupdate: function() {
  387 + }
  388 + // Set the width of the download progress bar / 设置下载进度条的宽度
  389 + ,setLoadProgressWidth: function(){
  390 + var _this = this;
  391 +
  392 + // The audio of the ready state / 音频的就绪状态
  393 + // More docs: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
  394 + // TODO Add other state
  395 + if (_this.elements.audioDom.readyState == 4) {
  396 + _this.elements.loadProgress.width((_this.elements.audioDom.buffered.end(0) / _this.elements.audioDom.seekable.end(0)) * _this.elements.totalPlayProgress.width());
  397 + }
  398 + }
  399 + // Playing time change foo. / 播放时间更改
  400 + ,timeupdate: function() {
356 401 var _this = this;
357 402  
358 403 var currTime = Math.floor(_this.elements.audioDom.currentTime).toString();
... ... @@ -366,9 +411,9 @@
366 411 _this.elements.totalTime.html(_this.formatTime(duration));
367 412 }
368 413 _this.elements.playProgress.width((_this.elements.audioDom.currentTime / _this.elements.audioDom.duration) * $('.progress_bg').width());
369   - },
370   - // 格式化时间戳相关
371   - formatTime: function(secs, format) {
  414 + }
  415 + // Formatting a timestamp / 格式化时间戳相关
  416 + ,formatTime: function(secs, format) {
372 417 var hr = Math.floor(secs / 3600);
373 418 var min = Math.floor((secs - (hr * 3600)) / 60);
374 419 var sec = Math.floor(secs - (hr * 3600) - (min * 60));
... ... @@ -381,9 +426,9 @@
381 426 }
382 427  
383 428 return min + ':' + sec;
384   - },
385   - // 计算音量
386   - sumVolume: function(event) {
  429 + }
  430 + // To calculate the volume / 计算音量
  431 + ,sumVolume: function(event) {
387 432 var _this = this;
388 433 if (!event) {
389 434 return false;
... ... @@ -392,20 +437,26 @@
392 437 num = Math.max(0, Math.min(1, num / _this.elements.totalVolume.width()));
393 438 num = parseInt(100 * num, 10);
394 439 return num;
395   - },
396   - // 重置函数
397   - reset: function(){
  440 + }
  441 + // reset / 重置函数
  442 + ,reset: function(){
398 443 var _this = this;
399 444  
400   - // 播放按钮 当前播放时间 总时间 音量 播放进度条 下载进度条
  445 + // The play button to return to the initial state / 播放按钮回到初始状态
401 446 _this.elements.playButton.find('img').attr('src', _this.options.imagePath + '/play.png');
  447 + // The current playback time back to the initial state / 当前播放时间回到初始状态
402 448 _this.elements.currentTime.html('00:00');
  449 + // Total time to return to the initialization state / 总时间回到初始化状态
403 450 _this.elements.totalTime.html('00:00');
  451 + // The volume back to initialize the state / 音量回到初始化状态
404 452 _this.elements.currentVolume.width(_this.elements.totalVolume);
  453 + // Playback progress bar to initialize state / 播放进度条回到初始化状态
405 454 _this.elements.playProgress.width(0);
  455 + // Audio download progress bar back to the initial state / 音频下载进度条回到初始状态
406 456 _this.elements.loadProgress.width(0);
407   - },
408   - log: function(log){
  457 + }
  458 + // Custom log / 定制log
  459 + ,log: function(log){
409 460 var _this = this;
410 461  
411 462 if(_this.options.debuggers){
... ...
src/js/gbreplayer.js
  View file @ef0ef3c
... ... @@ -547,6 +547,7 @@ $(function(){
547 547  
548 548 // 播放录制代码过程
549 549 $('.audio-play').unbind('click').click(function(){
  550 + GBCodePlayBack.htmlplayereditor.setValue('');
550 551 Hourglass.init();
551 552 var resultData = {
552 553 output: '',
... ... @@ -577,7 +578,6 @@ $(function(){
577 578 }
578 579 GBCodePlayBack.recordtimeoutcontrolls = [];
579 580 /* END 初始化播放 */
580   - GBCodePlayBack.htmlplayereditor.setValue('');
581 581  
582 582 playbtn.data('status', 0);
583 583 $('#play').trigger('click');
... ... @@ -1011,7 +1011,7 @@ $(function(){
1011 1011 $('#runnow').prop('disabled',true).toggleClass('btn-success').toggleClass('btn-default');
1012 1012 }
1013 1013  
1014   - $this.data('autorun', (autorun)?0:1);
  1014 + $this.data('autorun', (autorun) ? 0 : 1);
1015 1015 GBCodePlayBack.autorun = !GBCodePlayBack.autorun;
1016 1016  
1017 1017 $('#runnow').trigger('click');
... ... @@ -1394,16 +1394,18 @@ $(function(){
1394 1394 }
1395 1395  
1396 1396 var pausetatus = $('#pause').data('status');
  1397 + var recordStatus = $('#pause-recording').data('recording');
1397 1398  
1398 1399 console.log(pausetatus);
1399 1400  
1400 1401 if(_role == 0 && pausetatus == 1){
1401   -
1402 1402 intervaltime = (currenttime - GBCodePlayBack.record_continue_time) + (GBCodePlayBack.record_pause_time - GBCodePlayBack.record_startime);
1403   -
1404 1403 $('#pause').data('status', '0');
1405   -
1406   - console.log('--------------开始录制代码===================')
  1404 + }
  1405 +
  1406 + if(_role == 0 && recordStatus == 1){
  1407 + intervaltime = (currenttime - GBCodePlayBack.record_continue_time) + (GBCodePlayBack.record_pause_time - GBCodePlayBack.record_startime);
  1408 + $('#pause-recording').data('recording', '0');
1407 1409 }
1408 1410  
1409 1411  
... ... @@ -1600,12 +1602,23 @@ $(function(){
1600 1602 }
1601 1603 })
1602 1604  
  1605 + // 暂停录制
  1606 + $("#pause-recording").click(function(){
  1607 +
  1608 + var status = $("#pause-recording").data('recording');
  1609 + recordStatus(status);
  1610 + recorder.pause();
  1611 + Hourglass.pauseTimer();
  1612 +
  1613 + })
  1614 +
  1615 +
1603 1616 $('#re-recoding').click(function(){
1604 1617 $('.re-tips').show();
1605 1618 })
1606 1619  
1607 1620 $('#re-sure').click(function(){
1608   - initRecoding()
  1621 + initRecoding();
1609 1622 $('#start-recording').trigger('click');
1610 1623 })
1611 1624  
... ... @@ -1613,7 +1626,18 @@ $(function(){
1613 1626 $(".re-tips").hide();
1614 1627 })
1615 1628  
1616   -
  1629 + // 录制暂停样式
  1630 + function recordStatus(status){
  1631 + if (status == 0) {
  1632 + $("#pause-recording").find('i').removeClass('icon-playcopy').addClass('icon-play');
  1633 + $("#pause-recording").data('recording', '1').attr('data-original-title', '继续录制');
  1634 + GBCodePlayBack.record_pause_time = new Date().getTime(); // 暂停的时刻
  1635 + }else{
  1636 + $("#pause-recording").find('i').removeClass('icon-play').addClass('icon-playcopy');
  1637 + $("#pause-recording").attr('data-original-title', '暂停录制');
  1638 + GBCodePlayBack.record_continue_time = new Date().getTime(); // 继续编译的时刻
  1639 + }
  1640 + }
1617 1641  
1618 1642 // 初始化页面
1619 1643 function initRecoding(){
... ... @@ -1668,41 +1692,10 @@ $(function(){
1668 1692 }
1669 1693 }
1670 1694  
1671   -
1672   -
1673   - // 播放页面-结束播放事件
1674   - // if (document.URL.indexOf('player.html') >= 0) {
1675   - // var play_audio = document.getElementById('play_audio');
1676   - // play_audio.addEventListener("ended", function() {
1677   - // console.log(GBCodePlayBack.records)
1678   - // console.log('结束播放')
1679   - // $('#play').hide();
1680   - // $('#playrecord').show();
1681   - // if (_role == 0) {
1682   - // $.ajax({
1683   - // type: "PUT",
1684   - // url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
1685   - // success: function(data){
1686   - // },
1687   - // error: function(){
1688   - // console.log('')
1689   - // }
1690   - // });
1691   - // }
1692   -
1693   - // GBCodePlayBack.triggertotal = 0;
1694   -
1695   - // /* 初始化播放 */
1696   - // for (var i = 0; i < GBCodePlayBack.records.length; i++) {
1697   - // GBCodePlayBack.records[i].trigger = 0;
1698   - // }
1699   -
1700   - // for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
1701   - // clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
1702   - // }
1703   -
1704   - // }, false);
1705   - // }
  1695 + // 前端手动运行
  1696 + $('#handleRun').click(function(){
  1697 + console.log("手动运行")
  1698 + })
1706 1699  
1707 1700  
1708 1701 // 开始录制
... ... @@ -1780,7 +1773,7 @@ $(function(){
1780 1773 // 判断是否需要有服务端编译
1781 1774 function compileMode(langid){
1782 1775 if(langid==0 || langid==35){
1783   - $('#comprunbtngrp').html('<button id="runnow" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>');
  1776 + // $('#comprunbtngrp').html('<button id="handleRun" type="button" data-style="expand-right" class="btn" title="运行代码">&nbsp; 运行</button>');
1784 1777 }else{
1785 1778 $('#fontendrun').addClass('hidden');
1786 1779 $('#comprunbtngrp').html('<button id="comprun" type="button" data-style="expand-right" class="btn" title="编译并运行代码">&nbsp;编译&运行</button>');
... ...
src/player.html
  View file @ef0ef3c
... ... @@ -92,6 +92,10 @@
92 92  
93 93 </div>
94 94 <div class="btn-group pull-right" id="comprunbtngrp"></div>
  95 + <div class="btn-group pull-right" id="fontendrun">
  96 + <button id="runnow" type="button" class="btn btn-default" title="手动运行代码" data-placement="bottom" disabled="disabled"><span class="glyphicon glyphicon-play-circle"></span>&nbsp;运行</button>
  97 + <button id="autorun" type="button" class="btn btn-primary" title="切换自动/手动运行代码" data-placement="bottom" data-autorun="1"><span class="glyphicon glyphicon-retweet"></span></button>
  98 + </div>
95 99 <div class="clearfix"></div>
96 100  
97 101 </div>
... ...
src/scss/recording.scss
  View file @ef0ef3c
... ... @@ -613,6 +613,9 @@ button{
613 613 color: #1FB6FF;
614 614 }
615 615 }
  616 + .pause-recording{
  617 + color: #FFF;
  618 + }
616 619 }
617 620  
618 621 .pause-shodow{
... ...
src/scss/recording1.scss
  View file @ef0ef3c
... ... @@ -217,38 +217,9 @@ a:hover, a:focus{
217 217 margin: 16px 0;
218 218 background-color: #979797;
219 219 }
220   - // .save-wrap{
221   - // position: absolute;
222   - // right: 90px;
223   - // line-height: 80px;
224   -
225   - // input{
226   - // display: inline-block;
227   - // width: 80px;
228   - // height: 30px;
229   - // line-height: 30px;
230   - // text-align: center;
231   - // border-radius: 15px;
232   - // color: #FFF;
233   - // cursor: pointer;
234   - // }
235   - // .upload-teach, .upload-stud{
236   - // background-color: rgba(255, 255, 255, 0.2)
237   - // }
238   - // .recording-finish{
239   - // background: -webkit-linear-gradient(left, #1FB6FF, #62DDF5);
240   - // background: -moz-linear-gradient(left, #1FB6FF, #62DDF5);
241   - // }
242   - // #upload{
243   - // }
244   - // #savecorde{
245   - // }
246   - // #cancel{
247   - // background-color: transparent;
248   - // border: 1px solid #1FB6FF;
249   - // color: #1FB6FF;
250   - // }
251   - // }
  220 + .pause-recording{
  221 + color: #FFF;
  222 + }
252 223 }
253 224  
254 225 .recording-audio{
... ...