Differences

This shows you the differences between two versions of the page.

Link to this comparison view

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.
comments powered by Disqus