Multiple HTML mp3 Player with hrefs

Hello - I have build an Website for an music label where the admin can create projects and in those projects upload multiple mp3 files. If he uploads 1 mp3 file, there will be 1 player and if he uploads 3 files, there are 3.

The code in the project.php template looks like this:

<?php foreach($page->audio() as $audio): ?>
<audio id="audio" controls controlsList="nodownload" src="<?php echo $audio->url() ?>" 

This is working perfectly, but…
Now what I want to do is some styling. I just want a ‘Play’ button that i can style.
If I do something like this:

<a href="#" onclick="document.getElementById('audio').play()">Play</a>

It only plays the first file, but not the second, because there is only one src as you see above.

Here is an example:

How can I make it so that there will be multiple Play Buttons that don’t play only one file?


You are using the same ID for all your audio tags. Use a class attribute and a script that finds the audio element next to the button.

Thanks for your reply!
I don’t know how to create classes in an CMS system.
Do I have to use a javascript that creates the element/name/class?

My approach:
I would Copy Paste the html Audio like this:

<audio id="player1" src="<?php echo $audio->url() ?>">
<audio id="player2" src="<?php echo $audio->url() ?>">
<audio id="player3" src="<?php echo $audio->url() ?>">

and in the src he just picks the first file, then the next, and so on.
But this does not really seem innovative, or?

Using a class instead of an ID:

<?php foreach($page->audio() as $audio): ?>
<div class="audio-wrapper">
<audio class="audio" controls controlsList="nodownload" src="<?php echo $audio->url() ?>" 
<a class="playbutton" href="#"">Play</a>

Script, just a quick jQuery example:

  $('.playbutton').click(function(e) {
        var button = $(this);
        var audio = button.parent().find('audio')[0];     
        if (audio.paused) {
        } else {

This is a matter of your Javascript, not a Kirby thing.

1 Like

Thanks :kiss::honeybee::snail::mushroom::fire: