├── LICENSE ├── README.md ├── favicon.ico ├── images ├── apple-touch-icon.png ├── button.png ├── favicon.png ├── joel-bauer.jpg ├── share_email.png ├── share_tumblr.png └── share_twitter.png ├── index.html ├── js ├── app.js └── vendor │ ├── dd_belatedpng.js │ ├── jquery-1.4.2.min.js │ ├── jquery-audivid.js │ ├── modernizr-1.5.min.js │ └── plugins.js ├── sounds ├── absolutely.wav ├── crap.wav ├── crowds-guaranteed.wav ├── effective.wav ├── expensive.wav ├── guaranteed.wav ├── kidding.wav ├── marketing-capability.wav ├── percentage.wav ├── resolution.wav └── trepidation.wav └── stylesheets └── app.css /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 John Manoogian III 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | html5-soundboard 2 | ================ 3 | 4 | Finally, your lol-inducing WAVs can be standards compliant! by [@jm3](http://twitter.com/jm3) 5 | 6 | ![](http://businesscards.jm3.net/html5-soundboard-logo.png) 7 | 8 | ## Instructions 9 | 10 | Clone the repo, then: 11 | 12 | 1. Replace the sounds in [`sounds/`](https://github.com/jm3/html5-soundboard/tree/master/sounds) 13 | 2. Update the sound filename paths in [`index.html`](https://github.com/jm3/html5-soundboard/blob/master/index.html) 14 | 3. Profit! 15 | 16 | To change the button image, just replace [`images/button.png`](https://github.com/jm3/html5-soundboard/blob/master/images/button.png) with 17 | a new graphic 180px wide x 116px high. 18 | 19 | ## More 20 | 21 | Follow on twitter: [@html5soundboard](http://twitter.com/html5soundboard) 22 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/favicon.ico -------------------------------------------------------------------------------- /images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/images/apple-touch-icon.png -------------------------------------------------------------------------------- /images/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/images/button.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/images/favicon.png -------------------------------------------------------------------------------- /images/joel-bauer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/images/joel-bauer.jpg -------------------------------------------------------------------------------- /images/share_email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/images/share_email.png -------------------------------------------------------------------------------- /images/share_tumblr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/images/share_tumblr.png -------------------------------------------------------------------------------- /images/share_twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jm3/html5-soundboard/dff200a6b46081c699fd510713c6622d9550b2cf/images/share_twitter.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The HTML5 Business Card Guy Soundboard by John Manoogian III (jm3) 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 |

35 | The HTML5 Soundboard by jm3. FINALLY, YOUR PRAYERS ARE ANSWERED 36 |

37 |
38 |
39 | Click a sound to play it. Have fun. 40 |
41 | 42 | 56 |
57 | 58 | Tweet this. 59 | 60 |
61 | 62 |
63 | 64 | Created by jm3. 65 | 66 | 67 | The code. 68 | 69 | 70 | Inspired by… 71 | 72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
85 |
86 | 87 | 90 | 91 | 92 | 93 | 100 |
101 |
102 |
103 | 104 | 105 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | function init_ui() { 2 | var format; 3 | var formats = { 4 | mp3: { mime: "audio/mpeg", ext: "mp3"}, 5 | wav: { mime: "audio/x-wav", ext: "wav"} 6 | }; 7 | 8 | for( var format in formats ) { 9 | format = formats[format]; 10 | var myAudioTag = undefined; // Global 11 | var audioTagSupport = !!((myAudioTag = document.createElement('audio')).canPlayType); 12 | format.canPlayTag = audioTagSupport ? myAudioTag.canPlayType(format.mime) : "undefined"; 13 | if( format.canPlayTag ) { 14 | $("#buttons a").each( 15 | function() { 16 | $(this).click( function() { 17 | var p = $(this).attr( "data-soundfile"); 18 | window.history.pushState( p, p, "#" + p ); 19 | play_sound( p + "." + format.ext ); 20 | }); 21 | } 22 | ); 23 | 24 | if( window.location.hash ) 25 | play_sound( window.location.hash.replace( /#/, '' ) + "." + format.ext ); 26 | return; 27 | } 28 | } 29 | alert( "You're using a web browser that doesn't support audio. Try Chrome, Safari, or Firefox." ); 30 | } 31 | 32 | function play_sound(sound) { 33 | if( ! sound ) 34 | return; 35 | 36 | if( $('#audio').audivid("isplaying")) 37 | $('#audio').audivid("pause"); 38 | 39 | $("#audio").replaceWith( 40 | $('