Resume Play after Pause method used - Please help!

[Darek Stankiewicz]

Hi Guys,

 

I am working on a website and I use jPlayer for the background music. I managed to make the music play in the background independently on what content is being displayed so you can click on any link in the navigation bar and the music does not stop playing. Great. Now, there is a video element there, where when played the background music needs to pause. I managed that by using onClick with java script $.jPlayer.pause(); when someone clicks on the video link. It works and pauses the music. So far so good. Now I need to resume the music when the video window is closed. Again, I have tried to use onClick with java script  $.jPlayer.play(); but it does not work. The music does not resume. Can someone help me here? What do I do wrong? Thank you.

[Mark Panaghiston]

You need to talk to the instance. That $.jPlayer.pause() is a special function to stop all instances on the page.
http://www.jplayer.org/latest/developer-guide/#jPlayer-play

[Darek Stankiewicz]

Hello Mark,

 

I don't know jQuery and Java Script. I can figure out many things on my own though, but I need a little bit more guidance. Please take a look at the script below that is in the head of my website. What defines the instance? A div container, in this case .musicplayer or the name ttwMusicPlayer? Would calling this particular instance look like this - $.ttwMusicPlayer.jPlayer.play() or $(.musicplayer).ttwMusicPlayer.play() or $.ttwMusicPlayer.jPlayer.play()....? I have no idea. Can you provide some examples how the syntax should look like? Thank you very much for your help.

 

Cheers,

 

</script>
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../plugin/jquery-jplayer/jquery.jplayer.js"></script>
    <script type="text/javascript" src="../plugin/ttw-music-player-min.js"></script>
    <script type="text/javascript" src="js/myplaylist.js"></script>

    <script type="text/javascript">
$(document).ready(function(){
            $(".musicplayer").ttwMusicPlayer(myPlaylist, {
                autoPlay:false,
                jPlayer:{
                    swfPath:'../plugin/jquery-jplayer' //You need to override the default swf path any time the directory structure changes
                }
            });
        });
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
    </script>

</head>

[Darek Stankiewicz]

I would appreciate any help that you can offer. I am so close to finalizing my website and this is the last missing piece I need to figure out. Can someone provide some clarification/clue as to how this can be done? Thank you very much.

[Darek Stankiewicz]

Guys, please don't give up on me. I am fighting this alone trying million different things. I have already learned 50% of Java in the process, but I need someone to give me an example of a code that is talking to the instance. Please help me... It should not be that difficult. Thank you.

 

Cheers,

[Mark Panaghiston]

When you instance a jPlayer, attach it to a jQuery selector. A jQuery selector for this purpose is usually an ID selector, such as $('#my-player'). So you then instance jPlayer with options, which are detailed in the docs...

$('#my-player').jPlayer(options);

Where the options is an object like:

options = {
  ready: function() {
    $(this).jPlayer('setMedia', {mp3:"elvis.mp3"});
  },
  swfPath: "/my-folder/",
  supplied: "mp3",
}

After that, you can then instruct that instance by using the commands:

$('#my-player).jPlayer('setMedia', {mp3:"marley.mp3"});

$('#my-player).jPlayer('play');

Hope this helps.

[Darek Stankiewicz]

Thank you, Mark. You have shown me some mercy.... Here is a piece of information that I did not know that matters but at this point I think that it might.

I found this HTML5 Music Player http://www.codebasehero.com/2011/07/html5-music-player-updated/ that had everything I was looking for and more. I needed to be very compact and be able to play more than one song. I played with some CSS and stripped it to a bare bone, and looks and works well on my website (PREV, PLAY, NEXT, PROGRESS BAR). When I downloaded the player, I used the demo page/files to copy pieces that I needed to make it work for me, including the Java script (see my previous post). When I hit the wall with resume play, I went to jPlayer website and I found the Developer's Guide you are referring to. I have read it, and have tried to implement it in million different ways.

 

Here is what I think confuses me right now:

 

1 - I don't know if the script I am presenting here is instancing a jPlayer already or not. I thought that it does in the form of ttwMusicPlayer.

 

2 - If the provided by me script does not instance a jPlayer then why does it work?

 

3 - If I still have to instance a jPlayer what is the exact script I need to write that will handle a playlist (see my script)

 

I feel that I am much closer now in figuring it out. Thanks a million.

 

Cheers,

[Mark Panaghiston]

I've not used that Media BoxjQuery plugin before... And yes, it does appear to use jPlayer to play the music. It looks like a version of jPlayer 2.0.9 built into it, so it is getting old now and they should refresh it... If nothing else to avoid the XSS problem with the SWF.

But erm... it looks like the jPlayer HTML created uses the id jquery_jplayer

I am not sure exactly how I am expected to support a 3rd party that I did not create...

But to send the play command to the instance created by the Media Box plugin:
$('jquery_jplayer').jPlayer('play');

Remember that the ready event needs to fire, so if you are instancing and then issuing that command it might fail - depending on the player being used. flash or html5. If it comes from a GUI it should be ok, as no human can click it fast enough and worst case it just gets ignored.

[Darek Stankiewicz]

Hi Mark.

 

I need you to know that I am not expecting you to help me, but I greatly appreciate any bit of your help very much. HTML5 Music Player is a free 3rd part plugin that has no support. Before joining this forum I contacted the developer and this is what he wrote:

 

You're correct, I don't provide support for these resources. I don't know the answer to your question, I would need to do some research, but I believe your intuition is correct. You probably just need to call jPlayer('play') on the specific jplayer instance. I would imagine I'm initializing jPlayer something like $myJPlayer.jPlayer(), so you would need to do something like $myJPlayer.jPlayer('play'). 

 

I originally thought that it will take no time to make it work, that is why I tried to contact Saleem and now I am on this forum talking to you.

 

Now back to your message. I have tried to use onClick=$('jquery_jplayer').jPlayer('play'); but it does not work. Also as per developer guide I was wondering if there should be "#" before the player's id like this onClick=$('#jquery_jplayer').jPlayer('play');. Anyway I have tried both options and they don't work. You said that this plugin is using the older version of jPlayer 2.0.9. I was wondering if I should forget about the plugin I am using right now (it would be hard because I have spent many hours tweaking it) and try to do it from scratch with newly download jPlayer, or should I pursue and try to find this magic formula that will make this player PLAY. Can you tell me how easy it is to create a simple skin like this (see the picture) for a guy like me that does not know Java, jQuery, but can copy, paste the necessary code and tweak things in CSS and HTML:

I just need a simple player (see the picture) with PREV, PLAY/PAUSE, NEXT buttons, progress bar and support for a playlist, and that it will work well on PC, Android and iOS devices. Maybe you can suggest a solution that I am not aware of. I have spent days in looking for a friendly, simple music player that will meet my simple demands and the only solution was the HTML5 Music Player (with no support). I don't mind donating if I get what I need.

 

Thank you again for your valuable time.