Относительно аудио на этой странице: http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer
Элементы управления звуком отображаются в Chrome и Safari (и в Firefox локально. У меня проблемы с конкретным работающим сервером, но это не имеет значения). Однако в IE9 управление звуком невидимо. Музыка по-прежнему играет, и если вы щелкните правой кнопкой мыши там, где она должна быть, вы можете воспроизвести / приостановить ее, она просто не отображается.
Я пробовал возиться с z-index. Я пытался поместить это вне всех дел. Я пытался использовать src = вместо источника. Я пытался использовать элементы управления вместо элементов управления = "элементы управления". Я попытался использовать аудио-тег непосредственно из файла, без каких-либо PHP / Javascripting. Я довольно новичок в программировании, поэтому я уверен, что часть кода может быть написана проще, но он не должен ничего ломать. Любая помощь будет оценена.
Вот весь код для аудиоплеера (не включая 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" />
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 -->