Javascript 增大音量时播放声音

首先，我将卷设置为0。当我用音程增大音量时，如何使声音播放？ 当增大音量时，我会出现以下错误：

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

slider.oninput=（）=>{
log（“卷设置为”，~~（slider.value））
document.getElementById（“音频播放器”）.volume=~~（slider.value）*0.01
var context=新的AudioContext（）；
} 
var vid=document.getElementById（“音频播放器”）；
vid.volume=0；

能否显示滑块的定义位置？

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