Monday, June 28, 2010

How to generate a random date between two known dates in javascript?

function getRandomDate(from, to) {
    if (!from) {
        from = new Date(1900, 0, 1).getTime();
    } else {
        from = from.getTime();
    }
    if (!to) {
        to = new Date(2100, 0, 1).getTime();
    } else {
        to = to.getTime();
    }
    return new Date(from + Math.random() * (to - from));
}
The Code above not tested yet, no guarantee it's runnable...

Friday, June 25, 2010

Simple Player - A very simple HTML5 audio player plugin for jQuery

What is Simple Player

Simple Player is a jQuery plugin that allows web developers to control audio files on their webpage. Supports style up via CSS. All browsers that supports HTML5 audio tag that allow mp3 or ogg format supported by this plugin.



I wrote this simple player plugin to replace the traditional flash player. There is no need to use flash (load flash plugin consumes much more memory extra) in some cases if you want to play a simple audio file.

Usage

The jquery.simpleplayer.min.js file should be added to the head section of the HTML file after the jQuery JavaScript file. Below is how to include the JavaScript file using an absolute path, relative to the server root.

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="/jquery.simpleplayer.min.js"></script>
</head>


Then you should include the simpleplayer.css into your html.

<link rel="stylesheet" href="simpleplayer.css" type="text/css">


The audio tag in your code looks like:

<audio class="player" src="path_to_your_audio_file">  
  Your browser does not support the <code>audio</code> element.  
</audio>


Final step we need some javascript to load our simple player

<script type="text/javascript">
    $(document).ready(function() {
        var settings = {
            progressbarWidth: '200px',
            progressbarHeight: '5px',
            progressbarColor: '#22ccff',
            progressbarBGColor: '#eeeeee',
            defaultVolume: 0.8
        };
        $(".player").player(settings);
    });
</script>


Simple Player Options

  • progressbarWidth: the width of the progressbar
  • progressbarHeight: the height of the progressbar
  • progressbarColor: color of the progressbar
  • progressbarBGColor: background color of the progressbar
  • defaultVolume: volume as default

Latest Release


Collaborate


TODO List:

  • Video Support
  • Volume Adjust
  • More Control of Media
  • Theme
  • A befault html5 & css 3 demo page
  • ...

Simple Player jQuery Plugin Licensed under the MIT


Enjoy. Let me know if you like this simple player. @yuanhao