<html lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Audio with non-zero Start Time | Able Player Demos</title>

<link rel="stylesheet" href="demos.css" type="text/css">

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="../build/ableplayer.min.css" type="text/css"/>

<script src="../build/ableplayer.dist.js"></script>

<header>

<div class="title">Able Player Demos</div>

</header>

<div class="body-wrapper">

<nav id="navigation-placeholder">

</nav>

<main>

<h1>Audio with non-zero Start Time</h1>

<p>This player is initialized to start automatically, at 2:20 into the track (just prior to the guitar solo).

This can be used to start the media from search results or an interactive transcript.

To play the media automatically at the target start time, the media element must also include the <code>autoplay</code> attribute.

Even then, some browsers may block this functionality.

</p>

<p>For additional demos see the <a href="index.html">Index of <em>Able Player</em> Examples</a>.</p>

<div id="container">

<!-- use the following markup for each media element -->

<audio id="audio1" preload="auto" data-able-player data-start-time="140" autoplay>

<source type="audio/mpeg" src="../media/smallf.mp3"/>

<source type="audio/ogg" src="../media/smallf.ogg"/>

</audio>

</div>

</main>

</div>

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