CODEWITHSUNDEEP
javascripthtmljplayer
Rinchen Dorjey Gyalson
Rinchen Dorjey Gyalson

Reputation: 21

jplayer: playing a mp3 from a link on page

I have a Html template which uses jplayer, i know how to add an existing playlist in the player but dont know how to make it play through a link on a page.

the theme's link is: http://themeforest.net/item/musik-music-web-application-template/7831557

I tried to contact the developer but he's not active and does not reply. please help,.!

also, i checked the comments, there he asked to put a “data-jp-src” attribute on a link. 

  <a href="#" title="musician" data-jp-src="a.mp3">play</a>

$(document).on('click', '[data-jp-src]', function(e){
  e && e.preventDefault();
  var music = {};
  music.title  = $(this).attr('title');
  music.mp3 = $(this).attr('data-jp-src');
  myPlaylist.add(music);
  myPlaylist.play(-1);
});

i dont understand this

Upvotes: 1

Views: 403

Answers (1)

Sam
Sam

Reputation: 11

Open file js/jPlayer/demo.js

add code like this: 

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

   $(document).on('click', '[data-jp-src]', function(e){
    e && e.preventDefault();
    var music = {};
    music.title  = $(this).attr('title');
    music.mp3 = $(this).attr('data-jp-src');
    myPlaylist.add(music);
    myPlaylist.play(-1);
   });

Upvotes: 1

Related Questions