Can get this player to work.

+2 Abdullah Nauman · May 4, 2015

After 4 hours of trying, I still can't get this to work. What I want is, for the player to play different song, for each different play button that I click.  

Here is my HTML code: 


 

<div class="row row-sm" id = "SongOne">
                                 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                    <div class="item">
                                       <div class="pos-rlt">
                                          <div class="bottom"> <span class="badge bg-info m-l-sm m-b-sm">03:20</span> </div>
                                          <div class="item-overlay opacity r r-2x bg-black">
                                             <div class="text-info padder m-t-sm text-sm"> <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o text-muted"></i>
                                             </div>
                                             <div class="center text-center m-t-n"> <a href="#"><i class="icon-control-play i-2x" id = "DiscoverSection_SongOnePlay"></i></a> </div>
                                             <div class="bottom padder m-b-sm">
                                                <a href="#" class="pull-right"> <i class="fa fa-heart-o"></i> </a> <a href="#"> <i class="fa fa-plus-circle"></i> </a>
                                             </div>
                                          </div>
                                          <a href="#"><img src="images/p12.jpg" alt="" class="r r-2x img-full"></a>
                                       </div>
                                       <div class="padder-v"> <a href="#" class="text-ellipsis">Tempered Song</a>
                                          <a href="#" class="text-ellipsis text-xs text-muted">Miaow</a>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                    <div class="item">
                                       <div class="pos-rlt">
                                          <div class="item-overlay opacity r r-2x bg-black active">
                                             <div class="text-info padder m-t-sm text-sm"> <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o text-muted"></i> <i class="fa fa-star-o text-muted"></i>
                                             </div>
                                             <div class="center text-center m-t-n">
                                                <a href="#" data-toggle="class"> <i class="icon-control-play i-2x text" id = "DiscoverSection_SongOnePlay" onclick = "songOne()"></i> <i class="icon-control-pause i-2x text-active"></i> </a>
                                             </div>
                                             <div class="bottom padder m-b-sm">
                                                <a href="#" class="pull-right active" data-toggle="class"> <i class="fa fa-heart-o text"></i> <i class="fa fa-heart text-active text-danger"></i> </a> <a href="#" data-toggle="class">
                                                <i class="fa fa-plus-circle text"></i> <i class="fa fa-check-circle text-active text-info"></i> </a>
                                             </div>
                                          </div>
                                          <a href="#"><img src="images/p2.jpg" alt="" class="r r-2x img-full"></a>
                                       </div>
                                       <div class="padder-v">
                                          <a href="#" class="text-ellipsis">
                                          Song 2
                                          </a>
                                          <a href="#" class="text-ellipsis text-xs text-muted">
                                          Lauren Taylor
                                          </a>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="clearfix visible-xs"></div>
                                 <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                    <div class="item">
                                       <div class="pos-rlt">
                                          <div class="item-overlay opacity r r-2x bg-black">
                                             <div class="text-info padder m-t-sm text-sm"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o text-muted"></i> </div>
                                             <div class="center text-center m-t-n"> <a href="#"><i class="icon-control-play i-2x" id = "DiscoverSection_SongTwoPlay"></i></a> </div>
                                             <div class="bottom padder m-b-sm"> <a href="#" class="pull-right"> <i class="fa fa-heart-o"></i> </a> <a href="#"> <i class="fa fa-plus-circle"></i> </a> </div>
                                          </div>




[/code]
Here is my JavaScript: 




$("#DiscoverSection_SongOnePlay").click
(

function()
{

  var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
  }, [
    {
      title:"Song 1",
      artist:"Artist 1",
      mp3: "http://flatfull.com/themes/assets/musics/Miaow-07-Bubble.mp3",
      oga: "http://flatfull.com/themes/assets/musics/Miaow-07-Bubble.ogg",
      poster: "images/m0.jpg"
    } ,
    {
      title:"Song 2",
      artist:"Artist2",
      mp3: "http://flatfull.com/themes/assets/musics/Miaow-03-Lentement.mp3",
      oga: "http://flatfull.com/themes/assets/musics/Miaow-03-Lentement.ogg",
      poster: "images/m0.jpg"
    },
    {
      title:"Partir",
      artist:"Miaow",
      mp3: "http://flatfull.com/themes/assets/musics/Miaow-09-Partir.mp3",
      oga: "http://flatfull.com/themes/assets/musics/Miaow-09-Partir.ogg",
      poster: "images/m0.jpg"
    } 
  ], {
    playlistOptions: {
      enableRemoveControls: true,
      autoPlay: true
    },
    swfPath: "js/jPlayer",
    supplied: "webmv, ogv, m4v, oga, mp3",
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: true

  });
  
   /* $("#DiscoverSection_SongTwoPlay").click
  (
  
  function()
  {
  
    var myPlaylist = new jPlayerPlaylist({
      jPlayer: "#jplayer_N",
      cssSelectorAncestor: "#jp_container_N"
    }, [
      {
        title:"Song 1",
        artist:"Artist 1",
        mp3: "http://flatfull.com/themes/assets/musics/Miaow-07-Bubble.mp3",
        oga: "http://flatfull.com/themes/assets/musics/Miaow-07-Bubble.ogg",
        poster: "images/m0.jpg"
      } /* ,
      {
        title:"Song 2",
        artist:"Artist2",
        mp3: "http://flatfull.com/themes/assets/musics/Miaow-03-Lentement.mp3",
        oga: "http://flatfull.com/themes/assets/musics/Miaow-03-Lentement.ogg",
        poster: "images/m0.jpg"
      },
      {
        title:"Partir",
        artist:"Miaow",
        mp3: "http://flatfull.com/themes/assets/musics/Miaow-09-Partir.mp3",
        oga: "http://flatfull.com/themes/assets/musics/Miaow-09-Partir.ogg",
        poster: "images/m0.jpg"
      } 
    ], {
      playlistOptions: {
        enableRemoveControls: true,
        autoPlay: true
      },
      swfPath: "js/jPlayer",
      supplied: "webmv, ogv, m4v, oga, mp3",
      smoothPlayBar: true,
      keyEnabled: true,
      audioFullScreen: true
  
  }); */ 
  





  $(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
  });
});


[/code]



The code above works. But when you uncomment the commeneted JS, the the it does'nt play anymore. I want the two buttons, to play two different songs on the same player(not at the same time)

Thanks in Advance. 



Post a Reply

Replies

Oldest  Newest  Rating
0 Abdullah Nauman · May 24, 2015
No one error. But thank you so much. I just rewir d how the whole system works, so this error is not a problem anymore. Thanks!
0 Abdullah Nauman · May 6, 2015
hmm.. let me check inspect element
+1 Abdullah Nauman · May 6, 2015
Thank You, but sadly it still does not work. 
:) 
  • 1

HTML / CSS / Web Design

107,083 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators