View the most updated version of the article @ CODEPROJECT
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.
View the web audio gallery at the link given below. I would recommend Chrome/Firefox web browser to view the web audio gallery.
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.
* Check the Screens section below for a quick demo.
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.
- 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
- 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
- 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.
After seeing the basic skeleton and HTML, lets move on to see the basic features of audio-gallery-suite and how they are implemented
Audios are loaded when a playlist is changed or the user does an audio search.
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.
Playing audio/Initializing Jplayer
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.
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.