|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/test/sound/ |
Upload File : |
<!DOCTYPE html>
<!--
~ /*******************************************************************************
~ jquery.mb.components
~ file: demo1.html
~
~ Copyright (c) 2001-2013. Matteo Bicocchi (Pupunzi);
~ Open lab srl, Firenze - Italy
~ email: matteo@open-lab.com
~ site: http://pupunzi.com
~ blog: http://pupunzi.open-lab.com
~ http://open-lab.com
~
~ Licences: MIT, GPL
~ http://www.opensource.org/licenses/mit-license.php
~ http://www.gnu.org/licenses/gpl.html
~
~ last modified: 28/04/13 23.33
~ ******************************************************************************/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>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.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'>
<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;
}
</style>
<script type="text/javascript">
$(function () {
if (self.location.href == top.location.href) {
var logo=$("<a href='http://pupunzi.com'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository' style='display:none;'></a>").css({position:"absolute", top:10, left:10});
$(".wrapper").prepend(logo);
$("#logo").fadeIn();
}
$(".audio").mb_miniPlayer({
width: 240,
inLine: false,
onEnd: playNext
});
function playNext(player) {
var players = $(".audio");
document.playerIDX = player.idx + 1 <= players.length - 1 ? player.idx + 1 : 0;
players.eq(document.playerIDX).mb_miniPlayer_play();
}
});
</script>
</head>
<body>
<br>
<div class="wrapper">
<h1>mb.miniAudioPlayer.demo - auto start next player</h1>
<br>
This is a GUI implementation of <a href="http://www.jplayer.org/" target="_blank"><strong>Happyworm jPlayer
plugin</strong></a>, an HTML5 audio engine, developed on jQuery framework, that let you listen mp3 and ogg file over
the html5 audio tag where supported or using an invisible flash player where not supported.
For more informations about html5 browsers' support go to <a href="http://www.jplayer.org/latest/developer-guide/"
target="_blank">jPlayer documentation site</a>.
<br>
<p><a href="skinmaker.html"> Customize the player skin</a></p>
<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>
<br>
All the music are provided by <a href="http://www.pacdv.com" target="_blank">© pacdv.com</a>.
<br>
<p>
Here is a demo of a custom behaviour applied as callback for the "end" event of each player:
<br>
The first player has the "autoPlay" parameter set as true and therefor it'll start playing on page load; once
one of the audio played ends the next player will start playing.
<br>
If is the last player playing it starts over from the first.
<br>
This behaviour can't works on iOs devices due to their security restrictions.
</p>
<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 realized by © Happyworm LTD. (many thanks to <a href="http://happyworm.com/blog/" target="_blank">Mark
Boas</a>)
</div>
</body>
</html>