Звуковой том JS и JQuery не инициализируется

Question

Аудиоплеер загружается и инициализируется, но элементы управления исчезают после прохождения третьей песни (см. Тест >= 3). Я не уверен, что это невероятное совпадение, но, похоже, я что-то сломал. Почему управление аудио исчезнет?

Кроме того, регуляторы громкости не инициализируются. Кто-нибудь знает, почему?

<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

Нет необходимости заменять бирку audio. Просто измените src атрибут:

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

...

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

EDIT

Ваш код беспорядок, я пытался реорганизовать его немного:

(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>

И проверьте имена и местоположение файлов mp3.