Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
html_5_soundboard_template [2012/08/24 22:17] 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. | ||