A simple Audio Gallery using AngularJS and Html5 Audio Tag

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 294 red flag

In this article, we create a simple Audio Gallery using AngularJS


 Download source code for A simple Audio Gallery using AngularJS and Html5 Audio Tag

Introduction

AngularJS is a MV* JavaScript framework developed by Google. It is widely use across the industry.In this article, we create a simple Audio Gallery using AngularJS.

Using the code

Let us first create the audio.json

[{    
    "songName": "Hrid Majhare Rakhbo",
    "fileSize":"5.01 MB",
    "singerName":"Lopamudra Mitra" ,
    "audioSource":"songs/1.mp3"
  }, {
   "songName": "Aao Huzur Tumko",
    "fileSize":"4.68 MB",
    "singerName":"Jonita Gandhi" ,
    "audioSource":"songs/2.mp3"
  }, {
   "songName": "Tum Pukar Lo Tumhara Intezaar Hai",
    "fileSize":"1.94 MB",
    "singerName":"Hemant Kumar" ,
    "audioSource":"songs/3.mp3"
  },
  {
   "songName": "Tera Bin",
    "fileSize":"4.32 MB",
    "singerName":"Sonu Nigam" ,
    "audioSource":"songs/4.mp3"
  }]

It is a simple Json structure with the properties of songName,fileSize,singerName,audioSource.

Now let us look into the audioController.js

//creating an application module
var audioAppModule = angular.module("audioApp", []);

//The below code will read the data from audio.json file and will pass to the $scope.audios variable 
audioAppModule.controller("audioCtrl", function($scope, $http){    
      $http.get('data/audio.json') //reading the audio.json file
      
        .success (function(data){
            $scope.audios = data; // binding the data to the $scope.audios variable
          })
        .error(function(data, status) {
              console.error('failure loading the audio file record', status, data);
              $scope.audios = { }; //return blank record if something goes wrong
        });       
});//end controller

The code pattern is a typical MVC one. At first we are creating the audioAppModule.It is an Application Module that is use to initialize the application with controller which is audioCtrl in our case.

Next we have created a controller module audioCtrl by using the Application Module.controller function (i.e. audioAppModule.controller).

For reading data from the Json file, we are using $http.get function where in the success case we are setting the data to the $scope.audios variable and if anything goes wrong while reading the data, we are setting the $scope.audios = { } as empty.

The $scope.audios variable acts as a glue for carrying the data from the controller to the view (i.e. html part).

Now once the controller is ready, it's time to bind the data to the view. So let's create the below html

<!DOCTYPE html>
<html>
<head>
  <link href="css/audio.css" rel="stylesheet" type="text/css">
    <script data-require="angular.js@1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script> 
 <script src="audioController.js"></script>
</head>

<body ng-app="audioApp">
    <div align="center"><b><u><font size="8px">Audio Gallery - RNA Team</font></u></b></div>
    <div ng-controller="audioCtrl" align="center">  
      <table border="1">
        <tr> 
            <th>Song Information</th> 
            <th>Play Songs</th>
        </tr>
        <tr ng-repeat="audio in audios">

          <td>
            <div class="link">{{audio.songName}}</div>
            <div class="item-artist">{{audio.fileSize}}<br> by <font color="blue">{{audio.singerName}}</font></div>
          </td>
          <td>
            <audio src={{audio.audioSource}} controls class="link" loop></audio>        
          </td>           
        </tr>     
      </table>
    </div>    
  </body>
</html>

At first we are loading the AngularJS and the audioController.js files. Then we are defining the Application Module(audioApp) inside the body by using the ng-app.

ng-app is an AngularJS directive which indicates the start of the AngularJS application.Then by using the ng-controller, we have attached the controller (audioCtrl) to the view (html).Now since we have multiple records to loop through, we need to use the ng-repeat directive which is basically a kind of loop in AngularJS parlance.

Once we loop through the audio records, then by using expression, we have bind the properties from controller to the view.

The important thing to note note is the Html5's Audio tag. Before HTML5, audio files could only be played in a browser with a plug-in (like flash).The HTML5 audio element specifies a standard way to embed audio in a web page. The controls attribute adds audio controls, like play, pause, and volume. The loop attribute is a boolean attribute. When present, it specifies that the audio will start over again, every time it is finished. The rest of the look and feel effect is done by using CSS.

The final output of our Audio Gallery is as under

As can be figure out that, we can play multiple audio files at the same time.

References

HTML5 Audio

CSS Tables

Conclusion

In this article we have learnt how to create a audio gallery using AngularJS and Html5's Audio tag.Hope this will be helpful. Thanks for reading.Zipped file is attached herewith.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)