Differences

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

--- swdev:js:javascript_code_snippets [2016/05/20 09:57]
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 html>
+<code php>
 <html>
 <head>
@@ Line 119: / Line 122: @@
 ...
 <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,'idAudio1')">
-<button type="button" class="btn btn-default" onclick="evalSound(this,'idAudio2')"><i class="fa fa-play-circle"></i> Play Audio 2</button>
+  <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/|Native Audio in the Browser]]
+  * [[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)]]