Differences

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

--- swdev:js:javascript_code_snippets [2015/07/15 16:28]
smayr
+++ swdev:js:javascript_code_snippets [2018/02/09 14:07] (current)
smayr
@@ Line 37: / Line 37: @@
 </code>
 == Query Touch Device ==
-<code html file sample.php>
+File ''sample.php'':
+<code html >
 <html>
 ...
@@ Line 69: / Line 70: @@
 </code>
-<code javascript file utils.js>
+File ''utils.js'':
+<code javascript>
 //------------------------------------------------------------------------
 // Test whether client device supports touch.
@@ Line 92: / Line 94: @@
 }
 </code>
+== Audio Support ==
+Preload audio clips and play them.  Add the following to a webpage:
+<code php>
+<html>
+<head>
+...
+    <!-- Audio clips to preload -->
+    <audio id="idAudio1" src="audio/audio1.wav" preload="auto" autobuffer=""></audio>
+    <audio id="idAudio2" src="audio/audio2.wav" preload="auto" autobuffer=""></audio>
+    <audio id="idAudio3" src="audio/audio3.wav" preload="auto" autobuffer=""></audio>
+    <audio id="idAudio4" src="audio/audio4.wav" preload="auto" autobuffer=""></audio>
+    <script>
+    // Play specified sound clip
+    function evalSound(sender, soundobj)
+    {
+       var thissound = document.getElementById(soundobj);
+       thissound.play();
+    }
+  </script>
+</head>
+<body>
+...
+<h3>Bootstraps buttons to play audio clips</h3>
+<button type="button" class="btn btn-default" onclick="evalSound(this,'idAudio1')">
+  <i class="fa fa-play-circle"></i> Play Audio 1</button>
+<button type="button" class="btn btn-default" onclick="evalSound(this,'idAudio2')">
+  <i class="fa fa-play-circle"></i> Play Audio 2</button>
+</body>
+</html>
+</code>
+Play audio clip using browser's built-in player:
+<code php>
+<div class="col-lg-6">
+  <h4>Audio</h4>
+  <p>A preloaded audio clip, ready to play</p>
+  <audio controls preload="auto">
+    <source src="audio/audio1.wav" type="audio/wav">
+    <source src="audio/audio1.mp3" type="audio/mp3">
+    <!-- text or flash fall back -->
+    Your browser does not support the audio element.
+  </audio>
+  <p>An autoplay clip</p>
+  <audio src="1.wav" autoplay></audio>
+</div>
+</code>
+Source:
+  * [[http://html5doctor.com/native-audio-in-the-browser|HTML5 Doctor: Native Audio in the Browser]]
+  * [[http://html5doctor.com/html5-audio-the-state-of-play|HTML5 Doctor: Audio, the State of Play]]
+  * [[http://happyworm.com/jquery/jplayer|JPlayer (Open Source)]]