Overview
Jamroom has the capacity to embed a flash player on almost any page and create dynamic playlists using the Jamroom Ranking, Chart, and Search modules. Embedding the flash player can be accomplished one of three ways: using the {jr_flash_player} function, using the {jr_media_access} function, or using the "expanded" HTML code for the flash player. This tutorial will focus on using the {jr_flash_player} and {jr_media_access} functions.
 It is highly recommended that you familiarize yourself with the {jr_flash_player} and {jr_media_access} Template Functions.
Flash players can only stream MP3 audio and FLV video files. This is a limitation of Flash itself, not Jamroom. If you find that the methods on this page are not working for your songs or videos, ensure that your songs and videos are in either MP3 or FLV format.
{jr_flash_player} Method
Step 1 - Decide what you want in the playlist for your player
The first step before embedding your flash player is to figure out exactly what you want the playlist to contain. Jamroom is extremely customizable, and can create playlists based on any output generated by the Jamroom Ranking, Chart, and Search modules. For instance, you might want to have a flash player create a playlist for the Top 40 songs (generated by the Charts module), or create a playlist for all of the artists returned from a search for the (partial) band name "DJ".
Step 2 - Setting up the playlist and the player
The next step is to set up the playlist and the player. Generally, you will want your code to be set up like this (this is just an overview):
{jr_(function) row_template="(row_template.tpl)" assign="(variable)"}
{jr_flash_player ...parameters...}
Where the appropriate parameters have been set in each function. The row_template parameter in the jr_(function) is the template that will get all of the information that we need to pass to the jr_flash_player function. Note that the jr_(function) code must come before the jr_flash_player code. If the order is reversed, then the jr_flash_player function will not be able to find a playlist since it has not been generated yet.
Armed with this information, you are now ready to start embedding the flash player and creating dynamic playlists. The following examples should be a good reference model for you to follow.
Example 1 - Embedding a radio station player into a theme template
Place the following code in the theme template in which you would like the flash player to appear:
{jr_ranking mode="radio" order="5" band_id=$BAND_ID show=1 row_template="get_radio_id.tpl" assign="TOP_RADIO_ID"}
{jr_flash_player player_type="`$JAMROOM_URL`/themes/Cobalt/dsplayer_cobalt_small.swf" radio_id=$TOP_RADIO_ID height="250" width="160"}
At this point, a template called get_radio_id.tpl needs to be created in the skins/Cobalt directory containing the following code:
{$RADIO_ID}
In the playlist generation section of this code (the {jr_ranking} function), we specified that we want to create a playlist for the band with a band_id of $BAND_ID (which will be set when the theme is regenerated), containing radio stations listed from highest number of plays to lowest number of plays, but only showing the first ranked station. The row template is essential to this playlist because the $RADIO_ID cannot be retreived from just any template. We then assigned the output of the jr_ranking function to a variable, and passed that variable to the jr_flash player function as the radio_id. Also, we specified that this function should use the DS Cobalt player, instead of the xspf player.
Example 2 - Embedding a flash player in individual ranking and chart rows
This code can be used if you would like to place a flash player inside each row of a ranking, chart, or search function. Place the following code in the row template in which you would like the flash player to appear:
{jr_flash_player player_type="`$JAMROOM_URL`/themes/Cobalt/dsplayer_cobalt_small.swf" height="250" width="160" band_id=$BAND_ID}
This is, perhaps, the easiest way to integrate a flash player. You may want to use this in a Spotlight template or something similar. If you choose to use it in a Spotlight or Song row template, make sure and include the "song_id" parameter as well, like this:
{jr_flash_player player_type="`$JAMROOM_URL`/themes/Cobalt/dsplayer_cobalt_small.swf" height="250" width="160" band_id=$BAND_ID song_id=$SONG_ID}
This will ensure that only the song that is in the "row" will be played, as opposed to having all of the band's songs being displayed.
{jr_media_access} Method
Step 1 - Creating the {jr_media_access} function
The first step to having songs, videos, radio stations, or video channels play through a flash player using the {jr_media_access} function is to configure our function correctly. The {jr_media_access} function has two parameters that can enable us to do this: type and onclick. If we want a flash player to be displayed in the same template as the song, we will need to use the type parameter. If we want the flash player to pop-up into a new window, we need to use the onclick parameter.
Example 1 - Displaying a flash player in-template
If you have purchased and installed the Jamroom Power Pack, you can use two special values for the type parameter of the {jr_media_access} function to play songs, videos, radio stations, and video channels in an on-site flash player. These two values are "flash_player_button" and "flash_player_slim." The first value will display a small "play button" XSPF flash player, while the second will display a "slim" XSPF flash player. You will also need to pass in either the $SONG_LOFI_PLAY_URL (for a lofi flash player) or the $SONG_LOFI_PLAY_URL (for the hifi flash player) variable as the media_player parameter. The following is an example of how to use a {jr_media_access} function to create a "button" sized flash player in your templates:
{if $SONG_HIFI_EXTENSION == 'mp3'}
{jr_media_access type="flash_player_button" media="hifi_stream" media_url=$SONG_HIFI_PLAY_URL skin="Flashback" media_size=$SONG_HIFI_SIZE download=$SONG_HIFI_DOWNLOAD no_image="no.png" no_alt=$na_notice login_image="perm.png" login_alt=$str_notice}
{/if}
Example 2 - Creating a popup flash player
If you want to have your songs popup into their own flash player, you will need to use the onclick parameter for the {jr_media_access} function. The following is an example of how to make your hifi songs popup into their own flash player using the Cobalt3 skin. This code would go in a row_template for either a {jr_ranking} function or {jr_chart} function:
{if $SONG_HIFI_EXTENSION == 'mp3'}
{assign var="media_play" value="`$JAMROOM_URL`/`$jamroom_index`?t=popup_player&mode=song_hifi&band_id=`$BAND_ID`&song_id=`$SONG_ID`"}
{assign var="onclick" value="popwin(this.href,'Popup Player','180','200','yes');return false"}
{assign var="hifi_size" value=$SONG_HIFI_SIZE|jr_format_size}
{jr_media_access type="image" alt="(`$SONG_HIFI_EXTENSION`, `$hifi_size`, `$SONG_HIFI_LENGTH`)" media="hifi_stream" media_url=$media_play skin="Flashback" media_size=$SONG_HIFI_SIZE download=$SONG_HIFI_DOWNLOAD no_image="no.png" no_alt=$na_notice login_image="perm.png" login_alt=$str_notice onclick=$onclick}
{/if}
You will also need to create a template in your jamroom/skins/Cobalt3/ directory called popup_player.tpl with the following code:
{* load some defaults from our config file *}
{config_load file="`$SKIN_DIR`/Cobalt3.cfg"}
{* bring in our language strings *}
{jr_lang_prepare skin="Cobalt3" default="en-US"}
{* check our title *}
{if strlen($title) === 0}
{jr_lang id="8" default="home" assign="title"}
{/if}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="{jr_lang id="direction" default="ltr"}">
<head>
<title>{$system_name}: {$title}</title>
<meta http-equiv="Content-Type" content="text/html; charset={jr_lang id="charset" default="utf-8"}">
<meta http-equiv="Content-Language" content="{jr_lang id="name" default="en-US"}">
<meta name="description" content="{$meta_description}">
<meta name="keywords" content="{$meta_keywords}">
<meta name="designer" content="Talldude Networks, LLC. - original design by Oinkba.com">
<meta name="generator" content="Jamroom {$version}">
<link href="{$JAMROOM_URL}/skins/Cobalt3/Cobalt3.css" type="text/css" rel="stylesheet" media="screen">
<link href="{$JAMROOM_URL}/message.php?mode=feed" type="application/rss+xml" rel="alternate" title="{$system_name} RSS">
<script type="text/javascript" language="javascript" src="{$JAMROOM_URL}/include/js/jamroom_javascript.inc.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" language="javascript" src="{$JAMROOM_URL}/include/js/jamroom_pngfix.inc.js"></script>
<![endif]-->
{* Google analytics *}
{jr_google_analytics page=$title}
{literal}
<script language="javascript">
<!--
function vaultpop(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=650,height=600,left = 50,top = 50');");
}
//-->
</script>
{/literal}
</head>
<body>
{if !isset($mode)}
{assign var="mode" value="song_hifi"}
{/if}
{assign var="play_url" value="`$JAMROOM_URL`/play.php?mode=`$mode`&band_id=`$band_id`&song_id=`$song_id`&type=xspf"}
{assign var="play_url" value=$play_url|jr_urlencode}
{jr_flash_player player_type="`$JAMROOM_URL`/skins/Cobalt3/ds_mp3_180x200-Cobalt3.swf" playlist_url="`$play_url`&autoplay=true" width="180" height="200"}
</body>
</html>
If you find that your play link is linking to the correct page, but it is not popping up in a new window, make sure you have added this line of code to the <head></head> portion of your header template:
<script type="text/javascript" language="javascript" src="{$JAMROOM_URL}/include/js/jamroom_javascript.inc.js"></script>
Congratulations! Navigate to a page using the code we created above, and clicking on the play link should launch your popup player!
|
