<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Audio transcript example</title>
    <link href="../custom-controls.css" rel="stylesheet">
    <style>
      .transcript-container {
        width: 480px;
        margin: 10px auto;
        border: 1px solid #ccc;
        min-height: 38px;
      }

      .transcript {
        height: 0;
        width: 100%;
        overflow: auto;
        padding: 0 10px;
      }

      .transcript-container button {
        width: 100%;
        height: 36px;
      }
    </style>
  </head>
  <body>
    <h1>Audio transcript example</h1>

  <section class="player">
    <audio controls>
      <source src="../viper.mp3" type="audio/mp3">
      <source src="../viper.ogg" type="audio/ogg">
      <p>Your browser doesn't support HTML5 audio. Here is a <a href="../viper.mp3">link to the audio</a> instead.</p>
    </audio>

    <div class="controls">
      <button class="playpause">Play</button>
      <button class="stop">Stop</button>
      <button class="rwd">Rwd</button>
      <button class="fwd">Fwd</button>
      <div class="time">00:00</div>
    </div>
  </section>
  <div class="transcript-container">
    <div class="transcript-control">
      <button>Show transcript</button>
    </div>
    <section class="transcript">
      <p><strong>Person1</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at convallis libero, ut ultricies massa. Integer vel tempor nisi. Nunc scelerisque enim est. Duis lorem ipsum, semper vitae sem at, ultricies interdum ex.</p>

      <p><strong>Person 2</strong>: In consectetur maximus blandit. Curabitur convallis iaculis quam, eu porta erat suscipit sit amet. Morbi viverra placerat ipsum, non bibendum libero egestas eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed quis condimentum ante. Nullam ullamcorper faucibus eros. Quisque egestas non risus a faucibus. Curabitur luctus tincidunt turpis in scelerisque.</p>

      <p><strong>Person 1</strong>: Suspendisse sapien ipsum, lacinia eu bibendum in, congue eu purus. Sed fringilla sollicitudin faucibus. Cras sodales sapien neque, eget gravida augue lobortis ac. Mauris blandit faucibus porta.</p>

      <p><strong>Person 2</strong>: Fusce non libero eget nisl porta egestas ut sed elit. Nullam molestie lectus ut elementum sagittis. Donec dictum nunc leo, quis gravida diam varius non. Nam ac nisl vel nibh iaculis convallis vel eget arcu. Mauris pharetra purus ac ornare pellentesque. Fusce in leo nunc. Nunc eget vehicula sem, quis aliquam lorem.</p>

      <p><strong>Person 3</strong>: Ut auctor ornare pulvinar. Morbi nisl ipsum, pellentesque et bibendum eget, vestibulum in massa. Cras egestas cursus est sed ultrices. Etiam vel dui felis.</p>
    </section>
  </div>

  <script src="main.js"></script>
  </body>
</html>
