Example 7 - JavaScript Controls - Wimpy Rave Player (AJAX)

Example 7

This example shows you how to pop up a window, then control the player from this page.

IMPORTANT, IMPORTANT, IMPORTATNT:

You must first pop up the player by performing one of the following:

- Pop up Rave with default playlist.

- Pop up Rave with specific file and start playing immediately.

OR, click the "fullscreen / detach" button within Rave below (the button to the left of the blue info area)

NOTE: THE PLAYER BELOW ONLY EXISTS SO YOU CAN USE THE "FULL SCREEN" BUTTON:

You need to upgrade your Flash Player

Returned Data :

 Track Info will display here 

- a Ask if Wimpy is ready

- Play First Track
- Get info on current track
- Get info on the second track in the playlist.
- Call multiple functions (Syncronous behaviour)

- Get playhead position in seconds
- Get playhead position in percent complete
- Set playhead position to 5 seconds
- Set playhead position to 35 percent complete
- Get load percent
- Get load state
- Get player state
- Get total playlist items
- Get playlist
- Set volume to 40 percent : 100 percent
- Turn Loop Track: "on" : "off"
- Turn Random Playback "on" : "off"
- Turn Repeat Playlist: "on" : "off"
- Turn Mute: "on" : "off"
- Update Artist and Title

Add One Track
Add Multiple Tracks
Clear Playlist
Load and open external playlist
Load and open external playlist (and start playing)

Clear Playlist
Add One Track (and play immediately)
Pause
Play
Stop

Clear Playlist
Add Multiple Tracks
Go to and play the second track in the playlist
Next
Previous

Source Code

We use the same setup as in examples 5 and 6, however, we need to "tack on" the popped up window object to the beginning of each function call:

When Wimpy detaches the player or when you use the wimpy_popAndPlay(), a new object named "wimpy_popout_window" is created, which allows "this" page to communicate with the popped up page.

Wimpy is also set up so that if a user navigates from "this" page to another page on your site, the popped up player can still be controlled from the other page.

The following lines are traditionally written in the <head> of the page. NOTE: Although it is not required that these lines appear between the opening <head> and closing </head>, they may also appear in the <body>, however, if these lines do appear in the <body> they must be written above any code that executes any function contained in the external file.

<script language='javascript' src='rave_js_examples.js'></script>

<script language='javascript' src='rave_js_example_javascript_playlists.js'></script>
<script language='javascript' src='rave.js'></script>

The following goes into the <body>

(Same as Example 6, but added "wimpy_popout_window" in front of function calls.)

<div id="flashcontent">You need to upgrade your Flash Player</div>
<script language="JavaScript" >

function callMultipleFunctions(){
   wimpy_popout_window.wimpy_clearPlaylist();
   // addFilesC is located in the external javascript file "rave_js_example_javascript_playlists.js" which was loaded in the <head> tag.
   wimpy_popout_window.wimpy_appendPlaylist(addFilesC, true);
   wimpy_popout_window.wimpy_appendPlaylist(addFilesC, true);
}

// Setting this to TRUE allows us to receive notifications from Wimpy:
enableWimpyEvents = true;

// Create a new object (can be any name) and add options to it:
var myConfigs = new Object();
myConfigs.wimpyApp = "playlist1.xml";
myConfigs.wimpySkin = "skins/skin_js_examples.xml";
myConfigs.wimpyWidth = "330";
myConfigs.wimpyHeight = "410";

// Render the player and include the config object as the argument:
makeWimpyPlayer(myConfigs);

</script>

The following lines are used to interact with the player:

(Same as Example 6, but added "wimpy_popout_window" in front of function calls.)

<a href="javascript:;" onClick="displayInfo(wimpy_popout_window.wimpy_amReady_ask())">
- a Ask if Wimpy is ready
</a>

<a href="javascript:;" onClick="displayObject(wimpy_popout_window.wimpy_gotoTrack(2))">
- Play Track 2
</a>

<a href="javascript:;" onClick="displayObject(wimpy_popout_window.wimpy_getTrackInfo(2))">
- Get info on the second track in the playlist.
</a>

<a href="javascript:;" onClick="callMultipleFunctions()">
- Call multiple functions at the same time. (Clear playlist, then add new items)
</a>

<a href="javascript:;" onClick="displayInfo(wimpy_popout_window.wimpy_getPlayheadSeconds())">
- Get playhead position in seconds
</a>

<a href="javascript:;" onClick="displayInfo(wimpy_popout_window.wimpy_getPlayheadPercent())">
- Get playhead position in percent complete
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setPlayheadSeconds(5)">
- <b>Set</b> playhead position to 5 seconds
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setPlayheadPercent(35)">
- <b>Set</b> playhead position to 35 percent complete
</a>

<a href="javascript:;" onClick="displayInfo(wimpy_popout_window.wimpy_getLoadPercent())">
- Get load percent
</a>

<a href="javascript:;" onClick="displayObject(wimpy_popout_window.wimpy_getLoadState())">
- Get load state
</a>

<a href="javascript:;" onClick="displayObject(wimpy_popout_window.wimpy_getPlayerState())">
- Get player state
</a>

<a href="javascript:;" onClick="displayInfo(wimpy_popout_window.wimpy_getTotalPlaylistItems())">
- Get total playlist items
</a>

<a href="javascript:;" onClick="displayPlaylistObject(wimpy_popout_window.wimpy_getPlaylist())">
- Get playlist
</a>

- Set volume to
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setVolume(40)">
40 percent
</a> :
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setVolume(100)">
100 percent
</a>



- Turn Loop Track:
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setLoopTrackState('on')">
on
</a> :
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setLoopTrackState('off')">
off
</a>

- Turn Random Playback
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setRandomState('on')">
on
</a> :
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setRandomState('off')">
off
</a>

- Turn Repeat Playlist:
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setRepeatState('on')">
on
</a> :
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setRepeatState('off')">
off
</a>

- Turn Mute:
<a href="javascript:;" onClick="wimpy_popout_window.wimpy_setMuteState('on')">
on
</a> :
<a href="javascript:;" onClick="wimpy_setMuteState('off')">
off
</a>




<a href="javascript:;" onclick='wimpy_popout_window.wimpy_updateInfoDisplay("My New Artist", "My New Title")'>
- Update Artist and Title
</a>

(Same as Example 5, but added "wimpy_popout_window" in front of function calls.)

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_clearPlaylist();">
Clear Playlist
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_appendPlaylist(addFilesA, false)">
Add One Track
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_appendPlaylist(addFilesC, false)">
Add Multiple Tracks
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_clearPlaylist();">
Clear Playlist
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_loadExternalPlaylist('playlist.xml')">
Load and open external playlist
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_clearPlaylist();">
Clear Playlist
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_appendPlaylist(addFilesB, true)">
Add One Track (and play immediately)
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_pause()">
Pause
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_play()">
Play
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_stop()">
Stop
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_clearPlaylist()">
Clear Playlist
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_appendPlaylist(addFilesC, false)">
Add Multiple Tracks
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_gotoTrack(2)">
Go to and play the second track in the playlist
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_next()">
Next
</a>

<a href="javascript:;" onClick="wimpy_popout_window.wimpy_prev()">
Previous
</a>