Javascript works in preview mode, but not in the published survey

Hello,
we are currently doing a study that includes audio clips. We want participants to be able to play the audio after pressing 'enter' and to only be able to see the 'next' button once the audio has finished playing, using the javascript below. The code works fine in the preview mode (it plays the audio after pressing enter on the keyboard), but in the published survey, the audio only plays after clicking somewhere on the screen and then pressing enter. We are not sure why this happens and would be very grateful if someone had a suggestion on how to fix it!
Qualtrics.SurveyEngine.addOnload(function()
{
        Qualtrics.SurveyEngine.Page.pageButtons.hideNextButton();
        var that = this;
        audio.load();
        audio.addEventListener("ended", function()
        {
                EndedSound(that);
        });
        document.onkeypress = keypressed;
});

function EndedSound(input) {
        Qualtrics.SurveyEngine.Page.pageButtons.showNextButton();
}

var i = 0;
var audio = new Audio(GetAudioFileName());
var StartTimer
var TapTimer
var TimeString

function GetAudioFileName(){
                return "link to audio file"
}

function keypressed(e) {
   if (e.keyCode == 13 || e.which == 13){
    audio.play();
    StartTimer = Number(new Date());
    TimeString = "0";
    document.onclick = RadioPress;
  }
}

function RadioPress(e) {
        TapTimer = Number(new Date());
        document.onclick = null;
        audio.pause();
}
note: the actual javascript used in the survey contains a real link to an existing audio file in the 'getAudioFileName' function.