Javascript 如何使用声音获取警报框？

当球碰撞时，我试图像弹出的声音一样保持警觉。当我使用警报功能时，它会冻结，并会继续显示警报。到目前为止，我试着像在文本中一样保持警惕。但是如何通过声音（如嘟嘟声）来提高警惕呢？ 我已经附上了代码片段。谁能帮我弄到这个。 提前谢谢

const ctx=document.getElementById（“画布”）.getContext（“2d”）；
const containerR=150；
const size=containerR*2
ctx.canvas.width=ctx.canvas.height=size；
ctx.globalAlpha=0.8
常量getBall=（x，y，dx，dy，r，color）=>（{x，y，dx，dy，r，color}）；
常数球=[
getBall（2号，30号，1号，1号，8号，“绿色”），
getBall（3号，50号，1号，1号，8号，“绿色”），
getBall（4号，60号，1号，1号，8号，“绿色”），
getBall（2号、5号、1号、1号、8号，“绿色”），
];
常量牵引球=（球）=>{
ctx.beginPath（）；
弧（ball.x，ball.y，ball.r，0，Math.PI*2，false）；
ctx.fillStyle=ball.collider？“红色”：ball.color；
ctx.fill（）；
ctx.closePath（）；
}
常数更新点=（球）=>{
ball.x+=ball.dx；
ball.y+=ball.dy；
常数dx=ball.x-containerR；
const dy=ball.y-container；
if（Math.sqrt（dx*dx+dy*dy）>=containerR-ball.r）{
const v=Math.sqrt（ball.dx*ball.dx+ball.dy*ball.dy）；
const angleToCollisionPoint=Math.atan2（-dy，dx）；
constOldAngle=Math.atan2（-ball.dy，ball.dx）；
const newAngle=2*集合点的角度-旧角度；
ball.dx=-v*Math.cos（newAngle）；
ball.dy=v*Math.sin（newAngle）；
}
}
常量碰撞=（a，b）=>（Math.hypot（Math.abs（a.x-b.x），Math.abs（a.y-b.y））<（a.r+b.r））；
函数引擎（）{
//console.clear（）；//清除控制台测试消息
mydiv.textContent=“”；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
balls.forEach（（a，ai）=>{
a、 对撞机=未定义；
balls.forEach（（b，bi）=>{
if（bi==ai）return；//不要看self
如果（碰撞（a，b））a.collider=b；//存储碰撞的b球
});
如果（a.碰撞器）{//如果球有碰撞器：
mydiv.textContent=（“警报”）；
//console.log（`${a.color[0]}→ ← ${a.collider.color[0]}`）；
}
更新项目（a）；
第二部分（a）；
});
请求动画帧（引擎）；
}
引擎（）

帆布{
背景：#eee；
保证金：0自动；
边界半径：50%；
盒影：0 4px#000；
}

更新：用户交互

您可以添加一个音频标签，并播放它的声音

注意：在较新的浏览器chrome ^50中，您需要用户交互才能使音频标签正常工作


const startBtn=document.getElementById（“启动btn”）
const sound=document.getElementById（“beeb播放器”）
const ctx=document.getElementById（“画布”）.getContext（“2d”）；
const containerR=150；
const size=containerR*2
ctx.canvas.width=ctx.canvas.height=size；
ctx.globalAlpha=0.8
常量getBall=（x，y，dx，dy，r，color）=>（{x，y，dx，dy，r，color}）；
常数球=[
getBall（2号，30号，1号，1号，8号，“绿色”），
getBall（3号，50号，1号，1号，8号，“绿色”），
getBall（4号，60号，1号，1号，8号，“绿色”），
getBall（2号、5号、1号、1号、8号，“绿色”），
];
常量牵引球=（球）=>{
ctx.beginPath（）；
弧（ball.x，ball.y，ball.r，0，Math.PI*2，false）；
ctx.fillStyle=ball.collider？“红色”：ball.color；
ctx.fill（）；
ctx.closePath（）；
}
常数更新点=（球）=>{
ball.x+=ball.dx；
ball.y+=ball.dy；
常数dx=ball.x-containerR；
const dy=ball.y-container；
if（Math.sqrt（dx*dx+dy*dy）>=containerR-ball.r）{
const v=Math.sqrt（ball.dx*ball.dx+ball.dy*ball.dy）；
const angleToCollisionPoint=Math.atan2（-dy，dx）；
constOldAngle=Math.atan2（-ball.dy，ball.dx）；
const newAngle=2*集合点的角度-旧角度；
ball.dx=-v*Math.cos（newAngle）；
ball.dy=v*Math.sin（newAngle）；
}
}
常量碰撞=（a，b）=>（Math.hypot（Math.abs（a.x-b.x），Math.abs（a.y-b.y））<（a.r+b.r））；
函数引擎（）{
//console.clear（）；//清除控制台测试消息
mydiv.textContent=“”；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
balls.forEach（（a，ai）=>{
a、 对撞机=未定义；
balls.forEach（（b，bi）=>{
if（bi==ai）return；//不要看self
如果（碰撞（a，b））a.collider=b；//存储碰撞的b球
});
如果（a.碰撞器）{//如果球有碰撞器：
mydiv.textContent=（“警报”）；
播放
//console.log（`${a.color[0]}→ ← ${a.collider.color[0]}`）；
}
更新项目（a）；
第二部分（a）；
});
请求动画帧（引擎）；
}
startBtn.addEventListener（'click'，engine，{once:true}）

帆布{
背景：#eee；
保证金：0自动；
边界半径：50%；
盒影：0 4px#000；
}


开始
更新：用户交互

您可以添加一个音频标签，并播放它的声音

注意：在较新的浏览器chrome ^50中，您需要用户交互才能使音频标签正常工作


const startBtn=document.getElementById（“启动btn”）
const sound=document.getElementById（“beeb播放器”）
const ctx=document.getElementById（“画布”）.getContext（“2d”）；
const containerR=150；
const size=containerR*2
ctx.canvas.width=ctx.canvas.height=size；
ctx.globalAlpha=0.8
常量getBall=（x，y，dx，dy，r，color）=>（{x，y，dx，dy，r，color}）；
常数球=[
getBall（2号，30号，1号，1号，8号，“绿色”），
getBall（3号，50号，1号，1号，8号，“绿色”），
getBall（4号，60号，1号，1号，8号，“绿色”），
getBall（2号、5号、1号、1号、8号，“绿色”），
];
常量牵引球=（球）=>{
ctx.beginPath（）；
弧（ball.x，ball.y，ball.r，0，Math.PI*2，false）；
ctx.fillStyle=ball.collider？“红色”：ball.color；
ctx.fill（）；
ctx.closePath（）；
}
常数更新点=（球）=>{
ball.x+=ball.dx；
ball.y+=ball.dy；
常数dx=ball.x-containerR；
const dy=ball.y-container；
如果（数学）sqrt（dx*