javascript - Onclick play the song - jPlayer -
i making music site when users enter page called top 50, in page there thumbnails of fifty music , on mouse on shows play button, , when click on button loads music. code of play button is:
<a href="#" id="song_1"><i class="icon-control-play i-2x"></i></a>and javascript :
$(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 = 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 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"> <!-- method playlist.displayplaylist() uses unordered list --> <li class="list-group-item"> </li> </ul> </div> <div class="jp-no-solution hide"> <span>update required</span> play media need either update browser recent version or update <a href="http://get.adobe.com/flashplayer/" target="_blank">flash plugin</a>. </div> </div> </div> </footer>when pages load 50 files mentioned in playlist(3 given above). want when users click on play button 1 of music should start. button id song_1
with regards
nai
Comments
Post a Comment