track/audiosprites/index.html

<!DOCTYPE html>

<!--
Copyright 2017 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
  <meta name="author" content="//samdutton.com">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
  <meta itemprop="image" content="/images/icons/icon192.png">
  <meta name="mobile-web-app-capable" content="yes">
  <meta id="theme-color" name="theme-color" content="#fff">

  <base target="_blank">

  <title>Audio sprites with the track element</title>

  <link rel="stylesheet" href="../../css/main.css">
  <style>
    #soundButtons button {
      margin: 0 20px 20px 0;
      width: 53px;
    }
    #soundButtons button:last-of-type {
      margin: 0 0 20px 0;
    }
  </style>

</head>

<body>

  <div id="container">

    <h1>Playing audio sprites with the track element</h1>

    <div id="soundButtons" class="isSupported"></div>

    <p>An Audio object is created for <a href="audio/animalSounds.mp3">animalSounds.mp3</a>, which is made up of multiple different sounds: <em>purr</em>, <em>woof</em>, and so on.</p>

    <p>A <code>TextTrack</code> is then constructed with a TextTrackCue added for each sound. Each cue has a startTime, an endTime and an ID.</p>

    <p>When a button is clicked, a cue with the same ID as the button is found using the <code>TextTrack</code> <code>getCueById()</code> method. The Audio object <code>currentTime</code> is set to the startTime of the cue. A <code>timeupdate</code> event listener stops play at the <code>endTime</code> of the cue.</p>

    <p>This demo is based on a code example in the <a href="http://www.w3.org/TR/2015/WD-html51-20151008/semantics.html#the-track-element" title="W3C TextTrack API documentation">W3C TextTrack API documentation</a>.</p>

    <p>For more information about the track element, take a look at <a href="https://www.html5rocks.com/en/tutorials/track/basics/" title="HTML5 Rocks article: Getting started with the track element">Getting started with the track element</a> on HTML5 Rocks.</p>

    <a href="https://github.com/samdutton/simpl/blob/gh-pages/track/audiosprites" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="js/main.js"></script>

  <script src="../../js/lib/ga.js"></script>

</body>
</html>