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 try it on my site.

<!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>

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.

 

comments powered by Disqus
html_5_soundboard_template.txt · Last modified: 2013/11/07 17:22 by Joel Dare