How to create multiple jwplayer playing buttons - audio

Question

This is a jwplayer case. I have a website with music album pages. Right now I have a jwplayer playing a playlist and works fine, but I want to have a table listing all the songs by track number and a play icon that plays the song on the first of each line. So far I managed to create a play icon that plays the full playlist but no luck on how to create as many icons as the number of songs and that each plays a different song from the playlist.
This is a representation of what I want to do
play icon (song 1) | track number | title song 1 | duration
play icon (song 2) | track number | title song 2 | duration
The current code I have is this, which creates a single play icon that plays the playlist. This code, by the way is pretty awesome as it plays next song automatically and controls the pause/play of the main player. This website runs on joomla.
<script>
var playerInstance = jwplayer('container');
playerInstance.setup({
playlist: [{
//DYNAMICALLY GENERATED PLAYLIST
<?php
$album_id = $this->item->id;
// Get default database object
$db = JFactory::getDbo();
// Get a new JDatabaseQuery object
$query = $db->getQuery(true);
$query = 'SELECT position, name, length, filename FROM XXX WHERE `album_id` = ' . $db->quote( (int) $album_id ) . ' ORDER BY `num` ASC LIMIT 0 , 30';
$db->setQuery($query);
$results = $db -> loadAssocList();
foreach($results as $row){
echo "file: \"/". htmlentities($row['filename']). "\", ";
echo "title: \"". htmlentities($row['name']). "\"";
echo "},{";
}
?> }]
//END DYNAMICALLY GENERATED PLAYLIST
controls: false
});
playerInstance.on('play', function() {
document.getElementById("videoPlayPause").style.backgroundPosition = "-263px -70px";
});
playerInstance.on('pause', function() {
document.getElementById("videoPlayPause").style.backgroundPosition = "-287px -70px";
});
</script>
<br/>
<div class="videoPlayerControls playing" id="videoPlayerControls">
<button id="videoPlayPause" onclick="playerInstance.play();" onmouseout="if(playerInstance.getState() == "IDLE" || playerInstance.getState() == "PAUSED"){document.getElementById("videoPlayPause").style.backgroundPosition = "-62px 0";} if(playerInstance.getState() == "PLAYING"){document.getElementById("videoPlayPause").style.backgroundPosition = "-62px -50px";}" onmouseover="if(playerInstance.getState() == "PLAYING"){document.getElementById("videoPlayPause").style.backgroundPosition = "-263px -70px";}if(playerInstance.getState() == "IDLE" || playerInstance.getState() == "PAUSED"){document.getElementById("videoPlayPause").style.backgroundPosition = "-287px -70px";}" type="button">Play/Pause</button>
Anyone has done something like this?

Answer 1

In JavaScript, you just need to load the URL of the file you want to play into the player, like this.
<script>
jwplayer('yourPlayerDivId').setup({
file: 'track1.mp4'
});
</script>

Answer 2

Given you have a loaded playlist, you can access (play) any item in the playlist directly using the playerInstance.playlistItem(index) method.
This starts playback of the playlist item at the specified index - bearing in mind that the first item in the playlist would have an index of 0.
You should therefore be able to attach a click event to each corresponding 'Play Icon' which calls this method with an incremented index in order to access the associated playlist item.
BTW: Since JW7 the playerInstance.getState() reports the state as a lowercase string...