Saturday, 20 September 2014

sound mixing mp3 player dj chat system using jquery jquery.mb.components

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

1 comment:

  1. Packers and Movers Bangalore - Reliable and Verified Household Shifting Service Providers Give Reasonable ###Packers and Movers Charges. Cheap and Best Office Relocation Compare Quotation for Assurance for Local and Domestic House Shifting and Get estimates today to save upto 20%, ***Read Customer Reviews - @ Packers And Movers Bangalore

    ReplyDelete