Playing audio files in HTML5

Posted by Anantha Narayanan On 12:38 PM

Section 3: How to play audio files in HTML5

The sweetest and simplest way to play audio files is HTML5. You will agree with me after seeing the following code:

<audio src="audiotest.ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

Was I right in guessing your reaction?

The only point you must know while playing audio files within browsers is that there is no ONE format of audio compatible with all browsers out there. So what is the option? You must encode your audio files to at least two formats, OGG and MP3. For a full list of browser compatible audio file formats refer this link in MDN.

But for now, you will be safe if you had OGG and MP3. The mechanism is called as fallback, where the browser reads the first format, and if it can play it will play. Otherwise it will move on to the next one and play the second one.

<audio controls autobuffer>
  <source src="sample.mp3"/>
  <source src="sample.ogg"/>
</audio>

What has been done in the latest example is to move the src of <audio> tag separately as a new tag within <audio> called the <source>. You can define different formats of the same file, and the browser just plays the one format which it can read. Even if the browser can understand multiple formats, it just settles and plays the first one it can understand.

Sweet new tags in HTML5

Posted by Anantha Narayanan On 12:24 PM

Section 2: Sweet, I have new tags

While HTML5 is not always about introducing new tags, its there. Its just not added newly because they had to, but they really help identify the content you are going to put in the webpage.

Before understanding new tags which are introduced, we will understand the meaningless nature of <div> tags. A div tag is used only to stuff contents together, and later style it using stylesheets (CSS). Consider the following example:

<div id="navigation">
  some navigation links
</div>

Well do you consider the following or above to be simple enough to understand?

<nav>
  some navigation links
</nav>

It makes sense to write less code and which is intelligible for humans. After all humans write HTML.

For a full list of tags available in HTML5 check this link in MDN.

Previous Section Next Section

Starting with HTML5

Posted by Anantha Narayanan On 12:22 PM

Section 1: HTML5 basics

What is the point of learning Grails (or any other web framework) if you don't know basic HTML. In this age of HTML5, I am starting to learn HTML5 the old fashioned way, self-learning.

I will be sharing my learning to all those who want it. This is really basic stuff.

The following is the simplest of simple valid HTML5 page you will create yourself.

<!DOCTYPE html>
<title>Hello World</title>
<h1>My first HTML5 Document</h1>

Yes, you heard it right, you don't need a <head> or <body> etc. tags to call your document a valid HTML5 document. The browsers now-a-days (except IE) are smart enough to identify that <title> is the title of the document, and <h1> has to be printed within the body.

If you doubt that the above code is not a valid HTML5, be my guest and copy the code and paste it in the validator. http://validator.w3.org/#validate_by_input

This is the first thing you must know about HTML5.

Next Section

What is CRUD

Posted by Anantha Narayanan On 11:41 AM

A CRUD or short form for Create/Read/Update/Delete is a controller action that is built in grails for supporting basic inserting of data, querying of data, updating of data and deleting of data from table linked to a domain class.

In short, these common actions of users need not be coded for a domain class.

Consider the following example of a controller with just one line of code which enables this feature.


class BookController {
    static scaffold = true
}

The scaffold variable if its true, grails helps to auto-generate user actions for CRUD without a single line of code. The naming convention for controller follows the domain name. For a domain name Book a controller of BookController can be created.

This naming convention helps grails auto-identify your domain class and provide you with code for insert, query, update and delete for the domain class.

When the scaffold is created, grails automatically adds the above four user actions which are common for database access.

For more information on scaffolding refer Grails docs.

What are Transient Properties

Posted by Anantha Narayanan On 3:32 PM


Grails GORM by default creates all the properties on your domain as columns in database tables. We may not require such functionality. For Example in a user creation domain we may require the user to enter the confirm password along with password. We will definitely not require two columns in tables with same password (provided there is validation for that).

In such cases you can map properties in domain as Transient, conveying to Grails GORM not to create a column for the property. For Example:

Class Person {
  static transients = ["confirmPassswd"]

  String firstName
  String lastName
  String emailID
  String loginPasswd
  String confirmPasswd
}

In Grails it is simple enough to define such extensible features.

Login application - Validate from Database

Posted by Anantha Narayanan On 5:17 PM


Click here to see a very basic login application with hard-coded user credentials. In current article I am discussing as on how to validate from a table where login id and password is stored. The article above points to the usage of flash and session's uses. I will not discuss more about flash and session in this article.

My assumption is that a person is assigned for a login with his email id. Based on that I planned for a domain called "Person" as below (I named the application happy):

package happy
class Person {
  String firstName
  String lastName
  String emailID
  String loginPassword
  Boolean superUser

  static constraints = { 
    firstName(size:1..120,nullable:false,blank:false)
    lastName(size:1..120,nullable:false,blank:false)
    emailID(email:true,size:1..120,nullable:false,blank:false)
    loginPassword(password:true,size:6..20,nullable:false,blank:false)
  }
}


In my PersonController.groovy, I added an interceptor which should validate a session. If no session is available it should redirect me to login page.


package happy
class PersonController {
  def beforeInterceptor = [action.this.&checkUser]
  static scaffold = true
  def checkUser() {
    if(!session.user) {
      redirect(controller:'person',action:'login')
      flash.message = "Invalid Username/Password, please try again."
    }
  }
}


I have successfully added a validation for all controllers in Person. If there is no login detected the user should be redirected to a login page. Next part is to design that page.


  def login = {
  }
 
   

I have put a blank controller inside the Person controller for login. Now I have to create a gsp file for this controller to successfully work. For this, I copied the index.gsp from views folder and copied it as login.gsp inside person foler within views. I deleted the entire contents within body tag and replaced with the following code:


<body>
  <a href="#page-body" class="skip">
  <g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
  <g:render template="loginHeader"/>
  <div class="bodyContent" id="bodyContent">
    <g:if test="${flash.message}">
      <div class="message">${flash.message}
</div>
    </g:if>
  </div>
</body>


It is a simple code, please read through all lines. From <g:render> tag, I will explain. It is looking for a _loginHeader.gsp as its a template. It then displays the body content and if any messages.

The following are the contents of _loginHeader.gsp located in views/person folder.


<g:if test="${session.user}">
<div class="login">
<g:remoteLink controller="person" action="list" update="bodyContent">${session.user.emailID}</g:remoteLink> | <g:link action="logout">Logout</g:link>
</div>
</g:if>
<g:else>
<g:form action="doLogin" method="post">
<div class="login">
 <label for='emailID'>Email ID</label>
 <input id="emailID" required type='text' name='emailID' value='${person?.emailID}' />
 <label for='loginPassword'>Password</label>
 <input id="loginPassword" required type='password' name='loginPassword' value='${person?.loginPassword}' />
 <input type="submit" value="Login"></input>
 </div>
</g:form>
</g:else>


This page will be used across all pages, that is why I decided to create it as a template. It checks for a session, and if found it displays the person logged in or else displays the login input boxes.

The form which has the input boxes for email ID and password are submitting to a doLogin. This method must be defined within the PersonController.groovy as well.

def doLogin = {
  def user = Person.findWhere(emailID:params['emailID'],loginPassword:params['loginPassword'])
  session.user = user
  if (user){
    redirect(controller:'person',action:'list')
    flash.message = "Logged in as <b>$user.firstName $user.lastName ($user.emailID)</b>"
  }else{
    redirect(controller:'person',action:'login')
    flash.message = "Invalid Username/Password, please try again."
  }
}

This method extracts values from params variable which will have all input boxes value. By checking using Person.findWhere by passing these parameters (Email ID &amp; Login Password) we will get some value to user object. If user variable was null then we assume that it is an invalid login and once more redirect to login page. If the validation was successfull, this will redirect to Person/List page.

Download Application Note: The application uses Grails 2

Recommended Post Slide Out For Blogger