{% include './layouts/head.html' %}

<!-- Intro -->
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col">

        <h3 class="mt-5">test 1</h3>
        <p>default view + <code>single-player</code></p>

        <visual-player single-player id="visualPlayer" src="./music/SoundHelix-Song-1.mp3"></visual-player>

        <h3 class="mt-5">test 2</h3>
        <p>View with <code>figure</code> wrapper and <code>Dark Theme</code>. Without <code>Progress Bar</code> Plugin.

        <figure>
          <figcaption>Listen to the SoundHelix-Song-2:</figcaption>
          <visual-player theme="dark" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"></visual-player>
          <a href="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">Download audio</a>
        </figure>

      </div>
    </div><!-- /.row -->
  </div>
</section>

{% include './layouts/footer.html' %}