swdev:js:javascript_code_snippets [Audina Documentation]

This is an old revision of the document!

Javascript Code Snippets

Shims for IE8/IE9 support

Setup stub functions for those not supported by IE8/IE9.

// Date.now()
if (!Date.now) {
    Date.now = function() { return new Date().getTime(); }
};
 
// console.log()
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };
console.log( "Setting up console log..." );
 
// string.trim()
if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}
 
// string.ltrim()
if(typeof String.prototype.ltrim !== 'function') {
  String.prototype.ltrim = function() {
      return this.replace(/^\s+/,"");
  }
}
 
// string.rtrim()
if(typeof String.prototype.rtrim !== 'function') {
  String.prototype.rtrim = function() {
      return this.replace(/\s+$/,"");
  }
}

Query Touch Device

file sample.php

<html>
...
<body>
    ....
    <div id="touch-only">Some Touch Control...</div>
    ...
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="./lib/ie10-viewport-bug-workaround.js"></script>
 
    <!-- Utils routines -->
    <script src="./utils.js"></script>
    <script type="text/javascript">
    // Get server time
    $( document ).ready(function() {
        if (!isTouchDevice()) {
           $("#touch-only").addClass('hidden');
           if (window.console) { console.log('Not a touch device.  Hiding touch controls.'); }
        } else {
            $("#touch-only").removeClass('hidden');
        }
    });
    </script>
</body>
</html>

file utils.js

//------------------------------------------------------------------------
// Test whether client device supports touch.  
//
// Hide the element with ID as ‘touch-only’ if the web page is viewed 
// on a device that doesn’t have a touch screen. This should work on 
// all desktop and mobile devices including iOS, Android, Opera, 
// Chrome, IE, Safari and Windows Phone.
// 
// if (!is_touch_device()) {
//   document.getElementById('touch-only').style.display='none';
// }
// 
// Credits: http://ctrlq.org/code/19616-detect-touch-screen-javascript
//-----------------------------------------------------------------------
function isTouchDevice() 
{
    return (('ontouchstart' in window)
        || (navigator.MaxTouchPoints > 0)
        || (navigator.msMaxTouchPoints > 0)
    );
}

Audio Support

Preload audio clips and play them. Add the following to a webpage:

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

Play audio clip using browser's built-in player:

<div class="col-lg-6">
  <h4>Audio</h4>
  <p>An audio clip</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>
</div>

Source: