Audio Gallery Suite

Robin Rizvi — Wed, 04 Apr 2012 23:54:58 +0000

View the most updated version of the article @ CODEPROJECT

Description

Audio-Gallery-Suite is a complete audio gallery suite/solution that includes a web audio gallery and a software for managing playlists, uploading audios and managing the web audio gallery. The Audio-Gallery-Suite is built up using the latest technology and harnesses their power to put up a sophisticated solution. The Audio-Gallery-Suite is made in a way to be easily setup and deployed by anyone who wishes to use it. I hope that this project proves useful for anyone who intends to use it.

Technology

HTML5
CSS3
JAVASCRIPT/JQUERY
AJAX
PHP
DOTNET/C#

Demonstration

View the web audio gallery at the link given below. I would recommend Chrome/Firefox web browser to view the web audio gallery.
http://projects.robinrizvi.info/audio-gallery-suite/

Download the software at the link given below for uploading audios and managing the web audio gallery used in this demonstration. Use the username [superuser] and password [superuser] without the square brackets to log into the software.
http://projects.robinrizvi.info/audio-gallery-suite/software/audiogallery_setup.zip

* Check the Screens section below for a quick demo.

Download/Contribute

Download the complete Audio-Gallery-Suite along with the complete source code and all the resources used in the Audio-Gallery-Suite. If you want to implement the Audio-Gallery-Suite in any of your projects, you will have to download the full suite and follow the setup instructions that I discuss later. You can contribute to this project and make it more better, feel free to contribute by forking the project on GitHub using the same link given below.
https://github.com/robinrizvi/Audio-Gallery-Suite

Features

Web Gallery

Dynamic loading of playlists.
Dynamic loading of audios belonging to the playlist
Dynamic audio search
Easy to use audio player
Options like play,pause,next,previous,volume control and seeking are available
Audio player can be operated using keyboard keys
A rotating disc to indicate the playing status of a audio
Audio sharing to popular social networks
Currently selected audio can be downloaded
Direct link to audio file can be seen and copied
Fluid Layout, the web gallery adjusts itself when browser is resized

Gallery Software

Playlists can be added, edited and deleted
Audios can be added to any of the added playlists
Audios can be edited and deleted
Settings such as changing username and password can be configured
Other users can be added, edited and deleted (only through the superuser account)
Responsive/non-blocking user-interface
Progress of uploading the audio is displayed
Each audio to be uploaded is tagged with a poster( also called album-art) before uploading

Setup

Note that the square brackets [] are just used to indicate significance, they should be ignored otherwise.
Download the complete Audio-Gallery-Suite from GitHub (See the Download/Contribute section above).
Open the [audiogallery_db.sql] present in [Audio-Gallery-Suite/Resources/SQL Script] folder.
If you want to change the database name from the default name [audiogallery] to some other name, you can do it by changing the line [CREATE DATABASE IF NOT EXISTS audiogallery;USE audiogallery;] to [CREATE DATABASE IF NOT EXISTS some_other_database_name;USE some_other_database_name;]
If you have already created a database with some other name, delete the line [CREATE DATABASE IF NOT EXISTS audiogallery;] from the sql script and edit the line [USE audiogallery] like this [USE your_other_db_name;].
If you want to change the SUPERUSER’s username and password you can change that from the [audiogallery_db.sql] like this: [INSERT INTO `user` (`id`,`username`,`password`,`name`,`description`) VALUES
(0,'your_superuser_username','your_superuser_password','Super User','Superuser that creates and manages other users and can also create also create and manage his own playlists and audios');].
Create a FTP account at your server which points to the [root_url_of_web_gallery/audiogallery] folder on the server (See the below points for proper understanding)and then configure the ftp settings in the [audiogallery_db.sql] file like this: [INSERT INTO `settings` (`ftpurl`,`ftpusername`,`ftppassword`) VALUES ('ftp://your_ftp_host/','ftp_username','ftp_password');].
Make sure the superuser configuration and ftp configuration is properly set before saving and executing the [audiogallery_db.sql] file.
Save the [audiogallery_db.sql] file.
Execute the [audiogallery_db.sql] after doing the above changes (It, by default, creates a database named audiogallery).
Open the [config.php] file from the [Audio-Gallery-Suite/Gallery/php] folder.
Configure the database settings in the [config.php] like this: [$mysqli = new mysqli("localhost", "DB_USERNAME", "DB_PASSWORD", "DB_NAME"); ]. Remember the [localhost] need not to be changed.
Configure the [$root] variable in the [config.php] file like this: [$root= “http://root_url_of_web_gallery/”;]. The [root_url_of_web_gallery] is the url where the you will upload the web gallery. (Example: [$host=”http://projects.robinrizvi.info/audio-gallery-suite/”] is used in the my demonstration, see the Demonstration section above).
Save the [config.php] file after doing the above changes.
Upload all the files from the [Audio-Gallery-Suite/Gallery] folder on your server (in the [root_url_of_web_gallery] as mentioned above).
Open the [AUDIO GALLERY.sln] file from the [Audio-Gallery-Suite/Software] folder in Visual Studio.
Open the Resources (from Solution-Explorer->Properties->Resources) from the audiogallery project.
Edit the [mysqlconnectionstring] setting from the Resources to properly configure the Mysql database connection settings like this: [server=DB_SERVER_HOST;User Id=DB_USERNAME;Persist Security Info=True;database=DB_NAME;password=DB_PASSWORD].
Rebuild the whole solution.
Now run the software (from the build exe or from visual studio or from the audiogallery_setup.exe)
Log in using the SUPERUSER’s username and password (default is [superuser] and [superuser]).
Here you can create some playlists and add audios to them, so that the web gallery shows some audios.
Wipe the sweat and be happy to see it all working !

Insight into the code

I will present the inner workings of how the audio-gallery-suite works (in brief). It is recommended that you see the Demonstration section (see above) before plunging into understanding the code and the inner workings. I will discuss about the implementation of some of key features of the audio-gallery-suite (web gallery and gallery software) and try to give you a brief insight on the code used for implementing those features.

Database Structure

Web Gallery

HTML Skeleton

HTML Code

<body> 
   
 
  <div id="left"> 
    <div id="playlistselecttoolbar"> 
      <label>Select Playlist :label> <select name="playlistselect" id="playlistselect"> 
         
      select> 
    div> 
 
    <div id="audiolist"> 
       
    div> 
 
    <div id="searchaudiotoolbar"> 
      <label>Search Audio :label> <input id="searchinput" name="audiosearchtxt" type= 
      "text" /> 
 
      <div id="searchbtnimg">div> 
    div> 
  div> 
   
 
  <div id="right"> 
    <div id="coverart"> 
        <img src="image/audiogallery_images/coverart.png" oriwidth="693" oriheight="680" width="693" height="680" alt="coverart" /> 
        <img id="rotatingdisc" src="image/audiogallery_images/rotating_disc.png" width="350" height="350" alt="rotatingdisc" name="rotatingdisc" /> 
    div> 
 
    <div class="sharebar"> 
        <input name="audiourl" type="text" readonly="true" /> 
         
    div> 
 
    <div id="toolbar"> 
        <a id="shareaudiotool" class="sharebar-trigger button gray medium" name="shareaudiotool">LINKa> 
        <a id="addthissharetool" class="sharebar-trigger button gray medium" name="addthissharetool">SHAREa> 
        <a id="downloadaudiotool" target="_blank" class="button gray medium" name="downloadaudiotool">DOWNLOADa> 
        <a id="helptool" class="button gray medium" rel="prettyPhoto[inline]" href="#inline_content" name="helptool">HELPa> 
    div> 
 
    <div id="player"> 
      <div id="jquery_jplayer_2" class="jp-jplayer">div> 
 
      <div class="jp-audio"> 
        <div class="jp-type-playlist"> 
          <div id="jp_interface_2" class="jp-interface"> 
            <ul class="jp-controls"> 
              <li><a href="#" class="jp-play" tabindex="1">playa>li> 
 
              <li><a href="#" class="jp-pause" tabindex="1">pausea>li> 
 
              <li><a href="#" class="jp-stop" tabindex="1">stopa>li> 
 
              <li><a href="#" class="jp-mute" tabindex="1">mutea>li> 
 
              <li><a href="#" class="jp-unmute" tabindex="1">unmutea>li> 
 
              <li><a href="#" class="jp-previous" tabindex="1">previousa>li> 
 
              <li><a href="#" class="jp-next" tabindex="1">nexta>li> 
            ul> 
 
            <div class="jp-progress"> 
              <div class="jp-seek-bar"> 
                <div class="jp-play-bar">div> 
              div> 
            div> 
 
            <div class="jp-volume-bar"> 
              <div class="jp-volume-bar-value">div> 
            div> 
 
            <div class="jp-current-time">div> 
 
            <div class="jp-duration">div> 
          div> 
        div> 
      div> 
    div> 
 
    <div id="playerstatbar"> 
      <span id="nowplaying">Now Playing:span> <span id="currentplaylist">Current 
      Playlist: span> 
    div> 
  div>--This is an isolated div to show help to the users--> 
 
  <div style='display:none'> 
    <div id='inline_content'> 
      <div style= 
      "background-color:#000;padding:5px;width:98%; margin-bottom:5px;text-align:center;color:#FFF;height:1em;font-size:1em;"> 
      HELP/INSTRUCTIONS 
      div> 
 
      <div style='padding:10px; vertical-align:middle; font-size:0.9em;'> 
        <div style="margin-bottom:15px"> 
          <img style='vertical-align:middle;' src="image/help_images/mouse.png" width= 
          "50" height="70" /><span style='margin-left:10px;'>Use your mouse to interact 
          with the player.span> 
        div> 
 
        <div style="margin-bottom:15px"> 
          <img style='vertical-align:middle;' src="image/help_images/space.png" width= 
          "150" height="50" /><span style='margin-left:10px;'>Press the space-bar to 
          toggle Play and Pause.span> 
        div> 
 
        <div style="margin-bottom:15px"> 
          <img style='vertical-align:middle;' src="image/help_images/right.png" width= 
          "50" height="50" /><span style='margin-left:10px;'>Press the right arrow key to 
          jump to next audio.span> 
        div> 
 
        <div style="margin-bottom:15px"> 
          <img style='vertical-align:middle;' src="image/help_images/left.png" width="50" 
          height="50" /><span style='margin-left:10px;'>Press the left arrow key to jump 
          to previous audio.span> 
        div> 
 
        <div style="margin-bottom:15px"> 
          <img style='vertical-align:middle;' src="image/help_images/m.png" width="50" 
          height="50" /><span style='margin-left:10px;'>Press the M key to toggle mute 
          and unmute.span> 
        div> 
 
        <div style="margin-bottom:15px"> 
          <img style='vertical-align:middle;' src="image/help_images/shift.png" width= 
          "50" height="50" /> + <img style='vertical-align:middle;' src= 
          "image/help_images/right.png" width="50" height="50" /><span style= 
          'margin-left:10px;'>Use Shift + Right arrow key to seek forward.span> 
        div> 
 
        <div style="margin-bottom:15px"> 
          <img style='vertical-align:middle;' src="image/help_images/shift.png" width= 
          "50" height="50" /> + <img style='vertical-align:middle;' src= 
          "image/help_images/left.png" width="50" height="50" /><span style= 
          'margin-left:10px;'>Use Shift + Left arrow key to seek backward.span> 
        div> 
      div> 
 
      <div style= 
      "background-color:#000;padding:5px;width:98%; margin-bottom:5px;text-align:center;color:#FFF;height:1em;font-size:1em;"> 
      <input name="popupstartup" id="popupstartupcheck" onchange="showpopupchange();" 
      type="checkbox" value="" /> Do not show at start up! 
      div> 
    div> 
  div> 
body> 

[index.html]

After seeing the basic skeleton and HTML, lets move on to see the basic features of audio-gallery-suite and how they are implemented

Loading Playlists

<select name="playlistselect" id="playlistselect"> 
     
select> 

[index.html]

 1: //Filling the playlist select box with values via XHR/ajax 
 2: $("#playlistselect").load("php/audiogalleryengine.php",{playlistselect:1},function(){$("#playlistselect").change();$('select').selectmenu({style:'dropdown'});}); 

[script_audio.js]

//for getting all the playlist and returning them 
  if (isset($_POST['playlistselect'])) 
 
  { 
 
    $query="SELECT * FROM playlist"; 
 
    $result=$mysqli->query($query); 
 
    $responsehtml='All'; 
 
    while($tuple=$result->fetch_array()) 
 
    { 
 
        $responsehtml.="{$tuple['name']}"; 
 
    } 
 
    $result->close(); 
 
    echo $responsehtml; 
 
    exit(); 
 
  } 

[audiogalleryengine.php]

Loading Audios

Audios are loaded when a playlist is changed or the user does an audio search.

<div id="audiolist"> 
     
div> 

[index.html]

//Event handler for playlistselect change 
$("#playlistselect").change(function(){ 
    searchaudio(); 
    $("#currentplaylist span").text($("#playlistselect :selected").text()); 
}); 
 
//Initializing the audio search button 
$("#searchbtnimg").click(function(){ 
    searchaudio(); 
}); 
 
//Calling search audio function each time when user presses a key 
$("#searchinput").keyup(function(){ 
    searchaudio(); 
}); 
 
function searchaudio() 
{ 
    searchxhrabort(); 
    $("#audiolist").showLoading(); 
    window.searchxhr = $.ajax({ 
        type: "POST", 
        url: "php/audiogalleryengine.php", 
        data: "playlistid="+$('#playlistselect').val()+"&searchtext="+$('#searchinput').val(), 
        success: function(html){ 
            //Adding the ajax returned audiotracks to the audiolist and reinitializing jscrollpane 
           window.scrollableaudiolist.html(html); 
           window.jscrollapi.reinitialise(); 
           $("#audiolist").hideLoading(); 
 
           //Storing previous currentplaytime beforing creating a new playlist from the new search items because after creating the new playlist the currentplaytime would automatically get to zero so that I can seek properly if the old element is found in the new search 
           $("#player").data("previouscurrenttime",$("#player").data("currenttime")); 
           //Reinitializing the playlist for jplayer 
           createplaylist(); 
           //Checking if the current playing track in the old playlist is also present in the new search list and taking actions accordingly 
           var trackidifany=currenttrackinnewsearch(); 
           if (trackidifany===false) 
           { 
               window.audioPlaylist.playlistChange(0); 
               $("#jquery_jplayer_2").jPlayer("stop"); 
           } 
           else 
           { 
                window.audioPlaylist.playlistChange(trackidifany); 
                $("#jquery_jplayer_2").jPlayer("pause",$("#player").data("previouscurrenttime")); 
           } 
 
           //Adding event hander for the newly loaded audiotracks 
           $(".audiotrack").click(function(){ 
                var audiotrackindex=$(this).index(); 
                window.audioPlaylist.playlistChange(audiotrackindex); 
            }); 
        } 
    }); 
} 

[script_audio.js]

if (isset($_POST['playlistid']) && isset($_POST['searchtext'])) 
  { 
      $playlistid=$_POST['playlistid']; 
      $searchtext=$_POST['searchtext']; 
 
      if ($searchtext=="") $searchtext="%"; else $searchtext="%".$searchtext."%"; 
 
      if ($playlistid==0) $query="SELECT audio.name AS name,audio.title AS title,audio.playlist_id AS playlistid,playlist.user_id AS userid FROM (audio JOIN playlist ON audio.playlist_id=playlist.id) WHERE audio.title LIKE '{$searchtext}'"; 
 
      else $query="SELECT audio.name AS name,audio.title AS title,audio.playlist_id AS playlistid,playlist.user_id AS userid FROM (audio JOIN playlist ON audio.playlist_id=playlist.id) WHERE audio.playlist_id={$playlistid} AND audio.title LIKE '{$searchtext}'"; 
 
      $result=$mysqli->query($query); 
 
      $html=""; 
 
      while($tuple=$result->fetch_array()) 
 
      { 
 
        $userid=$tuple['userid']; 
 
        $playlistid=$tuple['playlistid']; 
 
        $name=$tuple['name']; 
 
        $title=$tuple['title']; 
 
        $audiourl="{$root}audiogallery/user_{$userid}/playlist_{$playlistid}/audios/{$name}"; 
 
        $html.="{$title}
"; 
      } 
 
      $html.=""; 
 
      echo $html; 
  } 

[audiogalleryengine.php]

Initializing Playlist

The audio player in audio-gallery-suite uses Jplayer for playback and maintaining playlist information. But a slight catch is that it is well documented for (or say only made for) static playlist, so I had to use some tricks to feed the playlist data to Jplayer’s playlist function so everything works smoothly.

function createplaylist() 
{ 
    var objectarraystring="var myaudioplaylist=["; 
    $(".audiotrack").each(function(){ 
        objectarraystring=objectarraystring+"{name:\""+$(this).text()+"\",mp3:\""+$(this).attr('url')+"\"},"; 
    }); 
    objectarraystring+="]"; 
    eval(objectarraystring); 
 
    audioPlaylist = new window.Playlist("2",myaudioplaylist, { 
    ready: function() { 
        audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay. 
    }, 
    ended: function() { 
        audioPlaylist.playlistNext(); 
    }, 
    play: function() { 
        $(this).jPlayer("pauseOthers"); 
    }, 
    swfPath: "flash", 
    supplied: "mp3", 
    solution: "html, flash", 
    wmode: "window", 
    preload: "auto" 
}); 
} 

[script_audio.js]

Playing audio/Initializing Jplayer

<div id="player"> 
    <div id="jquery_jplayer_2" class="jp-jplayer">div> 
            <div class="jp-audio"> 
            <div class="jp-type-playlist"> 
                <div id="jp_interface_2" class="jp-interface"> 
                    <ul class="jp-controls"> 
                        <li><a href="#" class="jp-play" tabindex="1">playa>li> 
                        <li><a href="#" class="jp-pause" tabindex="1">pausea>li> 
                        <li><a href="#" class="jp-stop" tabindex="1">stopa>li> 
                        <li><a href="#" class="jp-mute" tabindex="1">mutea>li> 
                        <li><a href="#" class="jp-unmute" tabindex="1">unmutea>li> 
                        <li><a href="#" class="jp-previous" tabindex="1">previousa>li> 
                        <li><a href="#" class="jp-next" tabindex="1">nexta>li> 
                    ul> 
                    <div class="jp-progress"> 
                        <div class="jp-seek-bar"> 
                            <div class="jp-play-bar">div> 
                        div> 
                    div> 
                    <div class="jp-volume-bar"> 
                        <div class="jp-volume-bar-value">div> 
                    div> 
                    <div class="jp-current-time">div> 
                    <div class="jp-duration">div> 
                div> 
            div> 
        div> 
div> 

[index.html]

$(document).ready(function(){ 
//Other code here see source files, removed it for a clearer view 
//Global variables for playlist management 
var Playlist; 
var audioPlaylist; 
 
/*Defines Jplayer Playlist Class*/ 
initjplayerplaylistfunctions(); 
}); 
 
function initjplayerplaylistfunctions() 
{ 
        Playlist = function(instance, playlist, options) { 
        var self = this; 
 
        this.instance = instance; // String: To associate specific HTML with this playlist 
        this.playlist = playlist; // Array of Objects: The playlist 
        this.options = options; // Object: The jPlayer constructor options for this playlist 
 
        this.current = 0; 
 
        this.cssId = { 
            jPlayer: "jquery_jplayer_", 
            interface: "jp_interface_", 
            playlist: "jp_playlist_" 
        }; 
        this.cssSelector = {}; 
 
        $.each(this.cssId, function(entity, id) { 
            self.cssSelector[entity] = "#" + id + self.instance; 
        }); 
 
        if(!this.options.cssSelectorAncestor) { 
            this.options.cssSelectorAncestor = this.cssSelector.interface; 
        } 
 
        $(this.cssSelector.jPlayer).jPlayer(this.options); 
 
        $(this.cssSelector.interface + " .jp-previous").click(function() { 
            self.playlistPrev(); 
            $(this).blur(); 
            return false; 
        }); 
 
        $(this.cssSelector.interface + " .jp-next").click(function() { 
            self.playlistNext(); 
            $(this).blur(); 
            return false; 
        }); 
    }; 
 
    Playlist.prototype = { 
        playlistInit: function(autoplay) { 
            if(autoplay) { 
                this.playlistChange(this.current); 
            } else { 
                this.playlistConfig(this.current); 
            } 
        }, 
        playlistConfig: function(index) { 
            $(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current"); 
            $(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current"); 
            this.current = index; 
            $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]); 
            $("#nowplaying span").text(this.playlist[this.current].name);/*added this line*/ 
            $("#player").data("currenttrackurl",this.playlist[this.current].mp3);/*added this line*/ 
            playlistuiupdate(1,$('#player').data("currenttrackindex"),index);/*added this line*/ 
            $('#player').data("currenttrackindex",index);/*added this line*/ 
            shareupdate($("#player").data("currenttrackurl"),this.playlist[this.current].name);/*added this line*/ 
            //$('.sharebar input').attr('value',$("#player").data("currenttrackurl")).select();/*added this line*/ 
        }, 
        playlistChange: function(index) { 
            this.playlistConfig(index); 
            $(this.cssSelector.jPlayer).jPlayer("play"); 
        }, 
        playlistNext: function() { 
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0; 
            this.playlistChange(index); 
        }, 
        playlistPrev: function() { 
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1; 
            this.playlistChange(index); 
        } 
    }; 
} 
 
function createplaylist() 
{ 
    var objectarraystring="var myaudioplaylist=["; 
    $(".audiotrack").each(function(){ 
        objectarraystring=objectarraystring+"{name:\""+$(this).text()+"\",mp3:\""+$(this).attr('url')+"\"},"; 
    }); 
    objectarraystring+="]"; 
    eval(objectarraystring); 
 
    audioPlaylist = new window.Playlist("2",myaudioplaylist, { 
    ready: function() { 
        audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay. 
    }, 
    ended: function() { 
        audioPlaylist.playlistNext(); 
    }, 
    play: function() { 
        $(this).jPlayer("pauseOthers"); 
    }, 
    swfPath: "flash", 
    supplied: "mp3", 
    solution: "html, flash", 
    wmode: "window", 
    preload: "auto" 
}); 
} 

[script_audio.js]

Rotating Disc

<div id="coverart"> 
<img src="image/audiogallery_images/coverart.png" oriwidth="693" oriheight="680" width="693" height="680" alt="coverart" /> 
<img id="rotatingdisc" src="image/audiogallery_images/rotating_disc.png" width="350" height="350" alt="rotatingdisc" /> 
div> 

[index.html]

$(document).ready(function(){ 
    //Other code is present here, see source files. Removed for clarity 
    //adding audioplaying status data to my player and starting the disc 
    $("#jquery_jplayer_2").bind($.jPlayer.event.play, function() { 
          $("#player").data("audioplaying",true); 
        startdisk(); 
    }); 
    //adding audioplaying status data to my player and stopping the disc 
    $("#jquery_jplayer_2").bind($.jPlayer.event.pause, function() { 
          $("#player").data("audioplaying",false); 
        stopdisk(); 
    }); 
}); 
 
 
function setdimensions() 
{ 
//Other code is present here, see source files. Removed for clarity 
// Making the coverart rotatingdisc to the correct size and positioning it 
$("#rotatingdisc").width($("#coverart img").width()/1.98); 
$("#rotatingdisc").height($("#rotatingdisc").width()); 
var rotatingdiscleftposition=$("#coverart img").position().left+$("#coverart img").width()/2.240896; 
var rotatingdisctopposition=$("#coverart img").position().top+$("#coverart img").height()/4.65753; 
$("#rotatingdisc").css('left',rotatingdiscleftposition); 
$("#rotatingdisc").css('top',rotatingdisctopposition); 
//rotatingdisc code end 
} 
 
//Rotate disk at regular intervals by specified angle 
function rotatedisk(element,angle) 
{ 
    stopdisk(); 
    element.stop().animate({rotate: '+=150deg'}, 800, 'easeInCubic', function() { 
        var intervalid = setInterval( 
           function () { 
              element.animate({rotate: '+=' + angle + 'deg'}, 0); 
          }, 
          25 
        ); 
        element.data('intervalid', intervalid); 
    }); 
} 
 
function stopdisk() 
{ 
    var intervalid = $('#rotatingdisc').data('intervalid'); 
    clearInterval(intervalid); 
    $('#rotatingdisc').stop().animate({rotate: '+=150deg'}, 800, 'easeOutCubic'); 
} 
 
function startdisk() 
{ 
    var randnum=Math.floor(Math.random() * (60 - 10 + 1) + 10);//remove this if it doesn't suite you 
    rotatedisk($('#rotatingdisc'),randnum); 
} 

[script_audio.js]

Keyboard Support

function initplayerkeyboardsupport() 
{ 
    $(document).keydown(function(event) 
    { 
        //for seeking 
        if (event.shiftKey) 
        { 
            switch (event.keyCode) 
            { 
                case 37: // left arrow 
                    $("#player").data("currenttime")-1>=0?$("#jquery_jplayer_2").jPlayer("playHead", $("#player").data("currenttime")-1):null; 
                    if (($("#player").data("currenttime")-1)>=0) 
                    { 
                        if ($("#player").data("audioplaying")) 
                        { 
                            $("#jquery_jplayer_2").jPlayer("play", $("#player").data("currenttime")-1); 
                            $("#jquery_jplayer_2").jPlayer("play"); 
                        } 
                        else 
                        { 
                            $("#jquery_jplayer_2").jPlayer("pause", $("#player").data("currenttime")-1); 
                        } 
                    } 
                    return; 
                    break; 
                case 39: // right arrow 
                    if (($("#player").data("currenttime")+1)<=$("#player").data("currenttrackduration")) 
                    { 
                        if($("#player").data("audioplaying")) 
                        { 
                            $("#jquery_jplayer_2").jPlayer("play", $("#player").data("currenttime")+1); 
                            $("#jquery_jplayer_2").jPlayer("play"); 
                        } 
                        else 
                        { 
                            $("#jquery_jplayer_2").jPlayer("pause", $("#player").data("currenttime")+1); 
                        } 
                    } 
                    return; 
                    break; 
            } 
        } 
        switch (event.keyCode) 
        { 
            case 37: // left arrow 
                  window.audioPlaylist!=undefined?window.audioPlaylist.playlistPrev():null; 
                  break; 
            case 39: // right arrow 
                window.audioPlaylist!=undefined?window.audioPlaylist.playlistNext():null; 
                break; 
            case 32: // space 
                if ($("#player").data("audioplaying")===false || $("#player").data("audioplaying")===undefined) 
                { 
                    $("#jquery_jplayer_2").jPlayer("play"); 
                    $("#player").data("audioplaying",true); 
                } 
                else 
                { 
                    $("#jquery_jplayer_2").jPlayer("pause"); 
                    $("#player").data("audioplaying",false); 
                } 
                  break; 
            case 77: // m 
                  if ($("#player").data("muted")===false || $("#player").data("muted")===undefined) 
                { 
                    $("#jquery_jplayer_2").jPlayer("mute"); 
                    $("#player").data("muted",true); 
                } 
                else 
                { 
                    $("#jquery_jplayer_2").jPlayer("unmute"); 
                    $("#player").data("muted",false); 
                } 
                  break; 
            case 109: // M 
                  if ($("#player").data("muted")===false || $("#player").data("muted")===undefined) 
                { 
                    $("#jquery_jplayer_2").jPlayer("mute"); 
                    $("#player").data("muted",true); 
                } 
                else 
                { 
                    $("#jquery_jplayer_2").jPlayer("unmute"); 
                    $("#player").data("muted",false); 
                } 
                  break; 
          } 
    }); 
} 

[script_audio.js]

Downloading Audio

 1: <a id="downloadaudiotool" target="_blank" class="button gray medium">DOWNLOADa> 

[index.html]

$(document).ready(function(){ 
//Other code is present here, see source files. Removed for clarity 
$("#downloadaudiotool").click(function(){ 
        var filedownloadpath=encodeURIComponent($("#player").data("currenttrackurl")); 
        $("#downloadaudiotool").attr('href','php/downloadengine.php?file='+filedownloadpath); 
}); 
}); 
 
function initjplayerplaylistfunctions() 
{ 
    Playlist = function(instance, playlist, options) { 
        //Other code is present here, see source files. Removed for clarity 
        playlistConfig: function(index) { 
            $(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current"); 
            $(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current"); 
            this.current = index; 
            $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]); 
            $("#nowplaying span").text(this.playlist[this.current].name); 
            $("#player").data("currenttrackurl",this.playlist[this.current].mp3); 
            playlistuiupdate(1,$('#player').data("currenttrackindex"),index); 
            $('#player').data("currenttrackindex",index); 
            shareupdate($("#player").data("currenttrackurl"),this.playlist[this.current].name); 
} 

[script_audio.js]

Audio Sharing

Audio sharing uses the AddThis utility (http://www.addthis.com/) . As each new audio is set to play, I created a new instance of AddThis after removing the old instance from the DOM because AddThis is easy to implement and initialize with static content and mostly single elements, and here I wanted a single SHARE button for multiple audios which may exist dynamically over time, so I used this simple workaround to make it easy for me.

function initjplayerplaylistfunctions() 
{ 
    Playlist = function(instance, playlist, options) 
    { 
        //Other code is present here, see source files. Removed for clarity 
        playlistConfig: function(index) 
        { 
            $(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current"); 
            $(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current"); 
            this.current = index; 
            $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]); 
            $("#nowplaying span").text(this.playlist[this.current].name); 
            $("#player").data("currenttrackurl",this.playlist[this.current].mp3); 
            playlistuiupdate(1,$('#player').data("currenttrackindex"),index); 
            $('#player').data("currenttrackindex",index); 
            shareupdate($("#player").data("currenttrackurl"),this.playlist[this.current].name); 
        } 
    } 
} 
function shareupdate(url,title) 
{ 
    $('#addthissharetool').remove(); 
    $('#toolbar').append('SHARE'); 
    url=encodeURI(url); 
    var sindhchatroombookmarkurl=encodeURI("http://www.sindhchatroom.com/bookmarks/add?address="+url+"&title="+title); 
    var sindhchatsharevalue={name: "SindhChatRoom",url:sindhchatroombookmarkurl ,icon: 'http://www.sindhchatroom.com/_graphics/toolbar_logo.png'}; 
    addthis.button( 
        '#addthissharetool', 
        { 
            ui_click: true, 
            ui_open_windows:true, 
            services_custom: 
            { 
                name: "SindhChatRoom", 
                url: sindhchatroombookmarkurl, 
                icon: "http://www.sindhchatroom.com/_graphics/toolbar_logo.png" 
            } 
        }, 
        { 
            url:url, 
            title:title, 
            description:'Visit robinrizvi.info' 
        } 
    ); 
 
    //Create gray to blue hover effect for toolbar buttons 
    $("#addthissharetool").hover(function(){ 
            $(this).removeClass('button gray medium').addClass('button blue medium'); 
        }, 
        function(){ 
            $(this).removeClass('button blue medium').addClass('button gray medium'); 
        } 
    ); 
} 

[script_audio.js]

Gallery Software

Let us see how some of the basic and intrinsic functionalities and features of the gallery management software are implemented in code. Most of the code in gallery management software is implemented in a way to support multithreaded architecture and to provide the user with a fast response and non-blocking UI experience. The code has a little flavor of the 3-tier architecture and as a result of that almost all of the code that is needed for database interaction resides in a static class called user [user.cs]. I will not be discussing the [user] class because it contains functions whose names are self explanatory as to what they do and you can always check the source files and read the comments therein or see the code for full understanding. Now lets start with the discussion of the basic functionalities of the gallery software and their implementation.

Login

private void loginbtn_Click(object sender, EventArgs e) 
        { 
            if (unametxt.Text != string.Empty && pwdtxt.Text != string.Empty) 
            { 
                userstatuspic.Visible = false; 
                loginloadingindicator.Visible = true; 
                loginloadingindicator.Active = true; 
                unametxt.Enabled = false; 
                pwdtxt.Enabled = false; 
                loginbtn.Enabled = false; 
                Thread loginthread = new Thread(user.login); 
                string[] unamepwd = { unametxt.Text, pwdtxt.Text }; 
                loginthread.Start(unamepwd); 
                while (loginthread.IsAlive) Application.DoEvents(); 
                if (user.isvalid) 
                { 
                    userstatuspic.Image = Properties.Resources.user_accept; 
                    userstatuspic.Visible = true; 
                    loginloadingindicator.Visible = false; 
                    loginloadingindicator.Active = false; 
                    Application.DoEvents(); 
                    Thread.Sleep(2000); 
                    main mainfrm = new main(); 
                    this.Hide(); 
                    mainfrm.ShowDialog(); 
                    this.Close(); 
                } 
                else 
                { 
                    userstatuspic.Image = Properties.Resources.user_remove; 
                    unametxt.Enabled = true; 
                    pwdtxt.Enabled = true; 
                    loginbtn.Enabled = true; 
                    userstatuspic.Visible = true; 
                    loginloadingindicator.Visible = false; 
                    loginloadingindicator.Active = false; 
                } 
            } 
            else MessageBox.Show("Please fill in all the fields."); 
        } 

[login.cs]

Show Playlists

private void showplaylists() 
{ 
    Thread getplaylistthread = new Thread(user.getplaylists); 
    getplaylistthread.Start(); 
    while (getplaylistthread.IsAlive) Application.DoEvents(); 
    playlistimagelist.Images.Clear(); 
    playlistview.Items.Clear(); 
    foreach (user.playlist playlist in user.playlists) 
    { 
        string filename = Application.StartupPath + "\\temp\\playlist_" + playlist.id + "\\" + playlist.thumb; 
        Bitmap img = new Bitmap(filename); 
        playlistimagelist.Images.Add(playlist.id.ToString(), img); 
        playlistview.Items.Add(playlist.name, playlist.id.ToString()); 
    } 
} 

[main.cs]

Show Audios

private void showaudios(Int32 currentplaylistid) 
{ 
    Thread getaudiothread = new Thread(user.getaudios); 
    getaudiothread.Start(currentplaylistid); 
    while (getaudiothread.IsAlive) Application.DoEvents(); 
    audioimagelist.Images.Clear(); 
    audiolistview.Items.Clear(); 
    foreach (user.audio audio in user.audios) 
    { 
        audioimagelist.Images.Add(audio.id.ToString(), Properties.Resources.audio);//Containing same image multiple times I dun know if that will cause a perf. hit or microsoft has coded it efficiently. I dun hav time to chk. I'll see later. 
        audiolistview.Items.Add(audio.title, audio.id.ToString()); 
    } 
} 

[main.cs]

Add Playlist

private void playlistadd() 
        { 
            int thumbnailwidth = 150; 
            int thumbnailheight = 150; 
            try 
            { 
                #region add records in the playlist table for the new playlist 
                UInt32 newaddedplaylistid = user.addplaylist(nametxt.Text, new FileInfo(thumbnametxt.Text).Name, descriptiontxt.Text); 
                if (newaddedplaylistid == 0) throw new Exception(); 
                #endregion 
                try 
                { 
                    #region creating folders for the playlist on the remote server 
                    //creating playlist folder 
                    string createpath = user.ftpurl + "user_" + user.userid + "/playlist_" + newaddedplaylistid; 
                    FtpWebRequest request = (FtpWebRequest)FtpWebRequest.Create(createpath); 
                    request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                    request.KeepAlive = true; 
                    request.Method = WebRequestMethods.Ftp.MakeDirectory; 
                    request.GetResponse(); 
 
                    //creating thumbs folder in playlist folder 
                    //createpath = user.ftpurl + "user_" + user.userid + "/playlist_" + newaddedplaylistid + "/thumbs"; 
                    //request = (FtpWebRequest)FtpWebRequest.Create(createpath); 
                    //request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                    //request.KeepAlive = true; 
                    //request.Method = WebRequestMethods.Ftp.MakeDirectory; 
                    //request.GetResponse(); 
 
                    //creating audios folder in the playlist folder 
                    createpath = user.ftpurl + "user_" + user.userid + "/playlist_" + newaddedplaylistid + "/audios"; 
                    request = (FtpWebRequest)FtpWebRequest.Create(createpath); 
                    request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                    request.KeepAlive = true; 
                    request.Method = WebRequestMethods.Ftp.MakeDirectory; 
                    request.GetResponse(); 
                    #endregion 
 
                    #region uploading thumbnail of the playlist to the remote server 
                    try 
                    { 
                        int ChunkSize = 4096, NumRetries = 0, MaxRetries = 20; 
                        byte[] Buffer = new byte[ChunkSize]; 
                        string onlythumbname = new FileInfo(thumbnametxt.Text).Name; 
                        Image thumbimg = Image.FromFile(thumbnametxt.Text).GetThumbnailImage(thumbnailwidth, thumbnailheight, thumbnailcreationfailedcallback, IntPtr.Zero); 
                        MemoryStream thumbimgstream = new MemoryStream(); 
                        thumbimg.Save(thumbimgstream, System.Drawing.Imaging.ImageFormat.Jpeg); 
                        thumbimgstream.Position = 0; 
                        string UploadPath = user.ftpurl + "user_" + user.userid + "/playlist_" + newaddedplaylistid + "/" + onlythumbname; 
                        request = (FtpWebRequest)WebRequest.Create(UploadPath); 
                        request.Method = WebRequestMethods.Ftp.UploadFile; 
                        request.KeepAlive = true; 
                        request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                        using (Stream requestStream = request.GetRequestStream()) 
                        { 
                            using (thumbimgstream) 
                            { 
                                int BytesRead = thumbimgstream.Read(Buffer, 0, ChunkSize);    // read the first chunk in the buffer 
                                // send the chunks to the web service one by one, until FileStream.Read() returns 0, meaning the entire file has been read. 
                                while (BytesRead > 0) 
                                { 
                                    try 
                                    { 
                                        requestStream.Write(Buffer, 0, BytesRead); 
                                    } 
                                    catch 
                                    { 
                                        if (NumRetries++ < MaxRetries) 
                                        { 
                                            // rewind the imagememeorystream and keep trying 
                                            thumbimgstream.Position -= BytesRead; 
                                        } 
                                        else 
                                        { 
                                            throw new Exception(); 
                                        } 
                                    } 
                                    BytesRead = thumbimgstream.Read(Buffer, 0, ChunkSize);    // read the next chunk (if it exists) into the buffer. the while loop will terminate if there is nothing left to read 
                                } 
                            } 
                        } 
                    } 
                    catch (Exception) 
                    { 
                        //thumbnail could not be uploaded so remote folders have to be deleted 
                        #region deleting folder that were created for the playlist 
                        string deletepath = user.ftpurl + "user_" + user.userid + "/playlist_" + newaddedplaylistid; 
                        new DeleteFTPDirectory().DeleteDirectoryHierarcy(deletepath); 
                        #endregion 
                        throw new Exception(); 
                    } 
                    #endregion 
                } 
                catch (Exception) 
                { 
                    #region deleting playlist record from the database 
                    //If folder could not be created or thumbnail could not be created remove the playlist record from the playlist table in the database 
                    user.deleteplaylist(newaddedplaylistid); 
                    throw new Exception(); 
                    #endregion 
                } 
            } 
            catch (Exception) 
            { 
                MessageBox.Show("The playlist could not be added"); 
                return; 
            } 
            MessageBox.Show("The playlist has been added"); 
            //this.Close(); 
        } 

[addplaylist.cs]

Edit Playlist

private void playlistedit() 
        { 
            bool thumbuploaded = true; 
            if (new FileInfo(thumbnametxt.Text).Name != playlisttoedit.thumb) 
            { 
                #region uploading thumbnail of the playlist to the remote server 
                try 
                { 
                    int thumbnailwidth = 150; 
                    int thumbnailheight = 150; 
                    int ChunkSize = 4096, NumRetries = 0, MaxRetries = 20; 
                    byte[] Buffer = new byte[ChunkSize]; 
                    string onlythumbname = new FileInfo(thumbnametxt.Text).Name; 
                    Image thumbimg = Image.FromFile(thumbnametxt.Text).GetThumbnailImage(thumbnailwidth, thumbnailheight, thumbnailcreationfailedcallback, IntPtr.Zero); 
                    MemoryStream thumbimgstream = new MemoryStream(); 
                    thumbimg.Save(thumbimgstream, System.Drawing.Imaging.ImageFormat.Jpeg); 
                    thumbimgstream.Position = 0; 
                    string UploadPath = user.ftpurl + "user_" + user.userid + "/playlist_" + playlisttoedit.id + "/" + onlythumbname; 
                    FtpWebRequest request = (FtpWebRequest)WebRequest.Create(UploadPath); 
                    request.Method = WebRequestMethods.Ftp.UploadFile; 
                    request.KeepAlive = true; 
                    request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                    using (Stream requestStream = request.GetRequestStream()) 
                    { 
                        using (thumbimgstream) 
                        { 
                            int BytesRead = thumbimgstream.Read(Buffer, 0, ChunkSize);    // read the first chunk in the buffer 
                            // send the chunks to the web service one by one, until FileStream.Read() returns 0, meaning the entire file has been read. 
                            while (BytesRead > 0) 
                            { 
                                try 
                                { 
                                    requestStream.Write(Buffer, 0, BytesRead); 
                                } 
                                catch 
                                { 
                                    if (NumRetries++ < MaxRetries) 
                                    { 
                                        // rewind the imagememeorystream and keep trying 
                                        thumbimgstream.Position -= BytesRead; 
                                    } 
                                    else 
                                    { 
                                        throw new Exception(); 
                                    } 
                                } 
                                BytesRead = thumbimgstream.Read(Buffer, 0, ChunkSize);    // read the next chunk (if it exists) into the buffer. the while loop will terminate if there is nothing left to read 
                            } 
                        } 
                    } 
                } 
                catch (Exception) 
                { 
                    //thumbnail could not be uploaded 
                    thumbuploaded = false; 
                } 
                #endregion 
            } 
            if (thumbuploaded) 
            { 
                if (!(user.updateplaylist((UInt32)playlisttoedit.id, nametxt.Text, new FileInfo(thumbnametxt.Text).Name, descriptiontxt.Text))) 
                { 
                    #region deleting the new thumbnail that was uploaded because the entry in the database could not be made 
                    if (new FileInfo(thumbnametxt.Text).Name != playlisttoedit.thumb) 
                    { 
                        try 
                        { 
                            string deletepath = user.ftpurl + "user_" + user.userid + "/playlist_" + playlisttoedit.id + "/" + new FileInfo(thumbnametxt.Text).Name; 
                            FtpWebRequest request = (FtpWebRequest)FtpWebRequest.Create(deletepath); 
                            request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                            request.Method = WebRequestMethods.Ftp.DeleteFile; 
                            request.KeepAlive = true; 
                            request.GetResponse(); 
                        } 
                        catch (Exception) 
                        { 
                            //do nothing if thumb could not be deleted, later on it'll be done via garbage collector  
                        } 
                    } 
                    #endregion 
                    MessageBox.Show("The playlist could not be updated"); 
                } 
                else 
                { 
                    #region deleting the old playlist thumb from the remote server and the local temp folder 
                    if (new FileInfo(thumbnametxt.Text).Name != playlisttoedit.thumb) 
                    { 
                        try 
                        { 
                            string deletepath = user.ftpurl + "user_" + user.userid + "/playlist_" + playlisttoedit.id + "/" + playlisttoedit.thumb; 
                            FtpWebRequest request = (FtpWebRequest)FtpWebRequest.Create(deletepath); 
                            request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                            request.Method = WebRequestMethods.Ftp.DeleteFile; 
                            request.KeepAlive = true; 
                            request.GetResponse(); 
                            //deleting the old thumb from the local temp folder 
                            deletepath = Application.StartupPath + "\\temp\\playlist_" + playlisttoedit.id + "\\" + playlisttoedit.thumb; 
                            if (File.Exists(deletepath)) File.Delete(deletepath); 
                        } 
                        catch (Exception) 
                        { 
                            //do nothing if old thumb could not be deleted, later on it'll be done via garbage collector 
                        } 
                    } 
                    #endregion 
                    MessageBox.Show("The playlist has been updated"); 
                } 
            } 
            else 
            { 
                MessageBox.Show("The playlist could not be updated"); 
            } 
        } 

[editplaylist.cs]

Delete Playlist

private void deleteplaylistbtn_Click(object sender, EventArgs e) 
        { 
            if (playlistview.SelectedItems.Count > 0) 
            { 
                if (DialogResult.OK == MessageBox.Show("Are you sure you want to delete the playlist?", "Delete Playlist", MessageBoxButtons.OKCancel)) 
                { 
                    UInt32 playlisttodeleteid = UInt32.Parse(playlistview.SelectedItems[0].ImageKey); 
                    try 
                    { 
                        if (!(user.deleteplaylist(playlisttodeleteid))) throw new Exception(); 
                        Thread deleteplaylistthread = new Thread(deleteplaylistthreadfunction); 
                        deleteplaylistthread.Start(playlisttodeleteid); 
                    } 
                    catch (Exception) 
                    { 
                        MessageBox.Show("Sorry the playlist could not be deleted"); 
                        return; 
                    } 
                    //MessageBox.Show("Playlist has been deleted."); 
                    #region refresh the main form 
                    playlistloadingindicator.Visible = true; 
                    playlistloadingindicator.Active = true; 
                    showplaylists(); 
                    playlistloadingindicator.Active = false; 
                    playlistloadingindicator.Visible = false; 
                    audioloadingindicator.Visible = true; 
                    audioloadingindicator.Active = true; 
                    if (playlistview.Items.Count > 0) 
                    { 
                        user.currentplaylistid = Int32.Parse(playlistview.Items[0].ImageKey); 
                        showaudios(user.currentplaylistid); 
                    } 
                    else audiolistview.Items.Clear(); 
                    audioloadingindicator.Active = false; 
                    audioloadingindicator.Visible = false; 
                    #endregion 
                } 
            } 
            else MessageBox.Show("Please select the playlist to delete"); 
        } 
 
 
private void deleteplaylistthreadfunction(object data) 
        { 
            UInt32 playlisttodeleteid = (UInt32)data; 
            deleteplaylist frm = new deleteplaylist(playlisttodeleteid); 
            frm.ShowDialog(); 
        } 

[main.cs]

void folderdeletionthread() 
        { 
            #region deleting folder that were created for the playlist on the remote server and the local temp folder 
            try 
            { 
                //deleting on the remote server 
                string deletepath = user.ftpurl + "user_" + user.userid + "/playlist_" + playlisttodeleteid; 
                new DeleteFTPDirectory().DeleteDirectoryHierarcy(deletepath); 
                //deleting on the local temp folder 
                deletepath = Application.StartupPath + "\\temp\\playlist_" + playlisttodeleteid; 
                if (Directory.Exists(deletepath)) Directory.Delete(deletepath, true); 
            } 
            catch (Exception) 
            { 
                //In case the remote folders could not be deleted I'll do nothing they will later be garbage collected 
            } 
            #endregion 
        } 

[deleteplaylist.cs]

Add Audio

private void uploadfilesbtn_Click(object sender, EventArgs e) 
        { 
            if (filename != string.Empty && titletxt.Text != string.Empty && descriptiontxt.Text != string.Empty) 
            { 
                uploadfilebtn.Enabled = false; 
                uploadfilebtn.Text = "PLEASE WAIT"; 
                addcoverart(filename, "poster.jpg"); 
                fileuploadbackgroundworker.RunWorkerAsync(filename); 
            } 
            else MessageBox.Show("Please fill in all the fields"); 
        } 
 
        private void fileuploadbackgroundworker_DoWork(object sender, DoWorkEventArgs e) 
        { 
            string UploadPath; 
            FtpWebRequest request; 
            int ChunkSize = 102400, NumRetries = 0, MaxRetries = 3; 
            byte[] Buffer = new byte[ChunkSize]; 
 
            //for updating status to the ui thread 
            decimal totalbytes = new FileInfo(filename).Length; 
            decimal totalbytesuploaded = 0; 
            //end 
 
            #region upload to remote, make database records,report progress to ui thread 
                string onlyfilename = new FileInfo(filename).Name; 
                bool fileuploadedremotely = true; 
 
                try 
                { 
                    if (fileuploadedremotely) 
                    { 
                        #region upload audio to remote server 
                        //convert the open filestraem to a image stream with jpeg format 
                        UploadPath = user.ftpurl + "user_" + user.userid + "/playlist_" + user.currentplaylistid + "/audios/" + onlyfilename; 
                        request = (FtpWebRequest)WebRequest.Create(UploadPath); 
                        //request.UseBinary = true; 
                        //request.UsePassive = true; 
                        request.Method = WebRequestMethods.Ftp.UploadFile; 
                        request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                        using (Stream requestStream = request.GetRequestStream()) 
                        { 
                            using (FileStream fs = File.Open(filename, FileMode.Open, FileAccess.Read)) 
                            { 
                                int BytesRead = fs.Read(Buffer, 0, ChunkSize);    // read the first chunk in the buffer 
                                // send the chunks to the web service one by one, until FileStream.Read() returns 0, meaning the entire file has been read. 
                                while (BytesRead > 0) 
                                { 
                                    try 
                                    { 
                                        requestStream.Write(Buffer, 0, BytesRead); 
                                        totalbytesuploaded += BytesRead; 
                                        #region report progress to the ui thread 
                                        int percentage = (int)(((float)totalbytesuploaded * 100) / ((float)totalbytes)); 
                                        string statustext = string.Format("{0:0.00} Mb/{1:0.00} Mb", (float)(totalbytesuploaded / (1024 * 1024)), (float)(totalbytes / (1024 * 1024))); 
                                        fileuploadbackgroundworker.ReportProgress(percentage, statustext); 
                                        #endregion 
                                    } 
                                    catch 
                                    { 
                                        if (NumRetries++ < MaxRetries) 
                                        { 
                                            // rewind the filestream and keep trying 
                                            fs.Position -= BytesRead; 
                                        } 
                                        else 
                                        { 
                                            //MessageBox.Show("Could not upload " + onlyfilename + " after several attempts. Please check your network connectivity. This file will be skipped."); 
                                            fileuploadedremotely = false;//I could have thrown an exception here but by checking a variable its less costly than throwing and catching albiet its more elegant 
                                            break; 
                                        } 
                                    } 
                                    BytesRead = fs.Read(Buffer, 0, ChunkSize);    // read the next chunk (if it exists) into the buffer. the while loop will terminate if there is nothing left to read 
                                } 
                            } 
                        } 
                        #endregion 
                    } 
 
                    if (fileuploadedremotely) 
                    { 
                        #region add record to the database 
                        if (!user.insertaudio(onlyfilename, titletxt.Text, descriptiontxt.Text, user.currentplaylistid)) fileuploadedremotely = false; 
                        #endregion 
                    } 
                } 
                catch 
                { 
                    fileuploadedremotely = false; 
                } 
 
                if (!fileuploadedremotely) 
                { 
                    user.deleteaudio(onlyfilename, user.currentplaylistid); 
                    MessageBox.Show("The file could not be uploaded. The reason could be slow or no internet connectivity"); 
                    filename = string.Empty; 
                    //code should be written here to delete the audio that was uploaded but some database error occured but that is a rare chance, so ignoring the code piece here 
                } 
                else 
                { 
                    #region report progress to the ui thread 
                    int percentage = 100; 
                    string statustext = string.Format("{0:0.00} Mb/{1:0.00} Mb", (float)(totalbytes / (1024 * 1024)), (float)(totalbytes / (1024 * 1024))); 
                    fileuploadbackgroundworker.ReportProgress(percentage, statustext); 
                    #endregion 
                    MessageBox.Show("The file has been uploaded"); 
                    filename = string.Empty; 
                } 
 
 
            #endregion 
        } 
 
        private void fileuploadbackgroundworker_ProgressChanged(object sender, ProgressChangedEventArgs e) 
        { 
            progressbar.Value = e.ProgressPercentage; 
            try 
            { 
                numofbytesuploadedstatuslbl.Text = e.UserState.ToString(); 
            } 
            catch (Exception) 
            { 
                //exception occurs due to multithreading this function gets executed concurrently and so stack of this function gets duplicate values for same variable and sometimes so even the stack gets overflowed  
                //do nothing 
 
            } 
        } 
 
        private void fileuploadbackgroundworker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e) 
        { 
            uploadfilebtn.Enabled = true; 
            uploadfilebtn.Text = "UPLOAD AUDIO"; 
            progressbar.Value = 0; 
            numofbytesuploadedstatuslbl.Text = "Operation Completed"; 
            filenametxt.Text = ""; 
            titletxt.Text = ""; 
            descriptiontxt.Text = ""; 
            filename = string.Empty; 
        } 

[upload.cs]

Edit Audio

private void editaudiobtn_Click(object sender, EventArgs e) 
        { 
            editaudiobtn.Enabled = false; 
            titletxt.Enabled = false; 
            descriptiontxt.Enabled = false; 
            editaudiobtn.Text = "Please Wait..."; 
            Application.DoEvents(); 
            if (string.IsNullOrEmpty(nametxt.Text) || string.IsNullOrEmpty(titletxt.Text) || string.IsNullOrEmpty(descriptiontxt.Text)) 
            { 
                MessageBox.Show("Please fill in all the fields"); 
            } 
            else 
            { 
                string[] fields = {titletxt.Text,descriptiontxt.Text}; 
                editaudiothread = new Thread(audioedit); 
                editaudiothread.Start(fields); 
                while (editaudiothread.IsAlive) Application.DoEvents(); 
            } 
            this.Close(); 
        } 
 
        private void audioedit(object fields) 
        { 
            string[] title_decription = (string[])fields; 
            if (user.updateaudio(audio.id, title_decription[0], title_decription[1])) MessageBox.Show("The audio has been updated"); 
            else MessageBox.Show("The audio could not updated due to a title mismatch or some internal errors. Try changing the title or try again later"); 
        } 

[editaudio.cs]

Delete Audio

private void deleteaudiobtn_Click(object sender, EventArgs e) 
        { 
            Dictionary<string, string> audios = new Dictionary<string, string>(); 
            string[] filenames = new string[audiolistview.SelectedItems.Count]; 
            for (int i=0;i 
            { 
                audios.Add(audiolistview.SelectedItems[i].ImageKey, audiolistview.SelectedItems[i].Text); 
            } 
            if (audios.Count > 0) 
            { 
                delete frm = new delete(audios); 
                frm.ShowDialog(); 
            } 
            else MessageBox.Show("Please select some audios to delete"); 
 
            //refresh the audio view list box 
            audioloadingindicator.Visible = true; 
            audioloadingindicator.Active = true; 
            showaudios(user.currentplaylistid); 
            audioloadingindicator.Active = false; 
            audioloadingindicator.Visible = false; 
            //end refresh 
        } 

[main.cs]

private void deleteaudiosbackgroundworker_DoWork(object sender, DoWorkEventArgs e) 
        { 
            long totalfiles = audios.Keys.Count; 
            long totalfilesdeleted = 0; 
            long totalfilesskipped = 0; 
 
            //selecting each audio one by one and deleting it from database,local temp and remote server 
            foreach (KeyValuePair<string, string> audio in audios) 
            { 
                bool filedeleted = false; 
                string audiofilename=user.getaudiofilename(ulong.Parse(audio.Key)); 
 
                #region deleting audio record from database 
                if (user.deleteaudio(ulong.Parse(audio.Key))) filedeleted = true; 
                #endregion 
 
                if (filedeleted == true) 
                { 
                    #region deleting audio from the local temp folder 
                    try 
                    { 
                        string pathtoaudio = Application.StartupPath + "\\temp\\playlist_" + user.currentplaylistid + "\\audios\\" + audiofilename; 
                        if (File.Exists(pathtoaudio)) File.Delete(pathtoaudio); 
                    } 
                    catch 
                    { 
                        //do nothing. Later on we can do garbage collection in the local temp folder 
                    } 
                    #endregion 
                } 
 
                if (filedeleted == true) 
                { 
                    #region deleting audio from the remote server 
                    try 
                    { 
                        #region deleting audio from the remote server 
                        string deletepath = user.ftpurl + "user_" + user.userid + "/playlist_" + user.currentplaylistid + "/audios/" + audiofilename; 
                        FtpWebRequest request = (FtpWebRequest)FtpWebRequest.Create(deletepath); 
                        request.Credentials = new NetworkCredential(user.ftpusername, user.ftppassword); 
                        request.KeepAlive = true; 
                        request.Method = WebRequestMethods.Ftp.DeleteFile; 
                        request.GetResponse(); 
                        #endregion 
                    } 
                    catch 
                    { 
                        //do nothing. Later on we could do garbage collection at the remote server 
                    } 
                    #endregion 
                } 
 
                if (filedeleted == true) 
                { 
                    totalfilesdeleted++; 
                } 
                else 
                { 
                    totalfilesskipped++; 
                } 
 
                long[] userstate=new long[2]; 
                userstate[0]=totalfilesdeleted; 
                userstate[1]=totalfiles; 
                int percentage = (int)((float)(totalfilesdeleted * 100) / (float)(totalfiles - totalfilesskipped)); 
                deleteaudiosbackgroundworker.ReportProgress(percentage, userstate); 
            } 
            if (totalfilesskipped > 0) MessageBox.Show("Some of the files could not be deleted"); 
        } 
 
        private void deleteaudiosbackgroundworker_ProgressChanged(object sender, ProgressChangedEventArgs e) 
        { 
            string labeltxt = ((long[])e.UserState)[0].ToString() + "/" + ((long[])e.UserState)[1].ToString(); 
            deletestatuslbl.Text = labeltxt; 
            deleteprogressbar.Value = e.ProgressPercentage; 
        } 
 
        private void deleteaudiosbackgroundworker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e) 
        { 
            deletestatuslbl.Text = "Operation Completed"; 
            MessageBox.Show("The delete operation has completed"); 
            this.Close(); 
        } 

[delete.cs]

Create User

private void createuserbtn_Click(object sender, EventArgs e) 
        { 
            if (string.IsNullOrWhiteSpace(nametxt.Text) || string.IsNullOrWhiteSpace(unametxt.Text) || string.IsNullOrWhiteSpace(pwdtxt.Text) || string.IsNullOrWhiteSpace(confirmpwdtxt.Text) || string.IsNullOrWhiteSpace(descriptiontxt.Text)) MessageBox.Show("Please fill in all the fields"); 
            else 
            { 
                if (pwdtxt.Text == confirmpwdtxt.Text) 
                { 
                    createuserbtn.Enabled = false; 
                    createuserbtn.Text = "PLEASE WAIT"; 
                    Application.DoEvents(); 
                    if (user.createuser(nametxt.Text, unametxt.Text, pwdtxt.Text, descriptiontxt.Text)) 
                    { 
                        MessageBox.Show("The user has been created"); 
                        clearfields(); 
                    } 
                    else MessageBox.Show("The user could not be created due to some internal error or username mismatch. Try changing the username"); 
                    createuserbtn.Enabled = true; 
                    createuserbtn.Text = "CREATE USER"; 
                } 
                else MessageBox.Show("The password and confirm password fields do not match"); 
            } 
        } 

[manageuser.cs]

Edit User

private void editusrbtn_Click(object sender, EventArgs e) 
        { 
            if (string.IsNullOrWhiteSpace(editnametxt.Text) || string.IsNullOrWhiteSpace(editunametxt.Text) || string.IsNullOrWhiteSpace(editpwdtxt.Text) || string.IsNullOrWhiteSpace(editconfirmpwdtxt.Text) || string.IsNullOrWhiteSpace(editdescriptiontxt.Text)) MessageBox.Show("Please fill in all the fields"); 
            else 
            { 
                if (editpwdtxt.Text == editconfirmpwdtxt.Text) 
                { 
                    editusrbtn.Enabled = false; 
                    editusrbtn.Text = "PLEASE WAIT"; 
                    Application.DoEvents(); 
                    if (user.edituser((UInt32)usercmb.SelectedValue, editnametxt.Text, editunametxt.Text, editpwdtxt.Text, editdescriptiontxt.Text)) 
                    { 
                        refresheditcmb(usercmb.SelectedIndex); 
                        MessageBox.Show("This user has been edited successfully"); 
                    } 
                    else MessageBox.Show("The user could not be edited due to some internal error or username mismatch. Try changing the username"); 
                    editusrbtn.Enabled = true; 
                    editusrbtn.Text = "EDIT USER"; 
                } 
                else MessageBox.Show("The password and confirm password fields do not match"); 
            } 
        } 

[manageuser.cs]

Delete User

private void deleteuserbtn_Click(object sender, EventArgs e) 
        { 
            deleteuserbtn.Enabled = false; 
            deleteuserbtn.Text = "PLEASE WAIT"; 
            Application.DoEvents(); 
            if (user.deleteuser((UInt32)deleteusercmb.SelectedValue)) 
            { 
                deletetab_Enter(this, null); 
                MessageBox.Show("The user has been deleted"); 
            } 
            else MessageBox.Show("The user could not be deleted due to some internal errors"); 
            deleteuserbtn.Enabled = true; 
            deleteuserbtn.Text = "DELETE USER"; 
        } 

[manageuser.cs]

Screens

Web Gallery

Gallery Software

This work is licensed under a Creative Commons license.

Soft Logic » Free Stuff

Audio Gallery Suite

View the most updated version of the article @ CODEPROJECT

Description

Technology

Demonstration

Download/Contribute

Features

Web Gallery

Gallery Software

Setup

Insight into the code

Database Structure

Web Gallery

HTML Skeleton

HTML Code

Loading Playlists

Loading Audios

Initializing Playlist

Playing audio/Initializing Jplayer

Rotating Disc

Keyboard Support

Downloading Audio

Audio Sharing

Gallery Software

Login

Show Playlists

Show Audios

Add Playlist

Edit Playlist

Delete Playlist

Add Audio

Edit Audio

Delete Audio

Create User

Edit User

Delete User

Screens

Web Gallery

Gallery Software