AAVIK KUMAR PRODUCTION
using jquery.mb.components i have created mp3 player and chat system with smily.
THIS IS FULL HTML CODE :-
<!DOCTYPE html>
<!--
~ /*******************************************************************************
~ jquery.mb.components
~ file: aavikkumarIndex.html
~
~
~ Licences: MIT, GPL
~ http://www.opensource.org/licenses/mit-license.php
~ http://www.gnu.org/licenses/gpl.html
~
~
~ ******************************************************************************/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>AAVIK KUMAR jquery.mb.miniAudioPlayer</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="inc/jquery.mb.emoticons.js"></script>
<script type="text/javascript" src="inc/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="inc/jquery.mb.miniPlayer.js"></script>
<link rel="stylesheet" type="text/css" href="css/miniplayer.css" title="style" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<script type="text/javascript">
$(function(){
$("#ta").mbSmilesBox();
})
</script>
<style type="text/css">
/*Generic page style*/
body{
margin:0px;
background: #ffc000;
font:normal 16px/20px Lekton, sans-serif;
}
.wrapper{
position:absolute;
padding:100px 50px;
width:80%;
min-height: 100%;
margin-left: 10% ;
top:0;
background: #e8e8e8;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.wrapper h1 {
font-size: 26px;
}
button {
padding: 3px;
display: inline-block;
cursor: pointer;
color: #fff;
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: #999 1px 1px 3px;
-webkit-box-shadow: #999 1px 1px 3px;
border: 1px solid white;
text-shadow: 1px -1px 2px #aaa9a9 !important;
}
button:hover {
/*background-color:#fff;*/
color: #666;
}
hr {
border: none;
background-color: #ccc;
height: 1px;
}
.mbSmilesWrapper{
position:relative;
display:inline-block;
marginwidth-topmargin:15px;
}
.mbSmilesBox{
position:absolute;
width:290px;
background:#f3f3f3;
padding:5px;
-moz-box-shadow: #666666 1px 1px 6px;
-webkit-box-shadow: #666666 1px 1px 6px;
margin-top:-5px;
z-index:1001;
}
span.emoticon{
background-color:#f3f3f3;
display:block;
float:left;
width:25px;
height:25px;
cursor:pointer;
border-bottom:1px dotted #ccc;
border-right:1px dotted #ccc;
padding:3px;
}
span.emoticon:hover{
position:relative;
z-index:1;
background-color:#fff;
-moz-box-shadow: #666666 1px 1px 6px;
-webkit-box-shadow: #666666 1px 1px 6px;
}
span.mbSmilesButton img{
width:12px;
height:12px;
}
span.mbSmilesButton{
position:absolute;
right:5px;
z-index:1000;
}
#render{
width:500px;
background:#f3f3f3;
padding:5px;
-moz-box-shadow: #666666 1px 1px 6px;
-webkit-box-shadow: #666666 1px 1px 6px;
}
#ta{
border:none;
width:500px;
height:200px;
background:#f0f8ff;
padding:5px;
-moz-box-shadow: #666666 1px 1px 6px;
}
span.btn{
padding:5px;
margin:10px;
display:inline-block;
cursor:pointer;
font:12px/14px Arial, Helvetica, sans-serif;
color:#aaa;
background-color:#eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:#999 2px 0px 3px;
-webkit-box-shadow:#999 2px 0px 3px;
}
span.btn:hover{
background-color:#000;
}
</style>
<script type="text/javascript">
$(function () {
$(".audio").mb_miniPlayer({
width: 240,
inLine: false,
onEnd: playNext
});
function playNext(player) {
var players = $(".audio");
document.playerIDX = (player.idx <= players.length - 1 ? player.idx : 0);
players.eq(document.playerIDX).mb_miniPlayer_play();
}
});
</script>
<!--
~ /*******************************************************************************
~ jquery.mb.components new button code
~ ******************************************************************************/
-->
<script type="text/javascript" src="inc/jquery.mb.audio.js?_=8y338"></script>
<script type="text/javascript">
/*
* DEFINE SOUNDS
*/
$.mbAudio.sounds = {
backgroundSprite: {
id: "backgroundSprite",
ogg: "sounds/bgndsSprite.ogg",
mp3: "sounds/bgndsSprite.mp3",
//example of sprite
sprite:{
intro : {id: "intro", start: 80, end: 116.975, loop: true},
levelIntro: {id: "levelIntro", start: 60, end: 77.470, loop: true},
tellStory: {id: "tellStory", start: 80, end: 116.975, loop: true},
level1 : {id: "level1", start: 5, end: 13, loop: true},
level2 : {id: "level2", start: 40, end: 56, loop: true},
level3 : {id: "level3", start: 120, end: 136.030, loop: true}
}
},
effectSprite: {
id: "effectSprite",
ogg: "sounds/effectsSprite.ogg",
mp3: "sounds/effectsSprite1.mp3",
//example of sprite
sprite:{
streak: {id: "streak", start: 0, end: 1.3, loop: 3},
great : {id: "great", start: 5, end: 8, loop: false},
divine: {id: "divine", start: 10, end: 12, loop: false},
wow : {id: "wow", start: 15, end: 24, loop: false},
levelIntro : {id: "levelIntro", start: 20, end: 25, loop: false},
levelCompleted: {id: "levelCompleted", start: 25, end: 30, loop: false},
subLevelLost: {id: "subLevelLost", start: 35, end: 38.1, loop: false},
subLevelWon : {id: "subLevelWon", start: 30, end: 31.9, loop: false},
gameWon : {id: "gameWon", start: 30, end: 31.9, loop: false}
}
}
};
function audioIsReady(){
setTimeout(function(){
$('#buttons').fadeIn();
$("#loading").hide();
if(isStandAlone || !isDevice)
$.mbAudio.queue.add('backgroundSprite',"levelIntro");
},3000);
}
$(document).on("initAudio", function () {
$.mbAudio.pause('effectSprite', audioIsReady);
$('#start').hide();
$("#loading").show();
});
$(document).on("event1", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'great',toggleButtons)});
$(document).on("event2", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'divine',toggleButtons)});
$(document).on("event3", function () {toggleButtons(); $.mbAudio.queue.add('effectSprite', 'streak',toggleButtons)});
$(document).on("event4", function () {$.mbAudio.queue.add('backgroundSprite', 'levelIntro')});
function toggleButtons(){
$("button").toggleClass("disabled");
}
</script>
</head>
<body>
<br>
<div class="wrapper">
<h1><center>AAVIK KUMAR PRODUCTION</center></h1>
<hr>
<br>
<a id="m1" class="audio {autoplay:true, inLine:true}"
href="http://www.pacdv.com/sounds/ambience_sounds/airport-gate-1.mp3">Airport Gate (Boarding)</a>
<button onclick="$('#m1').mb_miniPlayer_stop()">stop</button>
<button onclick="$('#m1').mb_miniPlayer_play()">play</button>
<hr>
<a id="m2" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
href="http://www.pacdv.com/sounds/ambience_sounds/g-t-1.mp3">Group Talking</a>
<hr>
<a id="m3" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
href="http://www.pacdv.com/sounds/ambience_sounds/water-stream-1.mp3" style="display:none">Water Stream
(Small)</a>
<hr>
<a id="m4" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
href="http://www.pacdv.com/sounds/domestic_sound_effects/doorbell-1.mp3">Doorbell</a>
<hr>
<a id="m5" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg'}"
href="http://www.pacdv.com/sounds/transportation_sounds/antique-car-honk-1.mp3" style="display: none">Antique Car
& Honk</a>
<hr>
<pre style="margin-left: 0px;overflow:auto; background: #dcdcdc; padding: 10px "><code>
// this is the initializer function
$(".audio").mb_miniPlayer({
width:240,
inLine:false,
onEnd:playNext
});
// and this is function invoked as 'onEnd' callback
// Both the onPlay and onEnd callback functions receive the index of the player as parameter.
function playNext(idx){
var players=$(".audio");
document.playerIDX = idx+1 <= players.length-1 ? idx+1 : 0;
players.eq(document.playerIDX).mb_miniPlayer_play();
}
</code></pre>
<br>
<b>jquery.mb.miniPlayer</b> is a GUI implementation of the <a href="http://www.jplayer.org" target="_blank">jquery.jPlayer</a>
plug-in SOUNDING MIXING WITH CHAT.ENJOY!!!!
<!--
~ /*******************************************************************************
~ jquery.mb.components new button code
~ ******************************************************************************/
-->
<div id="start">
<script>
if((isiOs && isStandAlone) || !isDevice){
document.write("<p>This button will also initialize the effects sprite and will play the background sprite (only iOS).</p>")
}
</script>
<button style="cursor:pointer" onmousedown="$(document).trigger('initAudio')">Lets start</button>
</div>
<div id="loading" style="display: none;">... loading ...</div>
<div id="buttons" style="display: none;">
<p>The three buttons below play sounds from the same audio file (sounds/bgndsSprite .mp3 or .ogg)</b></p>
<button style="cursor:pointer" onmousedown="$(document).trigger('event1')">play sound 1</button>
<button style="cursor:pointer" onmousedown="$(document).trigger('event2')">play sound 2</button>
<button id="playSound1" style="cursor:pointer" onmousedown="$(document).trigger('event3')">play effect 3 (it loops 3 times)</button>
</div>
<hr>
<!--
~ /*******************************************************************************
~ jquery.mb.components CHAT
~ ******************************************************************************/
-->
<textarea id="ta" class="ta"></textarea>
<br>
<span class="btn" onclick="$('#render').html($('#ta').val()).emoticonize(true).show()">SEND</span>
<div id="render" style="display:none"></div>
</div>
</body>
</html>
DOWNLOAD SOURCE CODE HERE
