Created
July 14, 2015 15:48
-
-
Save mrdwab/b04c6821d509ecfe9e8b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Audio Sprites</title> | |
| <meta type="description" content=""> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body{ | |
| border: 2em white solid; | |
| font-size: 15px; | |
| font-family: helvetica, arial, sans-serif; | |
| } | |
| footer, section, header, aside, figure { | |
| display: block; | |
| } | |
| #buttons { | |
| margin: 2em 0; | |
| } | |
| button { | |
| margin-left: 10px; | |
| } | |
| footer{ | |
| font-size: 12px; | |
| margin: 50px 0; | |
| } | |
| footer a{color:#333;} | |
| pre{ | |
| margin: 1em 0; | |
| background: #333; | |
| color: #fff; | |
| padding:10px; | |
| width:40em; | |
| font-size: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header><h1>Audio Sprite Test</h1></header> | |
| <section> | |
| <div id="buttons"></div> | |
| <audio preload> | |
| <source src="boing-boomchack-peng.mp3" type="audio/mp3"></source> | |
| <source src="boing-boomchack-peng.ogg" type="audio/ogg"></source> | |
| </audio> | |
| <pre> | |
| var a = document.querySelector('audio'), | |
| bc = document.querySelector('#buttons'), | |
| audiosprite = { | |
| 'all': [ 0, 7 ]; | |
| 'boing': [ 0, 1.3 ], | |
| 'boomtchack': [ 2, 2.5 ], | |
| 'peng': [ 4, 5 ] | |
| }, | |
| end = 0; | |
| a.addEventListener('loadeddata', function(ev) { | |
| for (var i in audiosprite) { | |
| bc.innerHTML += '<button onclick="play(\'' + | |
| i + '\')">' + i + '</button>'; | |
| } | |
| }, false); | |
| a.addEventListener('timeupdate', function(ev) { | |
| if (a.currentTime > end) { a.pause(); } | |
| },false); | |
| function play(sound) { | |
| if ( audiosprite[sound] ) { | |
| a.currentTime = audiosprite[sound][0]; | |
| end = audiosprite[sound][1]; | |
| a.play(); | |
| } | |
| } | |
| </pre> | |
| </section> | |
| <footer> | |
| <p>Written by | |
| <a href="http://christianheilmann.com/">Chris Heilmann</a> | |
| (<a href="http://twitter.com/codepo8">@codepo8</a>) | |
| </p> | |
| </footer> | |
| <script> | |
| if( top.location != self.location ) { | |
| document.querySelector('pre').style.display = 'none'; | |
| } | |
| var a = document.querySelector('audio'), | |
| buttoncontainer = document.querySelector('#buttons'), | |
| audiosprite = { | |
| 'all': [ 0, 7 ], | |
| 'boing': [ 0, 1.3 ], | |
| 'boomtchack': [ 2, 2.5 ], | |
| 'peng': [ 4, 5 ] | |
| }, | |
| end = 0; | |
| a.addEventListener('loadeddata', function(ev) { | |
| for (var i in audiosprite) { | |
| buttoncontainer.innerHTML += '<button onclick="play(\'' + | |
| i + '\')">' + i + '</button>'; | |
| } | |
| }, false); | |
| a.addEventListener('timeupdate', function(ev) { | |
| if (a.currentTime > end) { | |
| a.pause(); | |
| } | |
| },false); | |
| function play(sound) { | |
| if ( audiosprite[sound] ) { | |
| a.currentTime = audiosprite[sound][0]; | |
| end = audiosprite[sound][1]; | |
| a.play(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Author
Author
Example workflow (for the jsfiddle option):
- Create a
data.framewith at least the following columns: "sound", "start", and "length". - Use
toJSONfrom the "jsonlite" package to get your JS array. - Strip out the square brackets.
- Create your page.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See also: