Nevermind! Figured it out.
Replacing this bit of code
$f(vimeoPlayer).addEvent('ready', ready);
With this
jQuery('iframe').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
fixed the problem! So the working javascript code is
<script type="text/javascript">
$(function(){
jQuery('iframe').each(function(){
Froogaloop(this).addEvent('ready', ready);
});
function ready(player_id) {
froogaloop = $f(player_id);
function setupEventListeners() {
function onPlay() {
froogaloop.addEvent('play',
function(){
$("#audio-player")[0].pause();
$("#header-button-sound-play").hide();
$("#header-button-sound-pause").show();
});
}
onPlay();
}
setupEventListeners();
}
})
</script>
Thanks to http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html
for the help!