HTML5 Audio 在 IE9 中播放音乐但不显示控件

Question

关于此页面上的音频：http://ebonytay.com/site/composer。 php?clip=getOutOfTown#mediaplayer

音频控件显示在 Chrome 和 Safari 中（以及本地 Firefox 中。我在特定实时服务器工作时遇到问题，但这无关紧要）。然而，在 IE9 中，音频控件是不可见的。音乐仍在播放，如果您右键单击它应该在的位置，您可以播放/暂停它，它只是不显示。

我尝试过弄乱 z-index。我试过把它放在所有 div 之外。我尝试过使用 src= 而不是源。我尝试过使用控件而不是controls =“controls”。我尝试使用音频标签直接获取文件，而不使用任何 PHP/Javascript。我对编程相当陌生，所以我确信有些代码可以写得更简单，但它不应该破坏任何东西。任何帮助将不胜感激。

以下是页面上音频播放器的所有代码（不包括 css）：

<?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"><a href="composer.php?clip=overtureRedRockRise#mediaplayer">Overture - Red Rock Rise</a></div>
      <div class="filmClip_list getOutOfTown"><a href="composer.php?clip=getOutOfTown#mediaplayer">Get Out of Town Firehorse</a></div>
      <div class="filmClip_list canyonBaby"><a href="composer.php?clip=canyonBaby#mediaplayer">Lady Sedona Vortex</a></div>
      <div class="filmClip_list celestialGuides"><a href="composer.php?clip=celestialGuides#mediaplayer">Celestial Guides</a></div>
      <div class="filmClip_list springback"><a href="composer.php?clip=springback#mediaplayer">Springbank Park / Lawson Road</a></div>
      <div class="filmClip_list hallelujas"><a href="composer.php?clip=hallelujas#mediaplayer">Hallelujahs</a></div>
      <div class="filmClip_list myOnly"><a href="composer.php?clip=myOnly#mediaplayer">My Only</a></div>
      <div class="filmClip_list selfDefense"><a href="composer.php?clip=selfDefense#mediaplayer">Self Defense</a></div>
      <div class="filmClip_list orchestral"><a href="composer.php?clip=orchestral#mediaplayer">The Return of the Chevalier <i>(orchestral)</i></a></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" />
        &nbsp;&nbsp;Your browser does not support audio. Please upgrade your internet browser to the latest version <a href="http://www.onguardonline.gov/upgrade.aspx">here</a>.
      </audio>
    </div><!-- end #audio_player -->
  </div><!-- end #audio_clips -->

Answer 1

style_2011.css 中的规则如下：

body.composer audio {
    height: 32px;
    width: 100%;
}

具体来说，如果将高度设置为 45px 或更高，则将显示控件。

Answer 2

只需删除音频标签的高度即可。