Custom function name using unique number - php

Question

I am using a number of HTML5 audio players on one page and I need a means to control them individually. I have so far been using:
<?php $unique = uniqid(); ?>
to generate a unique number. I have them been able to successfully apply this to my player:
<button class="bb-play" onClick="play-<?php echo $unique; ?>()">Play</button>
I am able to apply this within some jQuery, within the function as follows:
function play() { document.getElementById('player-<?php echo $unique; ?>').play(); }
My question is, where my unique number is say 56f295fbe6be3 how can get I get the function play() to appear instead as play-56f295fbe6be3() ?
I appreciate any help you can provide.

Answer 1

Trying to write a function with a unique number in its name is a bad approach. You should rather write a unique function that is able to handle them all.
<script>
function play(that) {
var playerId = that.id;
document.getElementById('player-' + playerId).play();
}
</script>
<button class="bb-play" id="<?php echo $unique; ?>" onClick="play(this)">Play</button>
From a semantic perspective, we're assigning to the <button> element an attribute that says what's the player id and it would make more sense to put it into a data attribute. It comes easier to use jQuery then:
<button class="bb-play" data-player-id="player-<?php echo $unique; ?>">Play</button>
<script>
$("button.bb-play").click(function(){
var playerId = $(this).data('playerId');
$("#" + playerId).play();
});
</script>

Answer 2

HTML:
<button class="bb-play" onClick="play(<?php echo $unique; ?>);">Play</button>
Javascript:
function play(id) { document.getElementById('player-'+id).play(); }

Answer 3

If the buttons and the player are places inside the same parent element, you could work without id's.
<div class="player">
<media .../>
<button class="bb-play">Play</button>
</div>
and the js code
$('.bb-play').on('click', function() {
$('media', $(this).closest('.player')).get(0).play();
});

Answer 4

Why not pass the id number as a variable to the function?
function play_video(id) {
document.getElementById('video-' + id).play();
}
And in the HTML use:
onClick="play_video(<?php echo $unique; ?>)" id="video-<?php echo $unique; ?>"
// onClick="play_video(56f295fbe6be3)" id="56f295fbe6be3"
Then you can just use play_video() for all videos.