1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
|
<!Doctype html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="navigateur.css" />
<link rel="stylesheet" href="playlistcss.css" />
<style type="text/css">
.active {
border: 1px solid red;
}
</style>
<title>Test lecteur audio Playlist</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( function ( ) {
$( document ).ready( function ( ) {
var $ap = $( '.audioplayer' ),
$ap0 = $( '.audioplayer' ).get( 0 );
$( document )
.on( 'click', '#Play', function ( ) {
$ap0.paused ? $ap0.play( ) : $ap0.pause( )
} )
.on( 'click', '#playlist li > a', function ( ) {
$( '.active' ).removeClass( 'active' )
$( this ).parent( ).addClass( 'active' )
$ap.find( '#prems' ).prop( 'src', $( this ).data( ).scrone )
$ap.find( '#deums' ).prop( 'src', $( this ).data( ).altsrc )
$ap0.load( )
$( '#Play' ).trigger( 'click' )
} )
.on ( 'click', '#Next', function ( ) {
$( '#playlist li.active' ).next( 'li' ).find( 'a' ).trigger( 'click' )
} )
$ap.on( 'timeupdate', function ( ) {
var tpstotal = $ap0.duration,
tpsactuel = $ap0.currentTime;
$( '#tpsreel' ).css( 'width', Math.ceil( ( tpsactuel / tpstotal ) * 250 ) )
} )
} )
} );
</script>
<body>
<div id="englobe">
<audio class="audioplayer">
<source id="deums" src="1.mp3"></source>
</audio>
<button id="Play">Play/Pause</button>
<button id="Next">Next</button>
<ul id="playlist">
<li class="active"><a href="#" data-srcone="zic/Joris Delacroix - Feelings (original mix).ogg" data-altsrc="1.mp3"> M1</a></li>
<li><a href="#" data-srcone="zic/M - Le Complexe Du Corn Flakes.ogg" data-altsrc="2.mp3"> M2</a></li>
<li><a href="#" data-srcone="zic/Butch Cassidy - So Gangsta.ogg" data-altsrc="3.mp3"> M3</a></li>
</ul>
<div id="progression">
<div id="tpsreel"></div>
</div>
</div>
</body>
</html> |
Partager