I am just making a music site when users enter to the page called top 50, in the page there are thumbnails of fifty music and on mouse over it shows play button, and when they click on the button it loads the music. The code of the play button is:
<a href="#" id="song_1"><i class="icon-control-play i-2x"></i></a>
and the javascript is :
$(document).ready(function(){
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Pay It",
artist:"Oloni",
mp3: "http://all.com/uploads/7/3/3/6/73364003/what_makes_you_beautiful.mp3",
oga: "http://all.com/uploads/7/3/3/6/73364003/what_makes_you_beautiful.ogg",
poster: "images/m0.jpg"
},
{
title:"Lentement",
artist:"Miaow",
mp3: "http://all.com/themes/assets/musics/Miaow-03-Lentement.mp3",
oga: "http://all.com/themes/assets/musics/Miaow-03-Lentement.ogg",
poster: "images/onedirection/whatmakesyoubeautiful.jpg"
},
{
title:"Partir",
artist:"Miaow",
mp3: "http://all.com/themes/assets/musics/Miaow-09-Partir.mp3",
oga: "http://all.com/themes/assets/musics/Miaow-09-Partir.ogg",
poster: "images/m0.jpg"
}
], {
playlistOptions: {
enableRemoveControls: true,
autoPlay: false
},
swfPath: "js/jPlayer",
supplied: "webmv, ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function(){
$('.musicbar').removeClass('animate');
$('.jp-play-me').removeClass('active');
$('.jp-play-me').parent('li').removeClass('active');
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function(){
$('.musicbar').addClass('animate');
});
$(document).on('click', '.jp-play-me', function(e){
e && e.preventDefault();
var $this = $(e.target);
if (!$this.is('a')) $this = $this.closest('a');
$('.jp-play-me').not($this).removeClass('active');
$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');
$this.toggleClass('active');
$this.parent('li').toggleClass('active');
if( !$this.hasClass('active') ){
myPlaylist.pause();
}else{
var i = Math.floor(Math.random() * (1 + 7 - 1));
myPlaylist.play(i);
}
});
// video
$("#jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny",
m4v: "http://flatfull.com/themes/assets/video/big_buck_bunny_trailer.m4v",
ogv: "http://flatfull.com/themes/assets/video/big_buck_bunny_trailer.ogv",
webmv: "http://flatfull.com/themes/assets/video/big_buck_bunny_trailer.webm",
poster: "images/m41.jpg"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
size: {
width: "100%",
height: "auto",
cssClass: "jp-video-360p"
},
globalVolume: true,
smoothPlayBar: true,
keyEnabled: true
});
});
There is a music player fixed in footer:
<footer
class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide">
</div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div> <div class="jp-interface">
<div class="jp-controls">
<div>
<a class="jp-previous">
<i class="icon-control-rewind i-lg">
</i>
</a>
</div>
<div>
<a class="jp-play">
<i class="icon-control-play i-2x">
</i>
</a>
<a class="jp-pause hid">
<i class="icon-control-pause i-2x">
</i>
</a>
</div>
<div>
<a class="jp-next">
<i class="icon-control-forward i-lg">
</i>
</a>
</div>
<div class="hide">
<a class="jp-stop">
<i class="fa fa-stop">
</i>
</a>
</div>
<div>
<a class="" data-toggle="dropdown" data-target="#playlist">
<i class="icon-list">
</i>
</a>
</div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info">
</div>
<div class="jp-title text-lt">
<ul>
<li>
</li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm"> <a class="jp-mute" title="mute">
<i class="icon-volume-2">
</i>
</a>
<a class="jp-unmute hid" title="unmute">
<i class="icon-volume-off">
</i>
</a>
</div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter">
</div>
</div>
</div>
<div>
<a class="jp-shuffle" title="shuffle">
<i class="icon-shuffle text-muted">
</i>
</a>
<a class="jp-shuffle-off hid" title="shuffle off">
<i class="icon-shuffle text-lt">
</i>
</a>
</div>
<div>
<a class="jp-repeat" title="repeat">
<i class="icon-loop text-muted">
</i>
</a>
<a class="jp-repeat-off hid" title="repeat off">
<i class="icon-loop text-lt">
</i>
</a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen">
<i class="fa fa-expand">
</i>
</a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress text-lt">
</i>
</a>
</div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker">
<!-- The method
Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item">
</li>
</ul>
</div>
<div class="jp-no-solution hide">
<span>Update Required</span> To play the media you will need to either update
your browser to a recent version or update your
<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</footer>
When the pages load the 50 files will be mentioned in the playlist(3 are given above). What I want is when users click on the play button the one of the music should start. The button id is song_1
With Regards
Nai