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