unserver-unify/src/app/course/chapter/audioexp.html

<div class="carousel-inner stroke_audio">
  <div class="eword_title" ng-if="wctrl.currentPPT.ntype=='title'">
    <img ng-if="wctrl.chapter.photo" ng-src="{{wctrl.resUrl+wctrl.chapter.photo}}"/>
    <div class="margin-bottom-80" ng-if="!wctrl.chapter.photo">
    </div>
    <h4 translate="">
      Listening
    </h4>
    <h1>
      {{wctrl.chapter.name}}
    </h1>
    <h3>
      <strong>
        {{wctrl.chapter.subtitle}}
      </strong>
    </h3>
  </div>  
  <div ng-if="wctrl.currentPPT.ntype=='word'">
    <div class="headline">
      <h4>
        {{wctrl.chapter.subtitle}}
      </h4>
    </div>
    <div class="col-md-5 col-md-offset-1" ng-if="wctrl.currentPPT.photo">
      <div class="img_middle">
        <img ng-src="{{wctrl.resUrl+wctrl.currentPPT.photo}}" style="min-width: 80%"/>
      </div>
    </div>
    <div ng-class="{'pad-top8':!wctrl.currentPPT.desc, 'pad-top4':wctrl.currentPPT.desc, 'col-md-offset-2 col-md-8' : !wctrl.currentPPT.photo, 'col-md-5' : wctrl.currentPPT.photo}">
      <h3 style="text-transform:capitalize;" ng-if="!wctrl.currentPPT.desc">
        {{wctrl.currentPPT.word}}
        <a class="fa fa-volume-down" ng-click="wctrl.playAudio(wctrl.currentPPT.audio)" style="font-size:30px;">
        </a>
      </h3>
      <h4 ng-if="wctrl.currentPPT.desc" class="color-blue">Please read the below sentance&nbsp;&nbsp;
        <a class="fa fa-volume-down" ng-click="wctrl.playAudio(wctrl.currentPPT.audio)" style="font-size:30px;">
        </a></h4>
      <div class="info_box" ng-if="wctrl.currentPPT.desc">
        {{wctrl.currentPPT.word}}
      </div>
      <div class="margin-bottom-10"></div>
      <div ng-if="wctrl.selectLang" class="text-right">
        <!-- {{wctrl.selectLang.name}} is selected -->
        <a class="btn btn-warning overwrite" ng-if="!wctrl.recognizing && wctrl.currentPPT.desc && wctrl.final_transcript" ng-click="wctrl.clear()"><i class="fa fa-refresh"></i>{{'Reset' | translate}}</a>
        <a class="btn btn-u" ng-if="!wctrl.recognizing" ng-click="wctrl.start()"><i class="fa fa-microphone color-red">&nbsp;</i>{{'Speak' | translate}}</a>
        <a class="btn btn-danger" ng-if="wctrl.recognizing" ng-click="wctrl.stop()">{{'Stop' | translate}}</a>
        <a class="btn btn-info" ng-if="!wctrl.recognizing && wctrl.currentPPT.desc && wctrl.final_transcript" ng-click="wctrl.finish()">{{'Rate my speech' | translate}}</a>
      </div>
      <div  ng-if="!wctrl.currentPPT.desc">
        <span>
          {{wctrl.currentPPT.chinese}}
          <a class="fa fa-volume-down" ng-if="wctrl.currentPPT.chineseAudio" ng-click="wctrl.playAudio(wctrl.currentPPT.chineseAudio)">
          </a>
        </span>
        <p>
          {{ wctrl.currentPPT.explain }}
          <a class="fa fa-volume-down" ng-if="wctrl.currentPPT.explainAudio" ng-click="wctrl.playAudio(wctrl.currentPPT.explainAudio)">
          </a>
        </p>        
        <strong ng-if="wctrl.currentPPT.example" style="color:#4881b3;" translate="">
          Example
        </strong>
        <p ng-if="wctrl.currentPPT.example">
          {{wctrl.currentPPT.example}}
        </p>
        <strong ng-if="wctrl.currentPPT.type" style="color:#4881b3;" translate="">
          Type
        </strong>
        <p ng-if="wctrl.currentPPT.type">
          {{wctrl.currentPPT.type}}
        </p>
        <strong ng-if="wctrl.currentPPT.synonyms" style="color:#4881b3;" translate="">
          Synonyms
        </strong>
        <p ng-if="wctrl.currentPPT.synonyms">
          {{wctrl.currentPPT.synonyms}}
        </p>
        <strong ng-if="wctrl.currentPPT.antonym" style="color:#4881b3;" translate="">
          Antonym
        </strong>
        <p ng-if="wctrl.currentPPT.antonym">
          {{wctrl.currentPPT.antonym}}
        </p>
        <a class="btn btn-danger btn-xs" ng-if="wctrl.chapter.options&&wctrl.chapter.options.voiceRecord">
          <i class="fa fa-microphone" uib-tooltip="{{'Record'| translate}}" ng-click="wctrl.recordAudio()" ng-if="wctrl.mode!='recording'">
          </i>
          <i class="fa fa-stop" uib-tooltip="{{'Stop'| translate}}" ng-click="wctrl.stopRecording()" ng-if="wctrl.currentPPT.mode=='recording'">
          </i>
        </a>
        <a class="btn btn-u btn-xs" ng-if="wctrl.currentPPT.playbacksrc" ng-click="wctrl.toggoleRec()">
          <i class="fa" ng-class="{'fa-play':wctrl.audioStatus!='playrec','fa-stop':wctrl.audioStatus=='playrec'}" uib-tooltip="{{'Play Recorded Voice'| translate}}">
          </i>
        </a>
      </div>
      <div ng-if="wctrl.chapter.convertFlag">
        <h4 ng-if="wctrl.recognizing&&!wctrl.interim_transcript" class="color-blue">Please Speak</h4>
        <h4 ng-if="wctrl.interim_transcript&&!wctrl.finishDesc" class="color-blue">What you read</h4>
        <div ng-if="wctrl.interim_transcript&&!wctrl.finishDesc" class="alert alert-success">
          {{wctrl.interim_transcript}}
        </div>
        <h4 ng-if="wctrl.final_transcript && wctrl.currentPPT.desc" class="color-blue">Final Result</h4>
        <div ng-if="wctrl.final_transcript && wctrl.currentPPT.desc" class="alert alert-success">
          {{wctrl.final_transcript}}
        </div>
        <h4 ng-if="wctrl.final_transcript && ( wctrl.finishDesc || wctrl.final_result)" class="color-blue">Your performance</h4>
        <div ng-if="wctrl.final_transcript&&!wctrl.currentPPT.desc" class="alert alert-success">
          {{wctrl.final_transcript}}
        </div>        
        <div ng-if="wctrl.final_transcript && wctrl.currentPPT.desc && wctrl.finishDesc" class="alert alert-success">
          {{wctrl.final_transcript}} <b class="color-red pull-right">&nbsp;&nbsp;{{ (wctrl.accuracy)?wctrl.accuracy:'' }}</b>
        </div>
        <div ng-if="wctrl.final_result">
          <b translate="">Result</b> : {{wctrl.final_result}}
        </div>
      </div>
    </div>
  </div>
</div>
<!-- video exist -->
<a class="left carousel-control" id="iconleft" ng-click="wctrl.lastPage()">
  <span class="glyphicon glyphicon-chevron-left">
  </span>
</a>
<a class="right carousel-control" id="iconright" ng-click="wctrl.nextPage();">
  <span class="glyphicon glyphicon-chevron-right" id="icongright">
  </span>
</a>
<div class="badge badge-info page_info">
  {{wctrl.index+1}} / {{wctrl.slidePages.length}}
</div>
<div class="clearfix">
</div>