It sounds like you need to set it up with unique IDs for each audio player.
Try changing your PHP to this:
<?php if(get_post_meta($value->ID, 'portfolio_audio', true)!=''){ ?>
<div class="audio-player">
<h2><?php echo $value->post_title?></h2>
<audio id="audio-player-<?php echo $value->ID; ?>" src="https://wordpress.stackexchange.com/questions/206209/<?php echo $audio_url; ?>" type="audio/mp3" controls="controls"></audio>
</div><!-- @end .audio-player -->
That should give each audio player a unique ID.
Then, in your javascript you will need to loop through all the audio players on the page and set up mediaelementplayer on each one. Try this:
$( document ).ready(function() {
/* -- loop through each player on the page and find it's ID -- */
$('.audio-player').each(function(){
var player_id = $(this).attr('id');
setupPlayer(player_id); // call this new function to setup the player
});
});
function setupPlayer(player_id) {
$(player_id).mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','progress','volume'],
audioVolume: 'horizontal',
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
}
I haven’t tested this, but it seems like it should work.