JS和JQuery音频音量未初始化

Question

The Audio player loads and initializes, but the controls disappear once I pass the third song (see >= 3 test). I'm not certain if that's an incredible coincidence but it seems likely I have broken something. Why do the audio controls vanish?

Also, the volume controls do not initialize. Does anyone know why?

<script>
window.onload = function() {
    var number = Math.floor((Math.random() * 10) + 1);
    if(number >= 3) {
        document.getElementById("audio").innerHTML = "<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
    } else {
        document.getElementById("audio").innerHTML = "<audio id='vid' src='lose.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
    }
};
(function(){
    var vid = document.getElementById("vid");
    vid.volume = 0.2;
    });
</script>
<script>
jQuery(function($) {
    $("#vid").prop('volume', 0.2);
    window.setVolume = function(bgAudio,vol) {
        sounds[bgAudio].volume = 0.33;
    }
});
</script>
<div id="audio">

</div>

Answer 1

There is no need to replace the whole audio tag. Just change the src attribute:

<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>

...

$('#vid').attr('src', 'remix.mp3');

EDIT

Your code is a mess, I've tried to refactor it a bit:

 (function() { var number = Math.floor((Math.random() * 10) + 1); var player = $('#vid'); player.attr('src', number >= 3 ? 'remix.mp3' : 'lose.mp3'); player.prop('volume', '0.2'); player[0].play(); //run the audio track //not sure about this function window.setVolume = function(bgAudio, vol) { sounds[bgAudio].volume = vol; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <audio id='vid' src='' type='audio/mpeg' loop='true'></audio> 

And check mp3 file names and location.