HTML5 Audio plays music but doesn't show controls in IE9 - html

Question

Regarding the audio on this page: http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer
The audio controls show up in Chrome and Safari (and in Firefox locally. I'm having problems with a specific live server working but that's irrelevant). In IE9 however, the audio control is invisible. The music is still playing and if you right click on where it's suppose to be, you can play/pause it, it just doesn't show up.
I've tried messing with the z-index. I've tried putting it outside all the divs. I've tried using src= instead of source. I've tried using controls instead of controls="controls". I've tried using the audio tag directly sourcing the file, without any PHP/Javascripting. I'm fairly new to programming so I'm sure some of the code could be written simpler, but it shouldn't be breaking anything. Any help would be appreciated.
Here is all the code for the audio player (not incl. css) on the page:
<?php
$song = "overtureRedRockRise"; // set to starting song
$autoplay = ""; // disable autoplay on page load
$totalSlides = 1; //default amount of slides
$initialSlide = 1; //default starting slide
// Change song to URL parameter defined by links in #clip_nav div
if (isset($_GET["clip"])) // if URL parameter is ?clip=foo
{
$song = $_GET["clip"]; // $song is foo
$autoplay = "autoplay='autoplay'"; // enable autoplay when changing song
}
// Check how many slideshow images exist for current song
while (file_exists("../audio/filmClip_" . $song . "_" . $totalSlides . ".jpg"))
{
$totalSlides++;
}
$totalSlides--; // subtract 1 to get total number of slides for current song
?>
<script>
$(document).ready(function() {
var currentSlide = 1; //default starting slide
var totalSlides; //number of slides for current song
var song; //current song
var slideSpeed; //current slideshow speed
// Get variables from PHP
totalSlides = <?php echo $totalSlides ?>;
song = "<?php echo $song ?>";
// Setup slideshow speeds in milliseconds using JSON
var songSpeed =
[
['overtureRedRockRise',12000],
['getOutOfTown',7000],
['canyonBaby', 5000],
['celestialGuides', 10000],
['springback', 11000],
['hallelujas', 10000],
['myOnly', 8000],
['selfDefense', 10000],
['orchestral', 10000]
]
//go through each song in array
for (i = 0; i < 9; i++)
{
//find the current song
if (song == songSpeed[i][0])
{
//set current slideshow speed
slideSpeed = songSpeed[i][1] + 1000; //add 1 second for loading time
}
}
// Setup slideshow
function changeSlide()
{
// change current slide number
currentSlide++;
// Loop slideshow
if (currentSlide > totalSlides) { currentSlide = 1; }
// Display current slide
$('.song_image').attr('src', '../audio/filmClip_' + song + '_' + currentSlide + '.jpg');
}
// If song has more than 1 image
if (totalSlides > 1)
{
// Play slideshow
setInterval(changeSlide, slideSpeed);
}
// Indicate current song
$('div.filmClip_list.'+song).addClass('currentSong');
});
</script>
<h2><a id="mediaplayer"> SCORE AUDIO LIBRARY</a></h2>
<div id="audio_clips">
<!-- Song List -->
<div id="clip_nav">
<div class="filmClip_list overtureRedRockRise">Overture - Red Rock Rise</div>
<div class="filmClip_list getOutOfTown">Get Out of Town Firehorse</div>
<div class="filmClip_list canyonBaby">Lady Sedona Vortex</div>
<div class="filmClip_list celestialGuides">Celestial Guides</div>
<div class="filmClip_list springback">Springbank Park / Lawson Road</div>
<div class="filmClip_list hallelujas">Hallelujahs</div>
<div class="filmClip_list myOnly">My Only</div>
<div class="filmClip_list selfDefense">Self Defense</div>
<div class="filmClip_list orchestral">The Return of the Chevalier <i>(orchestral)</i></div>
</div><!-- end #clip_nav-->
<!-- Slideshow -->
<div id="image_holder">
<img class="song_image" src="../audio/filmClip_<?php echo $song ?>_<?php echo $initialSlide ?>.jpg" width="600" height="400" alt="Slideshow" />
</div><!-- end #image_holder-->
<!-- Audio -->
<div id="audio_player">
<audio controls="controls" preload="auto" <?php echo $autoplay ?>>
<source src="../audio/filmClip_<?php echo $song ?>.ogg" type="audio/ogg" />
<source src="../audio/filmClip_<?php echo $song ?>.mp3" type="audio/mpeg" />
Your browser does not support audio. Please upgrade your internet browser to the latest version here.
</audio>
</div><!-- end #audio_player -->
</div><!-- end #audio_clips -->

Answer 1

It's this rule in style_2011.css:
body.composer audio {
height: 32px;
width: 100%;
}
Specifically, if you set height to 45px or more then the controls will appear.

Answer 2

Just remove the height of the audio tag.