Play, Pause and Stop an audio in HTML 5 by example

HTML 5’s audio tag has been around for a while now but, I never got a chance to try them. Today finally I got the chance, so here is what I created using jsfiddle.

Live Demo

HTML

<input type="button" value="play" id="playBtn" />
<input type="button" value="pause" id="pauseBtn" />
<input type="button" value="stop" id="stopBtn" />

Jquery

var source = "http://www.giorgiosardo.com/HTML5/audio/audio/sample.mp3"
var audio = document.createElement("audio"); audio.src = source;

$("#playBtn").click(function () {
    audio.play();
});

$("#pauseBtn").click(function () {
    audio.pause();
});

$("#stopBtn").click(function () {
    audio.pause();
    audio.currentTime = 0;
});

Hope this helps :)

Ajax call : User Aborted error vs Other Ajax Error

In an application I am working on recently, I was required to make an AJAX call to load a jqgrid with data. Incase of failure while getting the data, I had used the AJAX function’s error() method to show a error message to the user that “There has been some error while loading your data”. But soon I noticed I started getting the same error message even when I navigated away from the page before the AJAX call has finished. Some search on this led me to this article by Brian Morearty who also had the same problem. Here is what I use now…

The trick is to check the response headers in the XMLHttpRequest object. If there are no response headers (null or empty string, depending on the browser), the server did not respond yet. That means the user aborted.

$.ajax({ 
  url: "url-to-go-here",
  success: function() { }, 
  error: function(xhr, textStatus, errorThrown) {
    if(!isUserAborted(xhr)) {
      console.log("Ajax Error") 
    }
  }
});

function isUserAborted(xhr) {
  return !xhr.getAllResponseHeaders();
}

Hope this helps :)

Related Post :

Google Reader alternative for Windows 8 Phone

A quick search at the Windows 8 Phone’s App Store, for a feed reader app gives the following result. After trying out most of these apps, I have found Nextgen Reader to be the best ! Nextgen Reader Nextgen Reader is not a free app, it costs around 1.5$ (80 INR) and is worth every single penny for that. I have already purchased this app and having been using it for a couple of weeks now. Below is the official description of the app on the windows store with some pictures : enter image description here enter image description here Here is the official description on the app at the windows store… Nextgen Reader is the fastest Google Reader app for Windows Phone 8. Clean, beautiful & simple design, inspired from Windows Phone design with great features:
* Full offline mode with image caching.
* Pin multiple live tiles to start.
* Select multiple items like WP mail app.
* Completely secure – uses https and encryption.
* Search inside all items, read items or starred items.

Download Windows 8 Phone SDK offline using a Download Manager

Windows 8 Phone SDK is available for download from here, but I need a offline download of this SDK. ( i.e I wanted to download the entire setup all at once and not use the online installer ) You can download an offline version of Windows 8 Phone SDK from here. (Download Now) Update : Just to add to the answer, I used Microsoft Download Manager to download this sdk which was around 1.6 GB in size. The Microsoft Download Manager enables you to download files simply and easily. It also makes downloading large files such as application and multimedia files quick and reliable. Hope this helps :)

Windows 8 : Keyboard special characters problem : How to fix ?

Yesterday I update my Sony Vaio Laptop from Windows 7 to Windows 8. But with the update, all my special characters got swapped with each other “@” sign was replaced by “‘” and so on…

Solution

  • Open Control Panel. ( In-case you cant find control panel, press Windows Key + F and type in “Control Panel” )
  • Select “Change Language” option

  • Open “Change Language” option and add a language of your choice and set it as your primary language, you may also go ahead and remove the existing language.

  • Change the Language to your preferred language and remove the existing one.

This solved my problem, hope it does your’s too. Cheers !

Further Reading

http://www.eightforums.com/general-discussion/4050-keyboard-layout.html#post65943

Windows 8 Phone Development : How to use jquery using HTML 5 template in Visual Studio 2012

Recently I started to try out Windows 8 Phone Development using Visual Studio 2012 express and the Windows 8 Phone SDK, when using HTML5 template I ran into this problem which I reported on stackoverflow, here is how I solved it :

Step 1 : Add jquery.min.js to the solution

Step 2 : Change the order of statement in Browser_Loaded method as shown below

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    // Add your URL here
    Browser.IsScriptEnabled = true;
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}

Step 3: Sample Jquery code

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <script type="text/javascript" src="/html/js/jquery.min.js" ></script>
        <title>Windows Phone</title>
      <script type="text/javascript">
        $(document).ready(function () {
          $("#message").text("Welcome !");

          $("#goBtn").click(function(){
            $("#message").text("button has been pressed");
          });
        });
      </script>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="message"></div>
        <input type="button" id="goBtn" value="press me !" />
    </body>
</html>

Output

Hope this helps you :)

ASP.NET MVC 4 Data Annotations by example.

1. Email Validation using regex

[Required(ErrorMessage = "Enter your email address.")]
[RegularExpression(@"^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$", ErrorMessage = "Email is not valid")]
public string Email { get; set; }

2. Max and Min length check

[Required(ErrorMessage = "Enter your password.")]
[StringLength(50, MinimumLength = 4, ErrorMessage = "Password has to be  between 4 to 50 characters.")]
public string Password { get; set; }

Create a JSON string in C#

{
    "Name" : "22", 
    "Age" : "0", 
    "FullAddress" : "-5", 
    "Interest" : "0"
}

to create a json string as shown below, here is what you could use.

string myJsonString =   "{"
                        + "\"Name\": \"" + model.FirstName + "\", "
                        + "\"Age\": \"" + model.Age + "\", "
                        + "\"Address\": \"" + model.FullAddress + "\", "
                        + "\"Interests\": \"" + model.Interests +"\" "
                        + "}";

How to validate email address using regex in javascript / jquery ?

Code on jsbin : http://jsbin.com/ozeyag/19/edit
Live Demo : http://jsbin.com/ozeyag/19/

function validateEmail(email) { 

    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);

}

function validate(){

  var email = $("#email").val();

  if (validateEmail(email)) {
    // email is valid
  }
  else {
    // email is invalid.
  }
  return false;

}

Reference :
StackOverflow : Validate email address in Javascript ?

Hope this helped you. Cheers ! :)