This shows you the differences between two versions of the page.
Both sides previous revision Previous revision | |||
html_5_soundboard_template [2013/11/07 17:22] Joel Dare |
html_5_soundboard_template [2020/06/01 22:53] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== HTML 5 Soundboard Template ====== | ||
+ | This is a minimalist template for an HTML 5 soundboard. This is a decent starting point for creating a simple HTML5 soundboard. | ||
+ | |||
+ | You'll need to drop a couple of mp3 files in the same directory as this HTML file and make sure they are named appropriately (sound1.mp3 and sound2.mp3 in this example). | ||
+ | |||
+ | You can [[http://www.joeldare.com/soundboard/|try it]] on my site. | ||
+ | |||
+ | <code html> | ||
+ | <!DOCTYPE html> | ||
+ | |||
+ | <head> | ||
+ | |||
+ | <title>[Title]</title> | ||
+ | |||
+ | <!-- JavaScript --> | ||
+ | <script type="text/javascript"> | ||
+ | // Put code here or set the src attribute | ||
+ | </script> | ||
+ | |||
+ | <!-- CSS --> | ||
+ | <style type="text/css"> | ||
+ | <!-- | ||
+ | |||
+ | body { background-color: white; margin: 0; padding: 0; font-family: sans-serif; font-size: 12px; } | ||
+ | p { margin-bottom: 10px; } | ||
+ | |||
+ | --> | ||
+ | </style> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <audio id="sound1" src="sound1.mp3"></audio> | ||
+ | <audio id="sound2" src="sound2.mp3"></audio> | ||
+ | |||
+ | <button onclick="document.getElementById('sound1').play()">Say Something</button> | ||
+ | <button onclick="document.getElementById('sound2').play()">Other Saying</button> | ||
+ | |||
+ | </body> | ||
+ | |||
+ | </html> | ||
+ | </code> | ||
+ | |||
+ | Athough it's not directly related, I thought I'd note a problem I had with sound delays on mobile devices. On iOS, the click event has a 300ms delay as the device decides if the user is clicking or if they are doing some other action like a swipe. In order to get around this, use the touchstart action instead of the click action on these devices. |