Multiple audio player not working mediaelement.js

Question

im having problems with trying to add 2 audio players to one page

http://www.brad-holmes.co.uk/sites/jameswilliams/index.html

the first loads fine but the second doesnt load the controls at all im using unedit .js file direct from mediaelements.js websites what do i need to edit to make multiple audio players work

Answer 1

Looking at your JS for the initiation of the players

$(document).ready(function() {
    $('#audio-player').mediaelementplayer({
        alwaysShowControls: true,
        features: ['playpause','volume','progress'],
        audioVolume: 'horizontal',
        audioWidth: 400,
        audioHeight: 120
    });
});

You are using a DIV selector (#audio-player) for both elements. You should have unique DIV id's in your HTML document, you would be better using the following...

$(document).ready(function() {
    $('audio').mediaelementplayer({
        alwaysShowControls: true,
        features: ['playpause','volume','progress'],
        audioVolume: 'horizontal',
        audioWidth: 400,
        audioHeight: 120
    });
});

Which will initiate the medialement player for all the <audio> elements in your page. If you want to give each player different settings you should then use unique DIV id's for each.