Javascript 如何在鼠标上方播放音频？

我设计了一个点云。当鼠标移到某一点上时，它将打印日志信息

但是，当鼠标悬停在音频上时播放该音频似乎更有趣

我在谷歌上搜索，什么也没找到。我想代码可能很简单，比如

.on("click",function(d){
            play(d+".wav");});

---

我引用了他的答案。谢谢丹尼尔的评论 首先：我讨厌播放任何声音的网站，这很烦人。我写这个答案只是出于好奇，也是为了补充

OP的问题和答案都清楚，他们指的是一个音频文件。然而，由于D3意味着数据驱动的文档，我们可以使用数据以其他创造性的方式播放声音

在这个答案中，我将使用接口。可以在此处找到一个好的教程：

在本演示中，我正在为圆圈创建数据数组，设置一个名为

frequency

的属性，该属性的频率（以赫兹为单位）介于500和2500赫兹之间：

const data = d3.range(30).map(d => ({
  frequency: 500 + Math.random() * 2000,
  //etc...
}));

然后，当您将鼠标悬停在圆圈上时，将播放该频率的简短声音：

const audioCtx = new(window.AudioContext || window.webkitAudioContext);

circles.on("mouseover", (d, i, n) => {
    const osc = audioCtx.createOscillator();
    osc.frequency.value = d.frequency; 

以下是（恼人的！）演示：

const data=d3.range（30.map）（d=>({
频率：500+数学随机（）*2000，
半径：~~（Math.random（）*20），
x:Math.random（）*300，
y:Math.random（）*150
}));
const svg=d3.选择（“svg”）；
常量color=d3.scaleOrdinal（d3.schemeCategory 10）；
const audioCtx=new（window.AudioContext | | window.webkitadiocontext）；
const circles=svg.selectAll（空）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，d=>d.x）
.attr（“cy”，d=>d.y）
.attr（“r”，d=>d.radius）
.style（“fill”，（u，i）=>颜色（i））；
圆圈。在（“鼠标悬停”，（d，i，n）=>{
d3.选择（n[i]）.raise（）.attr（“r”，d=>d.radius+2）；
const osc=audioCtx.create振荡器（）；
常数增益=audioCtx.createGain（）；
osc.type=“正弦”；
osc.frequency.value=d.frequency；
osc.连接（增益）；
增益连接（audioCtx.目的地）
osc.start（0）；
d3.超时（（）=>{
osc.stop（）
}, 100)
}).on（“mouseout”，（d，i，n）=>{
d3.选择（n[i]）.attr（“r”，d=>d.radius）
})

查看问题@Daniel谢谢！！！听到这个消息我很高兴——请随意发布您的解决方案，作为对这个问题的回答，这样将来它可以帮助其他人：）@Daniel我发布它。再次感谢您提供有用的链接~

const audioCtx = new(window.AudioContext || window.webkitAudioContext);

circles.on("mouseover", (d, i, n) => {
    const osc = audioCtx.createOscillator();
    osc.frequency.value = d.frequency;