jPlayer playbackRate Audio Speed Control for Podcast Player


Hits: 127  

Today one of my customer need Audio PlayBack Speed Control for HTML5 Audio Player. His requirement is that many people speak too slow on
podcasts. He wants to speed up the playback so that he don’t have to take so much time to listen to the podcast.

He actually wants button for speed [ 0.5x, 1x, 1.5x, 2x, 2.5x ] on HTML5 Audio using jPlayer.

jPlayer playbackRate

jPlayer playbackRate
Number : (Default: 1) : Defines the playback rate. Recommend that the jPlayer({defaultPlaybackRate}) matches this value during initilization.
http://jplayer.org/latest/developer-guide/#jPlayer-option-playbackRate

jQuery(“#jplayer”).jPlayer(“option”,”playbackRate”, 1.5);

jQuery(“#jplayer”).jPlayer(“options”,{defaultPlaybackRate : 1.5});

<script type="text/javascript">

var currentSpeedIdx = 1;  
var speeds = [ 0.5, 1, 1.5, 2, 2.5 ];

function jpSpeedControl()
{

currentSpeedIdx = currentSpeedIdx + 1 < speeds.length ? currentSpeedIdx + 1 : 0;

jQuery("#jplayer").jPlayer("option","playbackRate", speeds[currentSpeedIdx]);

jQuery("#jpSpeedControl").html( speeds[currentSpeedIdx] + 'x' );

}

</script>

<div id="jpSpeedControl" title="Speed" style="cursor:pointer;" onclick="jpSpeedControl();">1x</div>

Wowza Live Stream Countdown


Hits: 2978  

Live Stream Time

<?php

function timeElapsed($originalTime){

        $timeElapsed=$originalTime-time();
		
		return $timeElapsed;
}


//$Details['datetimepicker'] = "06/26/2014 11:42 am";  // coming from database

$dtp = timeElapsed( strtotime($Details['datetimepicker']) );

?>
var myCountdownTest = new Countdown({
			time: <?php echo $dtp; ?>,
			width	: 300, 
			height	: 50,
			style:"boring",
			rangeHi:"day",
			labelText	: 	{
			second 	: "SECONDS",
			minute 	: "MINUTES",
			hour	: "HOURS",
			day 	: "DAYS",
			month 	: "MONTHS",
			year 	: "YEARS"			
			},
			onComplete : doneHandler
			});

Live Video Stream will be coming

Download Code: live-stream-countdown.zip

Radio Song Album Artwork Cover by YouTube


Hits: 3438  

An album cover is the front / other side of the packaging of a commercially released audio recording product, or album.

You can find online APIs or Websites where artwork available

– Amazon
– LastFM
– Soundcloud
– Apple iTune
– Google Play
– Gracenote
– Free Music Archive

And many more ….

But YouTube is the best source where you can get Album / Song Cover Image for every Title

YouTube provide gdata API to search songs as video title to get image

Deprecated Features for YouTube API v2.0

YouTube Data API (v3)

http://gdata.youtube.com/feeds/base/videos?q=title:<search term>

youtube-artwork.php

<?php
$q = isset($_REQUEST['q'])?$_REQUEST['q']:"";

//thumbnail -> sqDefault, hqDefault

// orderby -> title, relevance, published

?>
 
 
<div id="videos"></div>
 
<!-- Include the latest jQuery library -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript">

jQuery.getJSON('https://gdata.youtube.com/feeds/api/videos?q=<?php echo $q; ?>&max-results=1&v=2&alt=jsonc&orderby=relevance', function(data) {
    var output="<ul>";
    for (var i in data.data.items) {
        
		output+="<li><img src='" + data.data.items[i].thumbnail.hqDefault + "' /></li>";
		output+="<li>" + data.data.items[i].title + "</li>";
		
    }
	var output="</ul>";
	
    document.getElementById("videos").innerHTML=output;
	
	});

</script>

How you can get cover image?

http://www.domain.com/youtube-artwork.php?q=Ek%20Villain%20-%20Galliyan

song album artwork

Unicode Character Calculator


Hits: 2593  

Unicode Character Calculator is a tool to convert symbols to HTML/PHP entity, CSS hex value and JavaScript hex value.

Unicode Character Calculator
Unicode Character Calculator

Audiojs.swf?playerInstance audiojs instances [%27audiojs0%27]


Hits: 4135  

If you are using audio.js as MP3 player or playlist …. on some browser it causing error 403 to access SWF file with player instance

http://yourdomain.com/audiojs/audiojs.swf?playerInstance=audiojs.instances[%27audiojs0%27]&datetime=1382426114401.4087

You need to make sure you have right permission on that SWF file and check JavaScript playerInstance below….

Firefox Error

403 Forbidden

http://yourdomain.com/audiojs/audiojs.swf?playerInstance=audiojs.instances[%27audiojs0%27]&datetime=1382426114401.4087

Solution:

Just replace code (Original audio.js)

flashSource: ‘\
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ id=”$1″ width=”1″ height=”1″ name=”$1″ style=”position: absolute; left: -1px;”> \
<param name=”movie” value=”$2?playerInstance=’+audiojs+’.instances[\’$1\’]&datetime=$3″> \
<param name=”allowscriptaccess” value=”always”> \
<embed name=”$1″ src=”$2?playerInstance=’+audiojs+’.instances[\’$1\’]&datetime=$3″ width=”1″ height=”1″ allowscriptaccess=”always”> \
</object>’,

with

flashSource: ‘\
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ id=”$1″ width=”1″ height=”1″ name=”$1″ style=”position: absolute; left: -1px;”> \
<param name=”movie” value=”$2?playerInstance=’+audiojs+’.instances[&quot;$1&quot;]&datetime=$3″> \
<param name=”allowscriptaccess” value=”always”> \
<embed name=”$1″ src=”$2?playerInstance=’+audiojs+’.instances[&quot;$1&quot;]&datetime=$3″ width=”1″ height=”1″ allowscriptaccess=”always”> \
</object>’,

This is not permission (0755 or 0777) error of SWF file, Make sure you have valid characters on some browsers…

instances[\’$1\’] => instances[&quot;$1&quot;] 😉

HTML5 MP3 Player with Folder Feedburner Playlist


Hits: 5543  

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 http://www.domain.com/mp3/ and automatically create dynamic horizontal & vertical playlist

MP3 Folder with song’s index list http://www.domain.com/mp3/ (public) or http://www.domain.com/mp3/list.php (private)

Read Feedburner URL

This plugin can read feedburner url like http://feeds.feedburner.com/thejustinwayneshow and automatically create dynamic horizontal & vertical playlist

Features

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


Hits: 6372  

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

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

After successful authorization users will redirect to your Site URL with pageID

http://www.domain.com/?tabs_added[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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='addToPage(); return false;'>Add to Page</a></p>
<p id='msg'></p>

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

   function addToPage() {

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

            $.each(response.tabs_added, function(pageid) {
                  alert(pageid);
            });
        }
    }
  );


  }

</script>

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.

“https://www.facebook.com/YourPage?v=app_APP_ID&app_data=STRING”

Create Website Thumbnails using PhantomJS


Hits: 9010  

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 = ‘http://www.svnlabs.com/’;
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});

Features:

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

Fork on Github https://github.com/ariya/phantomjs

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.

URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
URL2PNG-URL2PDF-HTML2JPG-URL2IMAGE
// Thumbnail of Webpage using webthumb.js

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

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

Download webthumb.js

# phantomjs webthumb.js http://www.svnlabs.com svnlabs.png
# phantomjs webthumb.js http://www.svnlabs.com svnlabs.pdf

You can even capture webpage as good quality PDF file 😉

Output:

svnlabs.png
svnlabs.pdf

You can also use examples/rasterize.js for same sort of functions 😉

# phantomjs examples/rasterize.js http://www.svnlabs.com/ svnlabs.png
# phantomjs examples/rasterize.js ‘http://www.svnlabs.com/’ 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


Hits: 6324  

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);
stage.start();

Cross Browser Flash Detection in Javascript


Hits: 6750  

Option 1:

<script type="text/javascript">

      $(document).ready(function(){

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

      });
</script>

 

Option 2: JavaScript Flash Detection Library (Flash Detect)

<script src="flash_detect.js"></script>
<script type="text/javascript"> 
    if(!FlashDetect.installed){
        alert("Flash is not insalled on your Web browser.");         
    }else{
        alert("Flash is insalled on your Web browser.");
    }
</script>

 

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

SWFObject
SWFObject

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

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

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 {
 //no_flash
 alert("Flash is not insalled on your Web browser."); 
}