Click here to Skip to main content
15,885,546 members
Search within:


Articles / Web Development / HTML
 

Audio-Gallery-Suite (A complete audio gallery solution made with HTML5/CSS3/jQuery-JS/PHP/C#)

Rate me:
Please Sign up or sign in to vote.
4.99/5 (82 votes)
30 Apr 2013MIT31 min read 268.2K   6.3K   171  
Audio-Gallery-Suite is a complete audio gallery solution made with HTML5/CSS3/Jquery-JS/PHP-Ajax/C# that includes a web audio gallery and a software for managing the web audio gallery.
 
/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.jplayer.org
 *
 * Skin Name: Blue / Dark
 *
 * Copyright (c) 2010 Happyworm Ltd & Per Sandström
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Per Sandström – http://www.helloper.com
 * Skin Version: 1.0 (jPlayer 2.0.0)
 * Date: 20th March 2011
 */

div.jp-audio,
div.jp-video {
	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */
	color: #CCC;
	font-size: 1em; /* No parent CSS that can effect the size in these demos */
	font-family: 'Helvetica Neue', sans-serif;
	line-height: 1.6;	
	-ms-text-size-adjust:none;
	-webkit-text-size-adjust:none;
}

div.jp-audio {/*changed here*/
	width: 100%;
}

div.jp-video-270p {
	width: 480px;
}

div.jp-video-360p {
	width: 640px;
}

div.jp-interface {
  background: #444;
  background: -moz-linear-gradient(top, #444, #111);
	background: -o-linear-gradient(top, #444, #111);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#111111');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444, endColorstr=#111111)";
  border: 0;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	position: relative;
	width: 100%;
}

div.jp-audio div.jp-type-single div.jp-interface {
	border-bottom: none;
	height: 80px;
}

div.jp-audio div.jp-type-playlist div.jp-interface {
	height: 80px;
}

div.jp-video div.jp-type-single div.jp-interface {
	border-bottom: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	height: 60px;
}

div.jp-video div.jp-type-playlist div.jp-interface {
  -moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	height:60px;
}

div.jp-interface ul.jp-controls {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

div.jp-interface ul.jp-controls li {
	display: inline;
}

div.jp-interface ul.jp-controls a {
	overflow: hidden;
	position: absolute;
	text-indent:-9999px;
}

a.jp-play,
a.jp-pause {
	height: 40px;
	width: 40px;
	z-index: 1;
}

div.jp-audio div.jp-type-single a.jp-play,
div.jp-audio div.jp-type-single a.jp-pause {
	left: 40px;
	top: 20px;
}

div.jp-audio div.jp-type-playlist a.jp-play,
div.jp-audio div.jp-type-playlist a.jp-pause {
	left: 48px;
	top: 20px;
}

div.jp-video a.jp-play,
div.jp-video a.jp-pause {
	top: 15px;
}

div.jp-video-270p div.jp-type-single a.jp-play,
div.jp-video-270p div.jp-type-single a.jp-pause {
	left: 195px;
}

div.jp-video-270p div.jp-type-playlist a.jp-play,
div.jp-video-270p div.jp-type-playlist a.jp-pause {
	left: 200px;
}

div.jp-video-360p div.jp-type-single a.jp-play,
div.jp-video-360p div.jp-type-single a.jp-pause {
	left: 275px;
}

div.jp-video-360p div.jp-type-playlist a.jp-play,
div.jp-video-360p div.jp-type-playlist a.jp-pause {
	left: 300px;
}

a.jp-play {
	background: url(jplayer.dark.png) 0 0 no-repeat;
}

a.jp-play:hover {
	background: url(jplayer.dark.png) -41px 0 no-repeat;
}

a.jp-pause {
	background: url(jplayer.dark.png) 0 -42px no-repeat;
	display: none;
}

a.jp-pause:hover {
	background: url(jplayer.dark.png) -41px -42px no-repeat;
}

div.jp-audio div.jp-type-single a.jp-stop {
	left: 90px;
	top: 26px;
}

div.jp-audio div.jp-type-playlist a.jp-stop {
	left: 125px;
	top: 26px;
}

div.jp-video a.jp-stop {
	top: 21px;
}

div.jp-video-270p div.jp-type-single a.jp-stop {
	left: 245px;
}

div.jp-video-270p div.jp-type-playlist a.jp-stop {
	left: 278px;
}

div.jp-video-360p div.jp-type-single a.jp-stop {
	left: 325px;
}

div.jp-video-360p div.jp-type-playlist a.jp-stop {
	left: 378px;
}

a.jp-stop {
	background: url(jplayer.dark.png) 0 -83px no-repeat;
	height: 28px;
	width: 28px;
	z-index: 1;
}

a.jp-stop:hover {
	background: url(jplayer.dark.png) -29px -83px no-repeat;
}

div.jp-audio div.jp-type-playlist a.jp-previous {
	left: 20px;
	top: 26px;
}

div.jp-video div.jp-type-playlist a.jp-previous {
	top: 21px;
}

div.jp-video-270p div.jp-type-playlist a.jp-previous {
	left: 172px;
}

div.jp-video-360p div.jp-type-playlist a.jp-previous {
	left: 272px;
}

a.jp-previous {
	background: url(jplayer.dark.png) 0 -112px no-repeat;
	height: 28px;
	width: 28px;
}

a.jp-previous:hover {
	background: url(jplayer.dark.png) -29px -112px no-repeat;
}

div.jp-audio div.jp-type-playlist a.jp-next {
	left: 88px;
	top:26px;
}

div.jp-video div.jp-type-playlist a.jp-next {
	top: 21px;
}

div.jp-video-270p div.jp-type-playlist a.jp-next {
	left: 240px;
}

div.jp-video-360p div.jp-type-playlist a.jp-next {
	left: 340px;
}

a.jp-next {
	background: url(jplayer.dark.png) 0 -141px no-repeat;
	height: 28px;
	width: 28px;
}

a.jp-next:hover {
	background: url(jplayer.dark.png) -29px -141px no-repeat;
}

div.jp-progress {
	overflow: hidden;
	position: absolute;
}

div.jp-audio div.jp-type-single div.jp-progress {
	height: 15px;
	left: 130px;
	top: 32px;
	width: 122px;/*changed here*/
}

div.jp-audio div.jp-type-playlist div.jp-progress {
  background: url(jplayer.dark.png) repeat-x scroll 0 -202px transparent;
	height: 15px;
	left: 164px;
	top: 32px;
	width: 100%;	
}

div.jp-video div.jp-progress {
	left:0px;
	height: 10px;
	top:0px;
	width: 100%;
}

div.jp-seek-bar {
	background: url(jplayer.dark.png) 0 -202px repeat-x;
	cursor: pointer;
	height:100%;
	width:0px;
}

div.jp-video div.jp-seek-bar {
  background-position: 0 -204px;
}

div.jp-play-bar {
	background: url(jplayer.dark.png) 0 -218px repeat-x;
	height: 100%;
	width: 0px;
}

/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg {
	background: url(jplayer.dark.pbar-ani.gif);
}

a.jp-mute,
a.jp-unmute {
	height: 15px;
	width: 18px;
}

div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
	left: 274px;
	top: 32px;
}

div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {/*changed here*/
	/*left: 296px;*/
	right:90px;
	top: 32px;
}

div.jp-video a.jp-mute,
div.jp-video a.jp-unmute {
	top: 27px;
}

div.jp-video-270p div.jp-type-single a.jp-mute,
div.jp-video-270p div.jp-type-single a.jp-unmute {
	left: 304px;
}

div.jp-video-270p div.jp-type-playlist a.jp-unmute,
div.jp-video-270p div.jp-type-playlist a.jp-mute {
	left: 357px;
}

div.jp-video-360p div.jp-type-single a.jp-mute,
div.jp-video-360p div.jp-type-single a.jp-unmute {
	left: 384px;
}

div.jp-video-360p div.jp-type-playlist a.jp-mute,
div.jp-video-360p div.jp-type-playlist a.jp-unmute {
	left: 443px;
}

a.jp-mute {
	background: url(jplayer.dark.png) 0 -186px no-repeat;
}

a.jp-mute:hover {
	background: url(jplayer.dark.png) -19px -170px no-repeat;
}

a.jp-unmute {
	background: url(jplayer.dark.png) 0 -170px no-repeat;
	display: none;
}

a.jp-unmute:hover {
	background: url(jplayer.dark.png) -19px -186px no-repeat;
}

div.jp-volume-bar {
	background: url(jplayer.dark.png) 0 -250px repeat-x;
	cursor: pointer;
	height: 5px;
	overflow: hidden;
	position: absolute;
	width: 72px;
}

div.jp-audio div.jp-type-single div.jp-volume-bar {
	left: 302px;
	top: 37px;
}

div.jp-audio div.jp-type-playlist div.jp-volume-bar {/*changed here*/
	right:10px;
	/*left: 324px;*/
	top: 37px;
}

div.jp-video div.jp-volume-bar {
	top: 32px;
}

div.jp-video-270p div.jp-type-single div.jp-volume-bar {
	left: 332px;
}

div.jp-video-270p div.jp-type-playlist div.jp-volume-bar {
	left: 385px;
}

div.jp-video-360p div.jp-type-single div.jp-volume-bar {
	left: 412px;
}

div.jp-video-360p div.jp-type-playlist div.jp-volume-bar {
	left: 471px;
}

div.jp-volume-bar-value {
	background: url(jplayer.dark.png) 0 -256px repeat-x;
	height: 5px;
	width: 0px;
}

div.jp-current-time,
div.jp-duration {
	font-size: .64em;
	position: absolute;
	text-shadow: 0 1px 1px #444;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

div.jp-duration {
	text-align: right;
}

div.jp-audio div.jp-type-single div.jp-current-time,
div.jp-audio div.jp-type-single div.jp-duration {
	left: 130px;
	top: 49px;
	width: 122px;
}

div.jp-audio div.jp-type-playlist div.jp-current-time,
div.jp-audio div.jp-type-playlist div.jp-duration 
{
	left: 164px;
	top: 49px;
	width: 122px;
}

div.jp-video div.jp-current-time,
div.jp-video div.jp-duration {
	left: 0px;
	padding: 0 1%;
	top: 10px;
	width: 98%;
}

div.jp-playlist {
	background: #222;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
	width:100%;
}

div.jp-playlist ul {
	font-size: .72em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

div.jp-type-single div.jp-playlist li {
  background: #FFF;
  background: -moz-linear-gradient(top, #FFF, #EEE);
	background: -o-linear-gradient(top, #FFF, #EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#EEEEEE)";
	padding:5px 0 5px 10px;
	font-weight:bold;
	text-shadow: 0 1px 1px #333;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

div.jp-type-playlist div.jp-playlist li {
  background: #444;
  background: -moz-linear-gradient(top, #444, #333);
	background: -o-linear-gradient(top, #444, #333);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#333333');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444, endColorstr=#333333)";
	padding:5px 0 4px 10px;
	text-shadow: 0 1px 1px #333;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

div.jp-type-playlist div.jp-playlist li:nth-child(even),
div.jp-type-single div.jp-playlist li:nth-child(even) {
  border: 1px solid #333;
  border-left: 0;
  border-right: 0;
}

div.jp-type-playlist div.jp-playlist li:last-child,
div.jp-type-single div.jp-playlist li:last-child {
  border-bottom: 0;
  -moz-border-radius: 0 0 6px 6px;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-last {
	border-bottom: none;
	padding: 5px 0 5px 10px;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
  font-weight: bold;
	list-style: none;
}

div.jp-type-playlist div.jp-playlist a {
	color: #BBB;
	text-decoration: none;
}

div.jp-type-playlist div.jp-playlist a:hover {
	color: #FFF;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
	color: #FFF;
}

div.jp-type-playlist div.jp-playlist div.jp-free-media {
	display: inline;
	margin-left: 20px;
}

div.jp-video div.jp-video-play {
	background: transparent url(jplayer.dark.video.play.png) no-repeat center;
	cursor: pointer;
	position: absolute;
	z-index: 2;
}

div.jp-video div.jp-video-play:hover {
	background: transparent url(jplayer.dark.video.play.hover.png) no-repeat center;
}

div.jp-video-270p div.jp-video-play {
	height: 270px;
	top: -270px;
	width: 480px;
}

div.jp-video-360p div.jp-video-play {
	height: 360px;
	top: -360px;
	width: 640px;
}

div.jp-jplayer {
	height: 0px;
	width: 0px;
}

div.jp-video div.jp-jplayer {
	z-index: 1;
}

div.jp-video-270p div.jp-jplayer {
	height: 270px;
	width: 480px;
}

div.jp-video-360p div.jp-jplayer {
	height: 360px;
	width: 640px;
}

div.jp-jplayer {
	background-color: #000;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Robin Rizvi
Software Developer Databorough India
India India
Currently working as software developer for Databorough India - Division of Fresche Legacy.

Developing for the open-source community and writing articles is my way of thanking the community. I have developed commercial as well as non-commercial/open-source projects for the web and windows as my work and hobby. Just trying very hard so that someday I could contribute a little for this world. I would like to send out my regards to all for your rating and comments because these comments keep me going. Thank you all.

Certifications:
Microsoft Certified Professional (Programming in C#)
Microsoft Certified Professional (Programming in HTML5 with JavaScript and CSS3)

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 5 Mar 2012

Article Copyright 2012 by Robin Rizvi
Everything else Copyright © CodeProject, 1999-2024

Web01 2.8:2024-04-02:1