0

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!

1
  • Try selecting just $('.audio-player audio').mediaelementplayer(... instead or even just $('audio') ... also element ids should be unique...
    – bonger
    Commented Oct 21, 2015 at 22:35

1 Answer 1

0

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="<?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.

1
  • Seems like it must work but it fails to load the js....tried the answer in the comment above and its working now :) Commented Oct 22, 2015 at 2:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.