|
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: demo_ID3.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: 16/05/13 21.51
~ ******************************************************************************/
-->
<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;
font:normal 16px/20px Lekton, sans-serif;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.wrapper h1{
font-family:Arial, Helvetica, sans-serif;
font-size:26px;
}
button{
padding:3px;
display:inline-block;
cursor:pointer;
font:12px/14px Arial, Helvetica, sans-serif;
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{
color:#666;
}
hr{
border:none;
background-color:#ccc;
height:1px;
}
</style>
<script type="text/javascript">
$(function(){
if (self.location.href == top.location.href){
$("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
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:250,
inLine:false,
id3:true
});
});
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<div class="wrapper">
<h1>mb.miniAudioPlayer.demo</h1>
<br>
<p><a href="skinmaker.html"> Customize the player skin</a></p>
<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>
<br>
<br>
<a id="m1" class="audio {autoplay:true, inLine:false}" href="audio/audio.mp3">Airport Gate (Boarding)</a>
<br>
<hr>
<a id="m5" class="audio {skin:'green', autoPlay:false, addShadow:false}" href="http://www.miaowmusic.com/mp3/Miaow-08-Stirring-of-a-fool.mp3">miaowmusic - Stirring of a Fool (mp3)</a>
<br>
<div>change track:
<br>
<button onclick="$('#m5').mb_miniPlayer_changeFile('http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3',false,'Lismore (mp3)')">miaowmusic - Lismore</button>
<button onclick="$('#m5').mb_miniPlayer_changeFile('http://www.miaowmusic.com/mp3/Miaow-02-Hidden.mp3',false,'Hidden (mp3)')">miaowmusic - Hidden</button>
</div>
</div>
</body>
</html>