HTML5 MP3 Player with Folder Feedburner Playlist

WordPress and Standalone HTML5 MP3 Music Player with Playlist for MP3 Folder / Feedburner XML compatible with iOS, Android and supports all browsers Firefox, Chrome, Safari, IE and Opera!

Read MP3 Folder URL

MP3 Folder Index
MP3 Folder Index

This plugin can read MP3 folder like and automatically create dynamic horizontal & vertical playlist

MP3 Folder with song’s index list (public) or (private)

Read Feedburner URL

This plugin can read feedburner url like and automatically create dynamic horizontal & vertical playlist


Folder: MP3 Songs folder or Feedburner XML
Prev / Loop / Next in playlist
Embed full playlist
Customize social link

Paid Features

Self hosted player files
Best support on email
Download songs option
MP3 Song’s information using ID3 Tags
Customize Social Share on Facebook & Twitter
Volume Control
Embed Code Option

Demo: Try sample MP3 Folder Playlist here

Facebook Adding an App to a Page

You can provide App to Fan Page Tab using URL, but you must check below options to get App (Page Tab) Added Page ID?

After successful authorization users will redirect to your Site URL with pageID[pageID]=1#_=_

App Page Tab Settings
App Page Tab Settings
Add Page Tab Dialog
Add Page Tab Dialog

Integrating with Facebook APIs

When a user selects Page Tab and authorize your application, you receive the signed_request parameter with one additional parameter, page.

JSON object
id (the page id of the current page)
admin (if the user is a admin of the page)
liked (if the user has liked the page).

Option 1: Canvas Page
$signedRequest = $facebook->getSignedRequest();

Option 2: App Domain / Site URL
if(array_key_exists(‘tabs_added’, $_REQUEST)) {
$id = array_keys($_REQUEST[‘tabs_added’]);
$pageId = $id[0];
echo $pageId;

Option 3: Page Tab URL
if (!empty($_REQUEST[‘signed_request’])) {
list($encodedSig, $payload) = explode(‘.’, $_REQUEST[‘signed_request’], 2);
$requestData = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’)), true);
if (!empty($requestData[‘page’]) && isset($requestData[‘page’][‘id’])) {
$pageId = $requestData[‘page’][‘id’];
echo $pageId;

Option 4: App Domain / Site URL

<div id='fb-root'></div>
<script src=""></script>
<script src=''></script>
<p><a onclick='addToPage(); return false;'>Add to Page</a></p>
<p id='msg'></p>

  FB.init({appId: "APP_ID", status: true, cookie: true});

   function addToPage() {

  // calling the API ...
        method: 'pagetab'
    function(response) {
        if (response != null && response.tabs_added != null) {

            $.each(response.tabs_added, function(pageid) {



Your app will also receive string parameter app_data as part of signed_request if app_data parameter was set in the original query string in the URL your tab is loaded on.


Create Website Thumbnails using PhantomJS

Hope you read my old article “Create WebThumb using LAMP”, it used for creating web thumbnails from Xvfb virtual framebuffer that is more time and resource consuming.

Shell Script with Xvfb try to open web browsers in real remote server to capture web-thumbs…

That whole setup might take a full day and image quality is very bad….

Thanks to PhantomJS

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

Simple Javascript example

console.log(‘Loading a web page’);
var page = require(‘webpage’).create();
var url = ‘’;, function (status) {
//Page is loaded!


– Headless Website Testing
– Screen Capture
– Page Automation
– Network Monitoring

Fork on Github

PhantomJS is using WebKit for a real layout and rendering engine, it can be used to capture web page as screenshot or PDF files. PhantomJS can render anything on the web page, it can be used to convert contents in HTML/CSS, SVG and Canvas.

// Thumbnail of Webpage using webthumb.js

var page = require('webpage').create(),
    system = require('system'),

if (system.args.length !== 3) {
    console.log('Usage: webthumb.js webURL filename');
    console.log('Usage: webthumb.js svnlabs.png');
} else {
    weblink = system.args[1];
    fname = system.args[2];    
    page.viewportSize = { width: 320, height: 480 };, function (status) {
    if (status !== 'success') {
        console.log('Unable to open webpage!');
    } else {
    window.setTimeout(function () {
    }, 3000);

Download webthumb.js

# phantomjs webthumb.js svnlabs.png
# phantomjs webthumb.js svnlabs.pdf

You can even capture webpage as good quality PDF file ๐Ÿ˜‰



You can also use examples/rasterize.js for same sort of functions ๐Ÿ˜‰

# phantomjs examples/rasterize.js svnlabs.png
# phantomjs examples/rasterize.js ‘’ svnlabs.pdf

rasterize.js – rasterizes a web page to image or PDF
render_multi_url.js – renders multiple web pages to images
technews.js – captures Google News as a PNG image

Swiffy converts Flash SWF files to HTML5

I was working on Video Ads system for a client. I need a solution that can display ads on devices like Android / iPhone / iPad where flash is not supported.

So, after few searches I got SWIFFY … this is really very good tool to convert Flash files to html5. I tried some flash files and output html5 is working awesome on all devices ๐Ÿ˜‰

Swiffy converts Flash SWF files to HTML5, it allows to reuse Flash content on devices (iPhones, iPads and Androids) without a Flash player.

Swiffy 5.0 introduces experimental support for ActionScript 3.0.

Swiffy users can publish Flash files to HTML5 right from Adobe Flash Professional.

Google Swiffy Extension
Google Swiffy Extension

Swiffy converts a SWF file to an HTML5 page as a JSON object. The HTML5 page uses the Swiffy Runtime JavaScript library to render the animation using SVG. Compiled ActionScript code is also contained in the JSON file and executed as JavaScript in the browser.

Google Swiffy Features
Google Swiffy Features

Original Flash animation

Swiffy conversion

swiffyobject = JSON object returned from SWF File

var stage = new swiffy.Stage(document.getElementById(‘swiffycontainer’), swiffyobject);

Cross Browser Flash Detection in Javascript

Option 1:

<script type="text/javascript">


      if (navigator.mimeTypes ["application/x-shockwave-flash"] == undefined)
        alert("Flash is not insalled on your Web browser.");
        alert("Flash is insalled on your Web browser.");



Option 2: JavaScript Flash Detection Library (Flash Detect)

<script src="flash_detect.js"></script>
<script type="text/javascript"> 
        alert("Flash is not insalled on your Web browser.");         
        alert("Flash is insalled on your Web browser.");


Option 3: SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file


To detect whether a browser has the flash plugin, first load the SWFObject library, then:

    if (swfobject.getFlashPlayerVersion().major) {
        alert("Flash is insalled on your Web browser.");
    } else {
        alert("Flash is not insalled on your Web browser.");

Other SWFObject functions:
swfobject.getFlashPlayerVersion().major is the major version
swfobject.getFlashPlayerVersion().minor is the point release
swfobject.getFlashPlayerVersion().release is the build number


Option 4: jQuery SWFObject

if (!$.flash.hasVersion('9')) {
 //has Flash
 alert("Flash is insalled on your Web browser.");
else {
 alert("Flash is not insalled on your Web browser."); 

Amazon S3 Cloud HTML5 MP3 Player

Amazon S3 Cloud HTML5 Player plugin that allows you to link to your amazon S3 bucket and sets up a HTML5 Player playlist (horizontal or vertical). This plugin will support MP3 files only.

Amazon S3 Cloud HTML5 MP3 Player is not associated in any way to

Get Self Hosted Amazon S3 Cloud HTML5 MP3 Player for WordPress just in $24

You will need an amazon account to use this.

AWS access info

Add your amazon information amazon key and amazon secret key. Then just add the bucket to your account add folders.

Make sure you have public permission for all your music in your S3 buckets and folders.

Shortcode for Page or Post

[html5aws3mp3 player=”horizontal” bucket=”BUCKET” endpoint=”BUCKET-ENDPINT” folder=”FOLDER/”]

Plugin Page

Amazon S3 Error Handling

AWS CloudFront with PHP

Create sub buckets on amazon s3

Amazon S3 Cloud HTML5 MP3 Player is not associated in any way to

Best JavaScript Obfuscator

JavaScript Obfuscator- Compress JavaScript. Minification is the practice of removing unnecessary characters from code to reduce its size, thus improving load times.

JavaScript Obfuscator- Free JavaScript Obfuscation Tool
JavaScript Obfuscator- Free JavaScript Obfuscation Tool

JavasScript minification made easy

The JavaScript compressor can compress your JavaScript.

Compress formats: high ASCII, numeric encoding, normal encoding and even no encoding at all.

JavaScript-Obfuscator.comโ€™s JavaScript Compressor works with all sort of JavaScript.

Free Javascript Obfuscator
Free Javascript Obfuscator

Protects JavaScript code from stealing and shrinks size

JavaScript Obfuscation has the largest impact on webpage performance and speed ๐Ÿ˜‰

Adobe Flash ExternalInterface issues with Internet Explorer

I was working for HTML5 Audio.js Player… I really like calling ExternalInterface when using SWFObject on Windows XP IE 8. You can’t use an actionscript callback for a certain set of keywords (“play”, “stop”, “tags”, “item”, “length” etc.) will break in IE and cause a javascript error.

Object doesn’t support this property or method

public function audiojs():void {

this.playerInstance = root.loaderInfo.parameters.playerInstance+’.’;

ExternalInterface.addCallback(‘init’, init);
ExternalInterface.addCallback(‘load’, load);
ExternalInterface.addCallback(‘playPause’, playPause);
ExternalInterface.addCallback(‘pplay‘, play);
ExternalInterface.addCallback(‘ppause‘, pause);
ExternalInterface.addCallback(‘skipTo’, skipTo);
ExternalInterface.addCallback(‘setVolume’, setVolume);’loadStarted’);

IE doesn’t allow a method named play() to be exposed through ExternalInterface, so lets go with pplay().
Use ppause() for consistency with pplay(), even though it isn’t really required.

Avoid common names like play & pause when using ExternalInterface Call. ๐Ÿ˜‰

Best HTML5 JavaScript Frameworks for Mobile Development

jQuery Mobile - jQuery Mobile
jQuery Mobile – jQuery Mobile

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.

HTML5 App Development Tools. Build Apps for Any Device with Sencha. - Home - Sencha
HTML5 App Development Tools. Build Apps for Any Device with Sencha. – Home – Sencha

Sencha – powerful design and coding tools, industry-leading JavaScript frameworks, and the support required for serious business app development, Sencha Complete is everything you need to build HTML5-based apps that work perfectly in today’sโ€”and tomorrow’sโ€”multi-device world.

jQTouch โ€” Zepto-jQuery plugin for mobile web development
jQTouch โ€” Zepto-jQuery plugin for mobile web development

A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.


jqMobi is lightweight query selector library for mobile devices. It comes with over 60 api calls and jQuery compatible syntax.


Mobilize.js allows web developers create mobile sites out of existing websites with little effort.
Automatically detect mobile browsers
Easy to integrate โ€“ no server side changes needed
Open source โ€“ no expensive software or licenses needed
Familiar HTML5, Javascript and JQuery Mobile tools used
Supports iPhone, Android, Blackberry, Opera Mini and many other browsers and devices

iUI - Mobile web framework for high-end devices
iUI – Mobile web framework for high-end devices

Create mobile websites & webapps with a native look-alike in no time. You don’t need to have any HTML5, CSS3 or Javascript skills.
iUI supports iOS, Android, Rim OS6, MeeGo, Bada, WebOS, … smartphones and tablets.

Jo HTML5 Mobile App Framework
Jo HTML5 Mobile App Framework

For iOS, Android, webOS, BlackBerry, Chrome OS & anything else with HTML5 Widgets, lists and scrolling goodness using JavaScript & CSS3 Make native mobile apps or web apps with the same code Works great with PhoneGap.

Zepto.js- the aerogel-weight jQuery-compatible JavaScript library
Zepto.js- the aerogel-weight jQuery-compatible JavaScript library

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

KineticJS HTML5 Canvas Framework
KineticJS HTML5 Canvas Framework

Enterprise class interactive .. web graphics … KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

Lungo - Mobile Framework... and stuff.
Lungo – Mobile Framework… and stuff.

A framework for developers who want to design, build and share cross device applications.

jQWidgets - jQuery, JavaScript and HTML5 Plugins
jQWidgets – jQuery, JavaScript and HTML5 Plugins

jQWidgets is a comprehensive and innovative widget library built on top of the jQuery JavaScript Library. It empowers developers to deliver professional, cross-browser compatible web applications, while significantly minimizing their development time. jQWidgets contains more than 30 UI widgets and is one of the fastest growing JavaScript UI frameworks on the Web. - mobile platform for web developers – mobile platform for web developers

Build amazing mobile apps using the best of HTML5 and native…

AngularJS โ€” Superheroic JavaScript MVW Framework
AngularJS โ€” Superheroic JavaScript MVW Framework

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. - The lightest Html5 mobile framework – The lightest Html5 mobile framework

BarleyJS is licensed under free commercial and open source licenses for application development, and a paid commercial license for OEM uses.

The-M-Project - Mobile HTML5 JavaScript Framework
The-M-Project – Mobile HTML5 JavaScript Framework

The-M-Project is a Mobile HTML5 JavaScript Framework that helps you build great mobile apps, easy and fast.

The-M-Project is Open Source Software published under the MIT License. This gives you total flexibility for your development. Build great free and commercial apps with it.

Wink toolkit - A mobile JavaScript framework to build great webapps
Wink toolkit – A mobile JavaScript framework to build great webapps

Wink Toolkit is a lightweight JavaScript toolkit which will help you build great mobile web apps. It is designed and developed to meet the specific constraints of the mobile environment.

The toolkit’s core offers all the basic functionalities a mobile developer would need from touch event handling to DOM manipulation objects or CSS transforms utilities. Additionally, it offers a wide range of UI components to help you improve the look and feel of a web app, or simply to experiment with new user interactions.

Javascript Widget versues iFrame

I was creating a HTML5 Video Ads widget for my clients websites. So if I need to make it in JavaScript or iFrame?

<iframe src=”″></iframe>

But I don’t think iFrame would be the best method, if I need to hide URL from direct access.

Another option is something like this:

<script type=”text/javascript”>id = ’16’;</script>

<script src=”” type=”text/javascript”></script>



– Resizing is typical toย the parent window without smart work.
– Better isolation cannot access anything on the parent page.
– No JavaScript experience required.
– Own independent CSS styles.
– Functional on scripting disabled.



– Full access to the parent page.
– Slow down page as script load before rendering the rest of the page.
– Experience with JavaScript needed on parent page.
– Experience with CSS styles neededย on parent page.


So here is conclusion ๐Ÿ˜‰

* You have more control on the design in case of an iFrame.
* iFrame is better in terms of security because cookies stored are different.
* JavaScript widget needs more care on other JavaScript conflict.
* Use JavaScript that writes an iFrame dynamically to avoid direct URL access.