Download raw (3.3 KB)

<audio controls class="hidden">
  <source src="audio/Steve Paxton on ecology with intro test.mp3" type="audio/mp3">
</audio>


<style>
  audio.hidden {
    display: none;
  }

  .audio-player {
    --track-color: #efefef;
    --progress-color: #fff67b;
    --hihglight-color: blue;
  }

  [data-role="player--controls"] {
    position: absolute;
    top: 20px;
    left: 15vw;
  }

  [data-role="play--pause"]:hover {
    color: var(--hihglight-color);
    /* background-color: var(--hihglight-color); */
  }

  [data-role="play--pause"]:before {
    display: block;
    content: 'PLAY';
  }

  [data-playing="true"] [data-role="play--pause"]:before {
    content: 'PAUSE';
  }

  [data-role="track"] {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10vw;
    background: var(--track-color)
  }

  [data-role="progress"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--progress-color);
  }

  [data-role="scrubber"] {
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: transparent;
    /* box-shadow: 0px 0px 3px black; */
    border-top: 2px solid black; /* var(--progress-color); */
    border-bottom: 2px solid black; /* var(--progress-color);*/
    cursor: ns-resize;
    z-index: 1;
  }

  .track--bookmark {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dotted black;
    font-family: monospace;
    cursor: pointer;
    padding: .25em .5em;
  }

  .track--bookmark:hover {
    text-decoration: underline;
  }

  .track--bookmark--timecode {
    margin-right: .25em;
  }

  .audioMarkers {
    display: none;
  }
  
  .scrubber--label,
  .time-marker {
    position: absolute;
    font-family: monospace;
  }
  
  .time-marker {
    left: .5em;
  }
  
  .scrubber--label {
    left: calc(100% + .5em);
    top: -.6em;
  }

  .time-marker--start {
    top: .25em;
  }

  .time-marker--end {
    bottom: .25em;
  }

  [data-role="scrubber"][data-scrubbing="true"] .scrubber--label {
    display: block;
  }

  [data-role="current-time"], [data-role="duration"] {
    display: none;
  }

</style>

<section class="audio-player" data-playing="false" data-progress="">
  <section data-role="player--controls">
    <button data-role="play--pause"></button>
    <span data-role="current-time"></span>
    <span data-role="duration"></span>
  </section>
  <div data-role="track">
    <div data-role="progress">
      <div data-role="scrubber"><span data-role="scrubber--label" class="scrubber--label"></span></div>
    </div>
    <span data-role="time-marker--start" class="time-marker time-marker--start"></span>
    <span data-role="time-marker--end" class="time-marker time-marker--end"></span>
    <!-- <section data-role="track--bookmark" class="track--bookmark">
      <span class="track--bookmark--timecode"></span>
      <span class="track--bookmark--label"></span>
    </section> -->
  </div>
</section>

<section class="audioMarkers">
  <span class="audiobookmark" data-time="300">John Cage</span>
  <span class="audiobookmark" data-time="1000">Another bookmark</span>
  <span class="audiobookmark" data-time="3000">Type-writer performances</span>
</section>

<script src="player.js"></script>