基于音频播放进行可视更改的JavaScript代码段

我正在尝试编写一些JS，如果音频播放一秒钟或更长时间，它会将一个正方形从蓝色变为黄色。目前，似乎根本没有发生任何变化。这是我自己尝试编写的JS的第一部分，所以如果有人有建议，那就太棒了

//从https://www.w3schools.com/tags/horse.ogg
//播放一秒钟或更多音频时，将方块从蓝色更改为黄色
window.onload=函数（）{
函数changeColor（）{
var timedChange=document.getElementById（“audioPlayer”）.currentTime；
如果（时间更改>=1）{
document.getElementById（“黄色”）.style.display=“块”；
}否则{
document.getElementById（“黄色”）.style.display=“无”；
}
};
}

#蓝色{
宽度：200px；
高度：200px；
背景颜色：蓝色；
}
#黄色的{
宽度：200px；
高度：200px；
背景颜色：黄色；
位置：绝对位置；
顶部：8px；
显示：无；
}
#音频播放器{
位置：绝对位置；
右：500px；
顶部：10px；
}

三个问题：

这不是在顶级声明函数的正确语法。不要执行

timedChange:function（）

，而是执行

timedChange=function（）

或

function timedChange（）

您没有在任何地方调用该函数，因此它永远不会运行

不要对变量使用与函数相同的名称。在JavaScript中，它们位于同一名称空间中

const audio=document.getElementById（“audioPlayer”）；
//音频播放1秒（1000毫秒）后显示黄色方块
audio.onplay=（）=>{
设置超时（（）=>{
document.getElementById（“黄色”）.style.display=“块”；
}, 1000);
};
//当音频停止时，立即隐藏黄色方块
audio.onpause=（）=>{
document.getElementById（“黄色”）.style.display=“无”；
};
#蓝色{
宽度：200px；
高度：200px；
背景颜色：蓝色；
}
#黄色的{
宽度：200px；
高度：200px；
背景颜色：黄色；
位置：绝对位置；
顶部：8px；
显示：无；
}
#音频播放器{
位置：绝对位置；
右：500px；
顶部：10px；
}

1和2对我来说很有意义。如果我将函数包装在
window.onload=function（）
中，那么当页面加载时它是否应该调用它？在播放音频时，我还尝试使用onclick属性，但这两种属性都不起作用。@gunderodd您能将您的准确尝试编辑到您的问题中吗？我重新阅读了您的回答，并意识到我实际上没有编辑我的原始问题。我的想法是使用window.onload将调用该函数，正如您在更新的JS中看到的那样。想法？太酷了！如果你不理解
（）=>{/*some code*/}
，这就是所谓的箭头函数，相当于编写
function（）{/*some code*/}