<!DOCTYPE html>
<html lang="en">
  <head>
    <title>audio control</title>
    <!-- renderjs -->
    <script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
    <script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
  <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>

    <script src="../<%= copy.uri.relative_dest %>" type="text/javascript"></script>
    <script src="../<%= copy.uritemplate.relative_dest %>" type="text/javascript"></script>
    <script src="../<%= concat.jio.relative_dest %>" type="text/javascript"></script>

    <script src="../mixin_promise/mixin_promise.js" type="text/javascript"></script>
    <!-- custom script -->
    <script src="./control.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./control.css" media="screen" ></link> 
  </head>
  <body>


    <progress class="bar">
    </progress>
    
    <div class="box" style="display:none;position:absolute;">
    </div>   
    <div class="time" style="position:relative;">
    </div>   



    <button type="button" data-icon="refresh" class="loop" ></button>
    
    <div class="info">
    </div>
    <div id="visualizer">
      <canvas id="can" width="800" height="350">
        !Canvas not supported by your browser
      </canvas>
    </div> 



    <audio controls>
      <type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>


    <div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
      <h1>Equalizer</h1>
      <div data-role="fieldcontain">
        <select name="type" class="type">
          <option value="0">lowpass</option>
          <option value="1">highpass</option>
          <option value="2">bandpass</option>
          <option value="3">lowshelf</option>
          <option value="4">highself</option>
          <option value="5">peaking</option>
          <option value="6">notch</option>
          <option value="7">allpass</option>
        </select>
      </div>

      <div data-role="fieldcontain">
        <input type="range" class="filter" value="5000" max="20000" min="0">
      </div>
    </div>

    <!-- data-position="fixed" -->
    <div data-role="footer" data-position="fixed" data-theme="b">
      <div data-role="navbar">
        <ul>
          <li><a data-role="button" class="mute" data-icon="info" >mute off</a></li>
          <li><a data-role="button" class="command" data-icon="gear">stop</a></li>
          <li><a data-role="button" class="next" data-icon="arrow-r">next(random)</a></li>
          <li><a data-role="button" class="share" data-icon="star" target="_blank">share</a></li>
        </ul>
      </div><!-- /navbar -->
    </div><!-- /footer -->
  </body>
</html>
