Hello there I am building a theme for multimedia services and I need a gallery of audios. I am looking for a way to use the built in mediaelementplayer. It "kind of" works but I have several issues...
I need multiple players because each player displays a different audio. The script I am using "grabs" the player by its ID but I guess each post (from post type) is dynamic so I am lost not knowing how to call a php variable inside my js.
Because it grabs the player by its ID, the first player displays and plays and everything but the others are not working.
Part of my shortcode is 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" src="<?php echo $audio_url; ?>" type="audio/mp3" controls="controls"></audio>
</div><!-- @end .audio-player -->
My js is in another file and is this:
$(function(){
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','progress','volume'],
audioVolume: 'horizontal',
audioHeight: 70,
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
});
});
Can someone point me out in the right direction? Thanks!
$('.audio-player audio').mediaelementplayer(...
instead or even just$('audio')
... also element ids should be unique...