<div class="menu">
  <ul>
    <li><i ng-click="stopPlayback()" class="fa fa-stop"></i></li>
    <li><a ng-click="changeSoundMode()" ng-hide="false">{{sound_mode}}</a> </li>
  </ul>
</div>

<div id="corpo">
  <div class="estrofe" ng-repeat="estrofe in roteiro track by $index">
    <div class="nota">
      <p ng-bind-html="estrofe.nota" ng-click="playAudio(estrofe)"></p>
      <div class="file-box" ng-repeat="arquivo in estrofe.arquivos track by $index" ng-show="arquivo.show">
        <!-- <audio controls="" id="nota1a" src="{{arquivo.url}}">
        </audio> -->
        <!-- <rzslider rz-slider-model="roteiro[$parent.$index].arquivos[$index].volume" rz-slider-options="create_slider"></rzslider> -->
        <div class="play-control">
          <i ng-hide="arquivo.playing" ng-click="playAudioFile(arquivo)" class="fa fa-play"></i>
          <i ng-hide="!arquivo.playing" ng-click="stopAudioFile(arquivo)" class="fa fa-pause"></i>
        </div>

        <div class="channels-control">
          <div class="file-name" id="" style="margin-top: 14px">{{arquivo.url.split("audio/").pop()}}</div>
          <div class="file-name" id="" style="margin-top: 42px">{{arquivo.url.split("audio/").pop()}}</div>
          <div ng-repeat="channel in arquivo.channels track by $index">

            <div class="seek-control">
              <input ng-model="channel.seek"  type="range" id="mySlider1" slider options="options_seek"/>
            </div>
            <div class="volume-control">
              <input ng-model="channel.volume"  type="range" id="mySlider2" slider options="options_volume"/>
            </div>
            <div class="pan-control">
              <input ng-model="channel.pan"  type="range" id="mySlider3" slider options="options_pan"/>
            </div>
          </div>
        <div class="clear-fix"></div>
      </div>
    </div>
  </div>
  <div class="leitura" ng-hide="isEmpty(estrofe.leitura)"> <p ng-bind-html="estrofe.leitura"></p></div>
</div>