Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audio sprites with the track element</title>
    <meta charset="UTF-8">
</head>
<body>
<div id="container">
​
<h1>Playing audio sprites with the track element</h1>
  <p>A demo by Sam Dutton, adapted for JsBin by M.Buffa</p>
​
​
​
<div id="soundButtons" class="isSupported"></div>
​
<h2>How it works</h2>
​
<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://dev.w3.org/html5/spec/media-elements.html#text-track-api" 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="http://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>
​
</div>  <!-- container -->
​
</body>
​
​
</html>
 
a {
color: #6699ff;
text-decoration: none;
}
 
a:hover {
color: #88aaff;
text-decoration: underline;
}
 
body {
background: #666;
font-family: Arial, sans-serif;
padding: 50px;
}
​
#soundButtons button {
color: green;
font-size: 20px;
height: 67px;
margin: 0 9px 0 0;
padding: 6px 4px 6px 3px;
width: 67px;
}
​
code {
font-family: Consolas, Courier New, monospace;
font-weight: bold;
font-size: 20px;
}
 
div#container {
background: #000;
margin: 0 auto 0 auto;
max-width: 685px;
padding: 20px 30px 30px 30px;
}
​
div#soundButtons {
border-bottom: 1px solid green;
height: 67px;
padding: 0 0 30px 0;
}
​
div#warningMessage {
background: #333;
border: 1px dashed #ffff00;
padding: 10px 10px 10px 20px;
}
 
h1 {
border-bottom: 1px solid green;
color: white;
font-family: Arial, sans-serif;
margin: 0 0 30px 0;
padding: 0 0 10px 0;
}
 
h2 {
color: #ccc;
font-family: Arial, sans-serif;
margin: 30px 0 0 0;
}
 
img {
border: none;
}
 
p {
color: #ddd;
font-size: 18px;
line-height: 1.5em;
}
​
div#warningMessage p {
color: #dddd00;
font-size: 14px;
font-weight: bold;
}
​
pre {
color: white;  
}
​
.hidden {
display: none;
margin: 0 !important;
max-height: 0;
opacity: 0;
padding: 0 !important;
}
​
.visible {
display: block;
max-height: inherit;
opacity: 1;
}
 
// This demo is based on code at http://dev.w3.org/html5/spec/media-elements.html#text-track-api
​
window.onload = function() {
​
    var audio = new   Audio("https://mainline.i3s.unice.fr/mooc/animalSounds.mp3");
​
        audio.addEventListener("loadedmetadata", function() {
        var track = audio.addTextTrack("metadata", "sprite track", "en");
        track.mode = "hidden";
​
        // for browsers that do not implement the getCueById() method
        if (typeof track.getCueById !== "function") {
                track.getCueById = function(id) {
                    var cues = track.cues;
                    for (var i = 0; i != track.cues.length; ++i) {
                        if (cues[i].id === id) {
                            return cues[i];
                        }
                    }
                };
            }
​
            var sounds = [{
                id: "purr",
                startTime: 0.200,
                endTime: 1.800
            }, {
                id: "meow",
                startTime: 2.300,
                endTime: 3.300
            }, {
                id: "bark",
                startTime: 3.900,
                endTime: 4.300
            }, {
                id: "baa",
                startTime: 5.000,
                endTime: 5.800
            }, {
                id: "moo",
                startTime: 6.500,
                endTime: 8.200
            }, {
                id: "bleat",
                startTime: 8.500,
                endTime: 9.400
            }, {
                id: "woof",
                startTime: 9.900,
                endTime: 10.400
            }, {
                id: "cluck",
                startTime: 11.100,
                endTime: 13.400
            }, {
                id: "mew",
                startTime: 13.800,
                endTime: 15.600
            }];
​
            for (var i = 0; i !== sounds.length; ++i) {
                var sound = sounds[i];
                var cue = new VTTCue(sound.startTime, sound.endTime, sound.id); // change in spec
                cue.id = sound.id;
                track.addCue(cue);
                document.querySelector("#soundButtons").innerHTML += "<button class='playSound' id=" + sound.id + ">" + sound.id + "</button>";
            }
​
            var endTime;
            audio.addEventListener("timeupdate", function(event) {
                if (event.target.currentTime > endTime)
                    event.target.pause();
            });
​
            function playSound(id) {
                var cue = track.getCueById(id);
                audio.currentTime = cue.startTime;
                endTime = cue.endTime;
                audio.play();
            }
​
            var buttons = document.querySelectorAll("button.playSound");
          
          for(i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener("click", function(e) {
              playSound(this.id);
              
            });
          }
           
​
        });
};
​
function addListenerToButton(i) {
  
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers