[SOLUTION] Using jPlayer

[vinchenzison]

Hi,

Sorry if this has been discussed before but I've searched and can't find anything on it.

I'm looking to be able to link to files on the server that have been uploaded via the file manager. Is this possible?
I have mp3's I want to link to that have been uploaded.

Just to clarify what I'm doing.. as I know a list can be generated with link list for downloads.

I'm using jplayer to play mp3's and I need to generate a playlist (manually if fine).
I need an easy method for my client so they can upload files using the existing method they are used to (within phpwmcs) and copy down the mp3 location so it can be put into an html CP.

Regards

James

[vinchenzison]

Ok, with some tinkering I've managed to do what I needed. Maybe not the best way but it works!

I'm using the jPlayer plugin to play mp3 and display a playlist. (It's a jquery mp3, ogg player)

In my template I have this in the head

Code: Select all

<script src="flash/jquery.jplayer.min.js"></script>
<link href="flash/skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function(){
	var playItem = 0;

	// Local copy of jQuery selectors, for performance.
	var jpPlayTime = $("#jplayer_play_time");
	var jpTotalTime = $("#jplayer_total_time");

	$("#jquery_jplayer").jPlayer({
                ready: function() {
			displayPlayList();
			playListInit(false);
		},
nativeSupport: true,
oggSupport: false,
customCssIds: false,
swfPath:"flash/",
warningAlerts: true
	})
	.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		jpPlayTime.text($.jPlayer.convertTime(playedTime));
		jpTotalTime.text($.jPlayer.convertTime(totalTime));
	})
	.jPlayer("onSoundComplete", function() {
		playListNext();
	});

	$("#jplayer_previous").click( function() {
		playListPrev();
		return false;
	});

	$("#jplayer_next").click( function() {
		playListNext();
		return false;
	});

	function displayPlayList() {
		for (i=0; i < myPlayList.length; i++) {
			$("#jplayer_playlist ul").append("<li id='jplayer_playlist_item_"+i+"'>"+ myPlayList[i].name +"</li>");
			$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
				var index = $(this).data("index");
				if (playItem != index) {
					playListChange( index );
				} else {
					$("#jquery_jplayer").jPlayer("play");
				}
			});
		}
	}

	function playListInit(autoplay) {
		if(autoplay) {
			playListChange( playItem );
		} else {
			playListConfig( playItem );
		}
	}

	function playListConfig( index ) {
		$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current");
		$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current");
		playItem = index;
		$("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
	}

	function playListChange( index ) {
		playListConfig( index );
		$("#jquery_jplayer").jPlayer("play");
	}

	function playListNext() {
		var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
		playListChange( index );
	}

	function playListPrev() {
		var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
		playListChange( index );
	}
});

</script>

I created a custom block in the layout called CUSTOM_BLOCK
In the footer (can be in main if only using this) block I added...

Code: Select all

<script>
var myPlayList = [
{CONTENT_CUSTOM}
];
</script>

Within a new article I added an HTML CP with the following

Code: Select all

<div id="jquery_jplayer"></div>

<div class="jp-playlist-player">
<div class="jp-interface">
<ul class="jp-controls">
<li id="jplayer_play" class="jp-play">play</li>
<li id="jplayer_pause" class="jp-pause">pause</li>
<li id="jplayer_stop" class="jp-stop">stop</li>
<li id="jplayer_volume_min" class="jp-volume-min">min volume</li>
<li id="jplayer_volume_max" class="jp-volume-max">max volume</li>
<li id="jplayer_previous" class="jp-previous">previous</li>
<li id="jplayer_next" class="jp-next">next</li>
</ul>
<div class="jp-progress">
<div id="jplayer_load_bar" class="jp-load-bar">
<div id="jplayer_play_bar" class="jp-play-bar"></div>
</div>
</div>
<div id="jplayer_volume_bar" class="jp-volume-bar">
<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
</div>
<div id="jplayer_play_time" class="jp-play-time"></div>
<div id="jplayer_total_time" class="jp-total-time"></div>
</div>
<div id="jplayer_playlist" class="jp-playlist">
<ul><!-- The function displayPlayList() uses this unordered list -->
</ul>
</div>
</div>

I then edited a filelist template and stripped it down to the bare minimum

Code: Select all

<!--FILE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
icon_path 		= "img/icons/"
icon_name 		= "small_icon_{FILE_EXT}.gif"
file_size_round	= 1
file_size_space = " "
date_format		= "%m/%d/%y"
set_locale		= "de_DE@Euro"
<!--FILE_SETTINGS_END//-->
<!--FILE_ENTRY_START//-->
			{name:"[FILE_TITLE]{FILE_TITLE}[/FILE_TITLE][FILE_TITLE_ELSE]{FILE_NAME}[/FILE_TITLE_ELSE]",mp3:"{FILE_LINK}"},
<!--FILE_ENTRY_END//-->

I then added the filelist CP and assigned it to CUSTOM_BLOCK

Now the mp3 files can be selected from the filelist to create the playlist.

Hope this helps someone looking for an mp3/ogg player.
The good thing with jplayer it will use html5 (if browser supports it) or a hidden flash player for all other browsers.

Example at http://m33.ch/index.php?id=17,62,0,0,1,0