HTML5 Audio Element disappearing

For some wierd reason my HTML5 Audio Element in an audio finder I made is now dissappearing after I use javascript to load its track (or source). It never used to do it before, just suddenly started doing this. The source comes out correct though, just the whole thing disappears after I click my “Load Track” submit button.

I tested it in Chrome and it works perfectly fine, maybe it’s a Gecko bug? I tried IE9, but right now it just uses OGG audio and IE doesnt support that…

Here is the related code…

[code=html]<div class=”wordDef”>
<h2 class=”audioServiceTitle”>Audio Recording Finder</h2>
<h2 class=”newaudio”>- Last Tracks Added -</h2>
<h3 class=”newaudio”>Sunday Services – February 19, 2012</h3>
<h4 class=”newaudio”> – Sermon -</h4>
<p class=”center”>&nbsp;</p>

<form method=”get” name=”audioRecording” id=”audioRecording”>
<select class=”audsel” name=”selectYear” id=”selectYear” onChange=”this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor”>
<option>Select A Year</option>
<option value=”2011″>2011</option>
<option value=”2012″>2012</option>
</select>
<select class=”audsel” name=”selectMonth” id=”selectMonth” onChange=”this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor”>
<option>Select A Month</option>
<option value=”01″>January</option>
<option value=”02″>February</option>
<option value=”03″>March</option>
<option value=”04″>April</option>
<option value=”05″>May</option>
<option value=”06″>June</option>
<option value=”07″>July</option>
<option value=”08″>August</option>
<option value=”09″>September</option>
<option value=”10″>October</option>
<option value=”11″>November</option>
<option value=”12″>December</option>
</select>
<select class=”audsel” name=”selectDay” id=”selectDay” onChange=”this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor”>
<option>Select A Day</option>
<option value=”01″>1</option>
<option value=”02″>2</option>
<option value=”03″>3</option>
<option value=”04″>4</option>
<option value=”05″>5</option>
<option value=”06″>6</option>
<option value=”07″>7</option>
<option value=”08″>8</option>
<option value=”09″>9</option>
<option value=”10″>10</option>
<option value=”11″>11</option>
<option value=”12″>12</option>
<option value=”13″>13</option>
<option value=”14″>14</option>
<option value=”15″>15</option>
<option value=”16″>16</option>
<option value=”17″>17</option>
<option value=”18″>18</option>
<option value=”19″>19</option>
<option value=”20″>20</option>
<option value=”21″>21</option>
<option value=”22″>22</option>
<option value=”23″>23</option>
<option value=”24″>24</option>
<option value=”25″>25</option>
<option value=”26″>26</option>
<option value=”27″>27</option>
<option value=”28″>28</option>
<option value=”29″>29</option>
<option value=”30″>30</option>
<option value=”31″>31</option>
</select>
<select class=”audsel” name=”selectService” id=”selectService” onChange=”this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor”>
<option>Select A Service</option>
<option value=”ss”>Sunday School</option>
<option value=”s”>Sermon</option>
<option value=”sr”>Special Recording</option>
</select>
<p>&nbsp;</p>
<input id=”findtrack” type=”button” onClick=”populateAudio()” value=”Load Track”>
</form>
<span id=”yearVal” style=”display:none;”></span>
<span id=”monthVal” style=”display:none;”></span>
<span id=”dayVal” style=”display:none;”></span>
<span id=”serviceVal” style=”display:none;”></span>
<p id=”notice”></p>
<p>&nbsp;</p>
<h1 id=”trackTitle”></h1>
<audio id=”audioPlayback” controls=”controls”> Your browser does not support the audio element. </audio>
<h3 class=”audioServiceTitle”>&nbsp;</h3>
</div>[/code]
[code]$(“document”).ready(
function LoadAllAudioScripts() {
getAudioIds();
wantTrack();
populateAudio();
});

//////////////////////////////
// Load Audio Finder Script //
//////////////////////////////

function getAudioIds() {

document.getElementById(“selectYear”).selectedIndex = 0;
document.getElementById(“selectMonth”).selectedIndex = 0;
document.getElementById(“selectDay”).selectedIndex = 0;
document.getElementById(“selectService”).selectedIndex = 0;

}

function wantTrack() {

// —COPIED—

var gtYear = document.getElementById(“selectYear”);
gtYear.onchange = function selYear() {
var wantedYear = document.getElementById(“yearVal”);
wantedYear.innerHTML = this.options[this.selectedIndex].value;
}

var gtMonth = document.getElementById(“selectMonth”);
gtMonth.onchange = function selMonth() {
var wantedMonth = document.getElementById(“monthVal”);
wantedMonth.innerHTML = this.options[this.selectedIndex].value;
}

var gtDay = document.getElementById(“selectDay”);
gtDay.onchange = function selDay() {
var wantedDay = document.getElementById(“dayVal”);
wantedDay.innerHTML = this.options[this.selectedIndex].value;
}

var gtService = document.getElementById(“selectService”);
gtService.onchange = function selService() {
var wantedService = document.getElementById(“serviceVal”);
wantedService.innerHTML = this.options[this.selectedIndex].value;
}
}

function populateAudio() {

var wantedYear = document.getElementById(“yearVal”).innerHTML;

var wantedMonth = document.getElementById(“monthVal”).innerHTML;

var wantedDay = document.getElementById(“dayVal”).innerHTML;

var wantedService = document.getElementById(“serviceVal”).innerHTML;

var audioElement = document.getElementById(“audioPlayback”);

audioElement.setAttribute(“src”, “_media/_audio/” + wantedYear + “/” + wantedMonth + “-” + wantedDay + “-” + wantedYear + “_” + wantedService + “.ogg”);
audioElement.load()
audioElement.addEventListener(“load”, function() {
audioElement.play();
audioElement.duration;
}, true);

return false;
}[/code]

Thank you for any support!

Also in #HTML _↴