<svelte:window on:click='seek(event)' on:mousemove='seek(event)'/>

​

<audio bind:currentTime=t bind:duration=d bind:paused>

  <source type='audio/mp3' src='https://deepnote.surge.sh/deepnote.mp3'>

</audio>

​

<p>THX Deep Note</p>

<div class='status' on:click='event.stopPropagation()'>

  <img alt='play/pause button' on:click='set({ paused: !paused })' src='{icon}/333333'>

  <span class='elapsed'>{format(t)}</span>

  <span class='duration'>{format(d)}</span>

</div>

​

<div class='progress' style='width: {d ? 100 * t/d : 0}%; background: {bg};'>

  <p>THX Deep Note</p>

  <div class='status' on:click='event.stopPropagation()'>

    <img alt='play/pause button' src='{icon}/ffffff'>

    <span class='elapsed'>{format(t)}</span>

    <span class='duration'>{format(d)}</span>

  </div>

</div>

​

<style>

  .progress {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    color: white;

    overflow: hidden;

    pointer-events: none;

  }

​

  p {

    position: absolute;