I have a database table of mp3s that I'd like to display in a list with each having its own html5 button/player - can you have more than one on the page?

Hi Robert,

You can have indeed as many players as you wish on the same page.

In your situation however I will suggest one player with the supplied playlist CSS preset that will just give all the mp3 links play/pause buttons separately.

Greetings,
George

Ok. Thanks for the help. I'll give that a try.

What I'm trying to do is exactly what you suggested - generate a playlist from a recordset of mp3 links and give each controls. I've been unable to make it work so far.

Can you elaborate a little more on using the player this way? It would be greatly appreciated.

Ok. I think I have it! The only issue left is that I'm using an image as the play button. Is there a way to change the image to a different image (a pause symbol) when pressed? Rather than have a play and pause button side by side?

Here is my playlist code:

<div class="dmxHTML5MP3PlayerPlaylist">
<ul>
  <?php do { ?>
    <li>
      <div><?php echo $row_Recordset1['title']; ?></div>
      <div><?php echo $row_Recordset1['description']; ?></div>
      <div><a href="<?php echo $row_Recordset1['mp3Link']; ?>"><img src="playButton.jpg" width="25" height="25" /></a></div>  
  </li>
    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</ul>
</div>

Hello Robert,
Yes there is a way:
Simply use: HTML5 MP3 Player Buttons as links
it will insert the following code:

<div class="dmxHTML5MP3PlayerControlbar"> <a href="#" class="dmxHTML5MP3PlayerBtnPrev">Prev</a> <span class="dmxHTML5MP3PlayerPlayPause"> <a href="#" class="dmxHTML5MP3PlayerBtnPlay">Play</a> <a href="#" class="dmxHTML5MP3PlayerBtnPause">Pause</a> </span> <a href="#" class="dmxHTML5MP3PlayerBtnStop">Stop</a> <a href="#" class="dmxHTML5MP3PlayerBtnNext">Next</a> </div>

So you can just replace these two link texts (Play/Pause):

<a href="#" class="dmxHTML5MP3PlayerBtnPlay">Play</a> 
<a href="#" class="dmxHTML5MP3PlayerBtnPause">Pause</a>

With images, and as they are located within the

<span class="dmxHTML5MP3PlayerPlayPause"></span>

They will be displayed as one image, changing when clicked.