梁美英 / programming · Commits

Commit 9b7bbdec5483b49db0f260ad0a2f1dab68fbc2ea

Authored by ykxie
1 parent 96ea1ff6

fix player not second

Inline Side-by-side
Showing 6 changed files with 123 additions and 146 deletions
src/css/recording.css
  View file @9b7bbde
... ... @@ -512,42 +512,24 @@ button {
512 512  
513 513 #audioWrap {
514 514 position: fixed;
515   - bottom: 50px;
  515 + bottom: 0;
516 516 width: 100%;
517   - height: 40px;
518   - background: #FFF;
  517 + height: 48px;
  518 + background-image: url(./image/player_bg2.png);
519 519 display: flex;
520 520 display: inline-flex;
521 521 z-index: 999;
522 522 background-color: #333;
523   - padding: 0 32px; }
  523 + padding: 4px 74px 0 32px;
  524 + box-shadow: 0px 2px 10px #333; }
524 525  
525   -.play-bar {
526   - position: fixed;
527   - bottom: 0px;
528   - width: 100%;
529   - height: 48px;
530   - background: #FFF;
531   - display: flex;
532   - display: inline-flex;
533   - z-index: 999;
534   - background-color: #000000; }
535   - .play-bar button {
536   - background-color: transparent;
537   - border: none;
538   - margin-left: 24px; }
539   - .play-bar .iconfont {
540   - color: #FFF;
541   - font-size: 24px; }
542   - .play-bar #full-screen, .play-bar #back-screen {
543   - position: absolute;
544   - right: 46px;
545   - margin: 7px 0; }
546   - .play-bar #play_audio {
547   - width: 60%;
548   - margin-left: 24px; }
549   - .play-bar #playrecord {
550   - margin-left: 24px; }
  526 +#full-screen, #back-screen {
  527 + background: transparent;
  528 + color: #FFF;
  529 + border: transparent;
  530 + position: absolute;
  531 + right: 0;
  532 + margin: 7px 16px; }
551 533  
552 534 .audio-wrap {
553 535 position: relative; }
... ...
src/js/audioPlayer/theme.default.css
  View file @9b7bbde
... ... @@ -26,10 +26,7 @@
26 26 background: #333;
27 27 border-right: 1px solid #555;
28 28 border-right-color: rgba( 255, 255, 255, .1);
29   - background-image: url(./image/player_bg2.png);
30 29 background-repeat: repeat-x;
31   - -webkit-box-shadow: 1px 1px 6px #333;
32   - box-shadow: 1px 1px 6px #333;
33 30 behavior: url(PIE.htc);
34 31 cursor: pointer;
35 32 }
... ... @@ -56,10 +53,7 @@
56 53 line-height: 40px;
57 54 border-left: 1px solid #111;
58 55 border-left: 1px solid rgba( 0, 0, 0, .25);
59   - background-image: url(./image/player_bg2.png);
60 56 background-repeat: repeat-x;
61   - -webkit-box-shadow: 1px 1px 6px #333;
62   - box-shadow: 1px 1px 6px #333;
63 57 behavior: url(PIE.htc);
64 58 -webkit-user-select: none;
65 59 user-select: none;
... ... @@ -68,10 +62,7 @@
68 62 #componentWrapper .player_progress {
69 63 position: relative;
70 64 height: 40px;
71   - background-image: url(./image/player_bg2.png);
72 65 background-repeat: repeat-x;
73   - -webkit-box-shadow: 1px 1px 6px #333;
74   - box-shadow: 1px 1px 6px #333;
75 66 behavior: url(PIE.htc);
76 67 cursor: pointer;
77 68 flex: 1;
... ... @@ -143,10 +134,7 @@
143 134 line-height: 40px;
144 135 border-right: 1px solid #555;
145 136 border-right: 1px solid rgba( 255, 255, 255, .1);
146   - background-image: url(./image/player_bg2.png);
147 137 background-repeat: repeat-x;
148   - -webkit-box-shadow: 1px 1px 6px #333;
149   - box-shadow: 1px 1px 6px #333;
150 138 behavior: url(PIE.htc);
151 139 -webkit-user-select: none;
152 140 user-select: none;
... ... @@ -165,10 +153,7 @@
165 153 height: 40px;
166 154 border-left: 1px solid #111;
167 155 border-left-color: rgba( 0, 0, 0, .25);
168   - background-image: url(./image/player_bg2.png);
169 156 background-repeat: repeat-x;
170   - -webkit-box-shadow: 1px 1px 6px #333;
171   - box-shadow: 1px 1px 6px #333;
172 157 behavior: url(PIE.htc);
173 158 cursor: pointer;
174 159 }
... ... @@ -192,8 +177,6 @@
192 177 height: 40px;
193 178 background-image: url(./image/player_bg2_vol.png);
194 179 background-repeat: repeat-x;
195   - -webkit-box-shadow: 1px 1px 6px #333;
196   - box-shadow: 1px 1px 6px #333;
197 180 behavior: url(PIE.htc);
198 181 /*display: none;*/
199 182 cursor: pointer;
... ...
src/js/gbreplayer.js
  View file @9b7bbde
... ... @@ -382,9 +382,8 @@ $(function(){
382 382 ,source: "http://gxb-file.oss-cn-beijing.aliyuncs.com/" + coderecords.audioUrl
383 383 ,imagePath: 'js/audioPlayer/image'
384 384 ,debuggers: false
385   - ,allowSeek: true
  385 + ,allowSeek: false
386 386 ,playCallback: function(){
387   - console.log(GBCodePlayBack.records)
388 387 playCoder();
389 388 }
390 389 ,pauseCallback: function(){
... ... @@ -392,7 +391,7 @@ $(function(){
392 391 }
393 392 ,seekedCallback: function(){}
394 393 ,endedCallback: function(){
395   -
  394 + playEnd()
396 395 }
397 396 });
398 397  
... ... @@ -419,10 +418,6 @@ $(function(){
419 418 });
420 419 }
421 420  
422   - function play(){}
423   -
424   -
425   -
426 421 // 使编辑器满屏
427 422 setTimeout(function(){
428 423 $("#htmlbutton").trigger('click');
... ... @@ -431,6 +426,7 @@ $(function(){
431 426 /* #STRAT: 播放和暂停控制元素 */
432 427 $('#play').click(function(){
433 428 var myAudio = $('#play_audio');
  429 +
434 430 //禁用修改
435 431 if(!$('#replaydone').data("readonly")){
436 432 $('#replaydone').trigger('click');
... ... @@ -542,23 +538,19 @@ $(function(){
542 538 GBCodePlayBack.triggertotal = 0;
543 539  
544 540 /* 初始化播放 */
545   - for(var i=0;i<playbackrecord.length;i++){
546   - playbackrecord[i].trigger = 0;
547   - }
  541 + for (var i = 0; i < playbackrecord.length; i++) {
  542 + playbackrecord[i].trigger = 0;
  543 + }
548 544  
549   - for(var i=0;i<GBCodePlayBack.recordtimeoutcontrolls.length;i++){
550   - clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
551   - }
552   -
  545 + for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
  546 + clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
  547 + }
553 548 GBCodePlayBack.recordtimeoutcontrolls = [];
554 549 /* END 初始化播放 */
555 550 GBCodePlayBack.htmlplayereditor.setValue('');
556   - GBCodePlayBack.cssplayereditor.setValue('');
557   - GBCodePlayBack.jsplayereditor.setValue('');
558 551  
559 552 playbtn.data('status', 0);
560   - $('#play').trigger('click');
561   -
  553 + $('#play').trigger('click');
562 554 });
563 555  
564 556 //setting speed in cookie
... ... @@ -617,6 +609,7 @@ $(function(){
617 609 // 根据不同的角色请求不同的接口播放
618 610 $('#playrecord').hide();
619 611 $('#play').show();
  612 + GBCodePlayBack.htmlplayereditor.setValue('');
620 613 $('#play').trigger('click');
621 614 // playCoder()
622 615 });
... ... @@ -1407,6 +1400,7 @@ $(function(){
1407 1400  
1408 1401 if (record.compile) {
1409 1402 console.log(record.compile)
  1403 + console.log('***************************************************')
1410 1404 var resultData = record.compile
1411 1405 compileResult(resultData)
1412 1406 }
... ... @@ -1629,27 +1623,38 @@ $(function(){
1629 1623  
1630 1624  
1631 1625 // 播放页面-结束播放事件
1632   - if (document.URL.indexOf('player.html') >= 0) {
1633   - var play_audio = document.getElementById('play_audio');
1634   - play_audio.addEventListener("ended", function() {
1635   - console.log(GBCodePlayBack.records)
1636   - console.log('结束播放')
1637   - $('#play').hide();
1638   - $('#playrecord').show();
1639   - if (_role == 0) {
1640   - $.ajax({
1641   - type: "PUT",
1642   - url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
1643   - success: function(data){
1644   - },
1645   - error: function(){
1646   - console.log('')
1647   - }
1648   - });
1649   - }
1650   -
1651   - }, false);
1652   - }
  1626 + // if (document.URL.indexOf('player.html') >= 0) {
  1627 + // var play_audio = document.getElementById('play_audio');
  1628 + // play_audio.addEventListener("ended", function() {
  1629 + // console.log(GBCodePlayBack.records)
  1630 + // console.log('结束播放')
  1631 + // $('#play').hide();
  1632 + // $('#playrecord').show();
  1633 + // if (_role == 0) {
  1634 + // $.ajax({
  1635 + // type: "PUT",
  1636 + // url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
  1637 + // success: function(data){
  1638 + // },
  1639 + // error: function(){
  1640 + // console.log('')
  1641 + // }
  1642 + // });
  1643 + // }
  1644 +
  1645 + // GBCodePlayBack.triggertotal = 0;
  1646 +
  1647 + // /* 初始化播放 */
  1648 + // for (var i = 0; i < GBCodePlayBack.records.length; i++) {
  1649 + // GBCodePlayBack.records[i].trigger = 0;
  1650 + // }
  1651 +
  1652 + // for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
  1653 + // clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
  1654 + // }
  1655 +
  1656 + // }, false);
  1657 + // }
1653 1658  
1654 1659  
1655 1660 // 开始录制
... ... @@ -1742,7 +1747,7 @@ $(function(){
1742 1747  
1743 1748 // 播发代码
1744 1749 function playCoder(){
1745   - console.log(GBCodePlayBack.records)
  1750 + GBCodePlayBack.htmlplayereditor.setValue('');
1746 1751 var myAudio = $('#play_audio');
1747 1752 //禁用修改
1748 1753 if(!$('#replaydone').data("readonly")){
... ... @@ -1752,16 +1757,16 @@ $(function(){
1752 1757 $('#recordertab a:eq(1)').tab('show');
1753 1758  
1754 1759 var playstatus = $('#play').data('status');
1755   - if(document.URL.indexOf('player.html')>=0){
1756   - if(playstatus){
1757   - GBCodePlayBack.pauseData = new Date().getTime(); // 暂停的时间
1758   - myAudio[0].pause();
1759   - $('#play').find('i').removeClass('icon-playcopy').addClass('icon-play').attr('data-original-title', '播放');
1760   - }else{
1761   - myAudio[0].play();
1762   - $('#play').find('i').removeClass('icon-play').addClass('icon-playcopy').attr('data-original-title', '暂停');
1763   - }
1764   - }
  1760 + // if(document.URL.indexOf('player.html')>=0){
  1761 + // if(playstatus){
  1762 + // GBCodePlayBack.pauseData = new Date().getTime(); // 暂停的时间
  1763 + // myAudio[0].pause();
  1764 + // $('#play').find('i').removeClass('icon-playcopy').addClass('icon-play').attr('data-original-title', '播放');
  1765 + // }else{
  1766 + // myAudio[0].play();
  1767 + // $('#play').find('i').removeClass('icon-play').addClass('icon-playcopy').attr('data-original-title', '暂停');
  1768 + // }
  1769 + // }
1765 1770  
1766 1771 if(!playstatus){
1767 1772 var playbackrecord = GBCodePlayBack.records,
... ... @@ -1922,6 +1927,33 @@ $(function(){
1922 1927 recorder.pause(); // 继续录制
1923 1928 }
1924 1929  
  1930 + function playEnd(){
  1931 + $('#play').hide();
  1932 + $('#playrecord').show();
  1933 + if (_role == 0) {
  1934 + $.ajax({
  1935 + type: "PUT",
  1936 + url: gxb_api + "/programming/learn/chapter/" + _chapterId + "/user/" + _userId,
  1937 + success: function(data){
  1938 + },
  1939 + error: function(){
  1940 + console.log('')
  1941 + }
  1942 + });
  1943 + }
  1944 +
  1945 + GBCodePlayBack.triggertotal = 0;
  1946 +
  1947 + /* 初始化播放 */
  1948 + for (var i = 0; i < GBCodePlayBack.records.length; i++) {
  1949 + GBCodePlayBack.records[i].trigger = 0;
  1950 + }
  1951 +
  1952 + for (var i = 0; i < GBCodePlayBack.recordtimeoutcontrolls.length; i++) {
  1953 + clearTimeout(GBCodePlayBack.recordtimeoutcontrolls[i]);
  1954 + }
  1955 + }
  1956 +
1925 1957 });
1926 1958  
1927 1959  
... ...
src/js/recorder/Myna.js
  View file @9b7bbde
... ... @@ -5,8 +5,8 @@
5 5  
6 6 var HZRecorder = function(stream, config) {
7 7 config = config || {};
8   - config.sampleBits = config.sampleBits || 16; //采样数位 8, 16
9   - config.sampleRate = config.sampleRate || (44100 / 6); //采样率(1/6 44100)
  8 + config.sampleBits = config.sampleBits || 8; //采样数位 8, 16
  9 + config.sampleRate = config.sampleRate || 44100; //采样率(1/6 44100)
10 10  
11 11 var context = new(window.webkitAudioContext || window.AudioContext)();
12 12 var audioInput = context.createMediaStreamSource(stream);
... ... @@ -17,7 +17,7 @@
17 17 size: 0, //录音文件长度
18 18 buffer: [], //录音缓存
19 19 inputSampleRate: context.sampleRate, //输入采样率
20   - inputSampleBits: 16, //输入采样数位 8, 16
  20 + inputSampleBits: 8, //输入采样数位 8, 16
21 21 outputSampleRate: config.sampleRate, //输出采样率
22 22 oututSampleBits: config.sampleBits, //输出采样数位 8, 16
23 23 input: function(data) {
... ...
src/player.html
  View file @9b7bbde
... ... @@ -130,11 +130,19 @@
130 130 </div>
131 131 </div>
132 132  
133   - <div class="" id="audioWrap" style="bottom: 50px;">
  133 + <div class="" id="audioWrap">
134 134  
  135 + <button id="full-screen">
  136 + <i class="icon iconfont icon-fangda"></i>
  137 + </button>
  138 + <button id="back-screen" style="display: none;">
  139 + <i class="icon iconfont icon-fangda"></i>
  140 + </button>
135 141 </div>
136   -
137   - <div class="play-bar">
  142 + <button id="play" class="" style="display: none;" data-status='0' title="暂停">
  143 + <i class="icon iconfont icon-playcopy"></i>
  144 + </button>
  145 +<!-- <div class="play-bar">
138 146 <button id="playrecord" data-status='0' title="播放">
139 147 <i class="icon iconfont icon-play"></i>
140 148 </button>
... ... @@ -146,13 +154,8 @@
146 154 <div class="audio-disable"></div>
147 155 <div class="shadow"></div>
148 156 </div>
149   - <button id="full-screen">
150   - <i class="icon iconfont icon-fangda"></i>
151   - </button>
152   - <button id="back-screen">
153   - <i class="icon iconfont icon-fangda"></i>
154   - </button>
155   - </div>
  157 +
  158 + </div> -->
156 159 </div>
157 160  
158 161  
... ...
src/scss/recording.scss
  View file @9b7bbde
... ... @@ -669,51 +669,28 @@ button{
669 669 // Player 样式
670 670 #audioWrap{
671 671 position: fixed;
672   - bottom: 50px;
  672 + bottom: 0;
673 673 width: 100%;
674   - height: 40px;
675   - background: #FFF;
  674 + height: 48px;
  675 + background-image: url(./image/player_bg2.png);
676 676 display: flex;
677 677 display: inline-flex;
678 678 z-index: 999;
679 679 background-color: #333;
680   - padding: 0 32px;
  680 + padding: 4px 74px 0 32px;
  681 + box-shadow: 0px 2px 10px #333;
681 682 }
682 683  
683 684  
684   -.play-bar{
685   - position: fixed;
686   - bottom: 0px;
687   - width: 100%;
688   - height: 48px;
689   - background: #FFF;
690   - display: flex;
691   - display: inline-flex;
692   - z-index: 999;
693   - background-color: #000000;
694   -
695   - button{
696   - background-color: transparent;
697   - border: none;
698   - margin-left: 24px;
699   - }
700   - .iconfont{
701   - color: #FFF;
702   - font-size: 24px;
703   - }
704   - #full-screen, #back-screen{
705   - position: absolute;
706   - right: 46px;
707   - margin: 7px 0;
708   - }
709   - #play_audio{
710   - width: 60%;
711   - margin-left: 24px;
712   - }
713   - #playrecord{
714   - margin-left: 24px;
715   - }
  685 +#full-screen, #back-screen{
  686 + background: transparent;
  687 + color: #FFF;
  688 + border: transparent;
  689 + position: absolute;
  690 + right: 0;
  691 + margin: 7px 16px;
716 692 }
  693 +
717 694  
718 695  
719 696 // Player
... ...