jPlayer playbackRate Audio Speed Control for Podcast Player


Hits: 360  

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>

Radio Song Album Artwork Cover by YouTube


Hits: 3509  

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

Responsive One Page HTML5 Templates


Hits: 6843  

I was searching one single page responsive HTML5 template for my product’s website. To sell your products you must have a introductory video and basic features on home page, that can help you to attract more customers..

You might include these items on home page…

– Top Navigation
– Introductory Video / Images
– Offer Price
– Featrues
– Technologies
– Payment Options
– Terms of Use
– Privacy
– Contact information

I have searched some templates .. hope you like below HTML5 themes 😉

Designed with the latest technologies and most advanced techniques, this one-page website loads lightning-fast!

The layout focus on usability, it offers enterprise-level features, design quality, technical implementation, compatibility, accessibility and performance.

Spark - Simple and effective
Spark – Simple and effective

Project Source bring Clarity and Efficiency to Your Content. It combines speed, usability and attractiveness.

Project Source – Lightning Speed
Project Source – Lightning Speed

Human is Responsive HTML5 theme, clean, simple theme, best suitable for company, personal or agency related websites. Please find bellow the main features of the theme.

Human Page
Human Page

Puree App Landing page if fully responsive, that means no matter what screen size your visitors are using your site will look and function great! The Puree App Template also comes touch enabled out of the box making the image slider and the rest of your site feel more native and freindly then ever on touch screen devices. The desktop has not been left out, Puree will also look good in pretty much every popular web browser on the internet!

Puree - Responsive App Landing Page Template
Puree – Responsive App Landing Page Template

LXPORTFOLIO SINGLE PAGE RESPONSIVE PORTFOLIO

LX Portfolio - Single Page Responsive Portfolio
LX Portfolio – Single Page Responsive Portfolio

SmartStart is a simple and clean but still professional template suitable for any business or portfolio, and it’s created by using the latest HTML5 and CSS3 techniques. With a responsive design it is easily usable with any device (Desktop, tablet, mobile phone), without removing any content!

Home - SmartStart
Home – SmartStart

Locus is a jQuery enhanced responsive HTML template with Filtered portfolio, One page news, three different skins and more.

Locus - Responsive One Page Template
Locus – Responsive One Page Template

Box Two, a responsive single page portfolio. Try using J and U buttons on your keyboard for quick scrolling.

Box Two - A Responsive One Page Theme
Box Two – A Responsive One Page Theme

Moloko is built with Twitter Bootstrap. It is Responsive, Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Moloko By Josweb
Moloko By Josweb

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

Initializr - Start an HTML5 Boilerplate project in 15 seconds!
Initializr – Start an HTML5 Boilerplate project in 15 seconds!

Rythm is based on the Bootstrap CSS framework, which provides a future-proof foundation for the design and layout.

Rythm - Responsive One-Page Template
Rythm – Responsive One-Page Template

Artix, built with Twitter Bootstrap.

Artix By Josweb
Artix By Josweb

Aura is beautiful websites, elgant themes and stunning visual designs.

Aura v3.0 by Designova - Responsive Bootstrap HTML5
Aura v3.0 by Designova – Responsive Bootstrap HTML5

Aside360° is a responsive One-Page HTML5 template with grid system layout.

Aside360° - Responsive HTML5 One-Page Template
Aside360° – Responsive HTML5 One-Page Template

Cross Browser Flash Detection in Javascript


Hits: 6821  

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."); 
}

Amazon S3 Cloud HTML5 MP3 Player


Hits: 4572  

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 amazon.com

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.

Amazon S3 Cloud HTML5 MP3 Player Options
Amazon S3 Cloud HTML5 MP3 Player Options

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

S3 Management Console
S3 Management Console

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 amazon.com

Best HTML5 JavaScript Frameworks for Mobile Development


Hits: 12205  
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
jqMobi

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

Mobilize.js
Mobilize.js

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.

Trigger.io - mobile platform for web developers
Trigger.io – 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.

BarleyJS.com - The lightest Html5 mobile framework
BarleyJS.com – 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.

HTML5 MP3 Lyrics Player


Hits: 6134  

HTML5 Lyrics Karaoke Player Plugin enable wordpress users to sing and play song text lyrics.

Free Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Social Links Facebook / Twitter
  • Works in IE, Safari, Firefox, Chrome, Opera
  • Player have shortcode for post/page [html5lyrics id=ID] i.e. [html5lyrics id=1]

Paid Features

  • Supports MP3 formats
  • Supports Text Song Lyrics
  • Support Images on song’s cue points
  • Color / Size Customization
  • Supports Unicode
  • Social Link Customization
  • Multiple player on same page / post
  • Works in IE, Safari, Firefox, Chrome, Opera, mobile devices including Android/iOS
  • Supports Wowza / Amazon Cloud Front / S3 HTTP Streaming
  • Facebook page customization with player
  • Player have shortcode for post/page [html5lyrics id=ID … ] i.e. [html5lyrics id=1 … ]
  • Best support on email / skype

Note: It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers.
It provides a consistent html player UI to all browsers which can be styled used standard css.

Browser & format support

With Flash as a fallback, it should work pretty much anywhere.

It has been verified to work across:

– Mobile Safari (iOS 3+)
– Android (2.2+, w/Flash), Android (4.0+)
– Safari (4+)
– Chrome (7+)
– Firefox (3+, w/ Flash)
– Opera (10+, w/ Flash)
– IE (6, 7, 8, w/ Flash)

Demo

Get fully customized HTML5 Lyrics Karaoke Player for Website Buy Now or Contact Us

Standalone

  

Screenshots

html5-lyrics-karaoke-player screenshot 2

Create HTML5 Lyrics Karaoke Player with MP3 & text

html5-lyrics-karaoke-player screenshot 3

Manage other HTML5 Lyrics Karaoke Songs

html5-lyrics-karaoke-player screenshot 4

Proccess HTML5 Lyrics Karaoke Song -> Listen then click same lyrics text

html5-lyrics-karaoke-player screenshot 5

WordPress Shortcode for HTML5 Lyrics Karaoke Player

Credit

Audio.js Player

HTML5 Audio Read-Along

PHP JavaScript Mobile Detect


Hits: 4123  

Mobile_Detect is a lightweight PHP class for detecting mobile devices. Mobile_Detect uses the user-agent string with specific HTTP headers to detect the mobile environment.

Cross Browser Testing Tool - BrowserStack
Cross Browser Testing Tool – BrowserStack

Complete Mobile Testing: BrowserStack is a complete browser coverage tool (including mobile devices) for testing you web application.

Open source mobile phone detection

http://detectmobilebrowsers.com/

HOW TO DETECT MOBILE DEVICES USING JQUERY

http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
Mobile Web
Mobile Web

These days mobile is not a simple stand alone technology. We can help you to detect mobile access for your brand memorable in a personalised and interactive way. We offer complete mobile development solutions that will integrate into your existing marketing/development platform. We offer you a solution that will be functional across across all mobile devices and browsers. Our solutions are developed in open-source technologies to ensure that there is no technology lock-in for our clients.

Thank you for visiting svnlabs.com, If you have any questions regarding the contents published in svnlabs.com then kindly contact us via email, we appreciate your feedback and promise you better services…

Email: info [at] svnlabs.com

Mobile: +919928673578

Skype: svnlabs

Twitter: http://twitter.com/svnlabs

FaceBook: http://www.facebook.com/svnlabs

Linkedin: http://www.linkedin.com/in/svnlabs

Concentrate > Observe > Imagine > Launch

HTML5 Video Canvas to Capture Image Frames


Hits: 11755  

Mobile will continue to be the big trends in 2013 because more users accessing websites on mobile devices. HTML5 Canvas help you for optimizing your site and video ads for mobile will become increasingly important.

Video to Canvas Capture
Video to Canvas Capture

canvas2image – A tool for saving or converting canvas as images 😉

HTML5 Video to Image gallery is very easy using HTML5 Video Canvas. CSS Sprite Animation can be used on various mobile ads solution application.

video canvas image gallery sprite animation
video canvas image gallery sprite animation

HTML5 Video Canvas to Capture Image is good tool to extract frames on Image Canvas. FFMpeg Video Image is not useful in real-time image capture.

imgs.appendChild(Canvas2Image.convertToImage(canvasFromVideo, 300, 200, ‘png’));

Demo: http://demo.svnlabs.com/html5videocapture/

Download: http://demo.svnlabs.com/html5videocapture/html5videocapture.zip

FFMpeg Video to Image Gallery


Hits: 2883  

1. FFMpeg create images using video source

# ffmpeg -i video.mp4 -s 560×315 images/image%d.jpg

2. Create image sequence gallery

<?php

$files = array();

foreach (glob("images/*.jpg") as $filename) {
$files[] = $filename;
}
natsort($files);

?>



<div id="slideshow">

<?php $i=1; foreach ($files as $filename) { 
if($i%15==0) { ?>
<img src="<?php echo $filename; ?>" <?php if($i==15) { ?> class="active" <?php } ?> />
<?php } $i++; } ?>

</div>

3. Synchronize images with video

$(function() {
    setInterval( "slideSwitch()", 1000 );
});

Demo for Image Sequence