title: HTML5 Audio plays music but doesn't show controls in IE9
body: <p>Regarding the audio on this page: <a href="http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer" rel="nofollow">http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is all the code for the audio player (not incl. css) on the page:</p>
  
  <pre><code>&lt;?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
    ?&gt;
  
    &lt;script&gt;
    $(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 = &lt;?php echo $totalSlides ?&gt;;
          song = "&lt;?php echo $song ?&gt;";
  
          // 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 &lt; 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 &gt; totalSlides) { currentSlide = 1; }
  
              // Display current slide
              $('.song_image').attr('src', '../audio/filmClip_' + song + '_' + currentSlide + '.jpg');
          }   
  
          // If song has more than 1 image
          if (totalSlides &gt; 1)
          {
              // Play slideshow
              setInterval(changeSlide, slideSpeed);       
          }
  
          // Indicate current song
          $('div.filmClip_list.'+song).addClass('currentSong');
      });
      &lt;/script&gt;
  
  &lt;h2&gt;&lt;a id="mediaplayer"&gt; SCORE AUDIO LIBRARY&lt;/a&gt;&lt;/h2&gt;
  &lt;div id="audio_clips"&gt;
  
      &lt;!-- Song List --&gt;
      &lt;div id="clip_nav"&gt;
        &lt;div class="filmClip_list overtureRedRockRise"&gt;&lt;a href="composer.php?clip=overtureRedRockRise#mediaplayer"&gt;Overture - Red Rock Rise&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list getOutOfTown"&gt;&lt;a href="composer.php?clip=getOutOfTown#mediaplayer"&gt;Get Out of Town Firehorse&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list canyonBaby"&gt;&lt;a href="composer.php?clip=canyonBaby#mediaplayer"&gt;Lady Sedona Vortex&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list celestialGuides"&gt;&lt;a href="composer.php?clip=celestialGuides#mediaplayer"&gt;Celestial Guides&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list springback"&gt;&lt;a href="composer.php?clip=springback#mediaplayer"&gt;Springbank Park / Lawson Road&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list hallelujas"&gt;&lt;a href="composer.php?clip=hallelujas#mediaplayer"&gt;Hallelujahs&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list myOnly"&gt;&lt;a href="composer.php?clip=myOnly#mediaplayer"&gt;My Only&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list selfDefense"&gt;&lt;a href="composer.php?clip=selfDefense#mediaplayer"&gt;Self Defense&lt;/a&gt;&lt;/div&gt;
        &lt;div class="filmClip_list orchestral"&gt;&lt;a href="composer.php?clip=orchestral#mediaplayer"&gt;The Return of the Chevalier &lt;i&gt;(orchestral)&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- end #clip_nav--&gt;
  
      &lt;!-- Slideshow --&gt;
      &lt;div id="image_holder"&gt;
        &lt;img class="song_image" src="../audio/filmClip_&lt;?php echo $song ?&gt;_&lt;?php echo $initialSlide ?&gt;.jpg" width="600" height="400" alt="Slideshow" /&gt;
      &lt;/div&gt;&lt;!-- end #image_holder--&gt;
  
      &lt;!-- Audio --&gt;
      &lt;div id="audio_player"&gt;
        &lt;audio controls="controls" preload="auto" &lt;?php echo $autoplay ?&gt;&gt;
          &lt;source src="../audio/filmClip_&lt;?php echo $song ?&gt;.ogg" type="audio/ogg" /&gt;
          &lt;source src="../audio/filmClip_&lt;?php echo $song ?&gt;.mp3" type="audio/mpeg" /&gt;
          &amp;nbsp;&amp;nbsp;Your browser does not support audio. Please upgrade your internet browser to the latest version &lt;a href="http://www.onguardonline.gov/upgrade.aspx"&gt;here&lt;/a&gt;.
        &lt;/audio&gt;
      &lt;/div&gt;&lt;!-- end #audio_player --&gt;
    &lt;/div&gt;&lt;!-- end #audio_clips --&gt;
  </code></pre>