增大音量时声音播放

Question

首先，将音量设置为0。随着范围的增大，如何播放声音？ 增大音量时出现此错误：

AudioContext不允许启动。必须将其恢复（或 在页面上用户手势之后创建

<input type= "range" class = "slider" id = "slider" value = "0" maxlength ="100">
<audio controls id ="audio-player" src = "circir-bocek.wav"></audio>

<script type="text/javascript">
    slider.oninput = () => {
        console.log("Volume set to", ~~(slider.value))
        document.getElementById("audio-player").volume = ~~(slider.value) * 0.01
        var context = new AudioContext();
    } 

    var vid = document.getElementById("audio-player");
    vid.volume = 0;
</script>