鼠标悬停时如何播放音频？

Question

我设计了一个点云。当鼠标悬停在某个点上时，将打印日志信息。

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        return xScale(d3.values(d)[0].pos[0]);
    })
    .attr("cy", function(d) {
        return yScale(d3.values(d)[0].pos[1]);
    })
    .attr("r", 2)
    .attr("fill", function(d) {
        return color(d3.values(d)[0].lab);
    })
    .on("click",function(d){
        console.log(d);});

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

我搜索Google，却一无所获。我猜代码可能很简单，例如

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

Answer 1

首先，我讨厌播放任何声音的网站，这很烦人。出于好奇和对OP's answer的补充，我正在写此答案。

根据OP的问答，很明显他们都在指音频文件。但是，由于D3表示数据驱动文档，因此我们可以使用数据以其他创造性方式播放声音。

在此答案中，我将使用AudioContext界面。一个很好的教程可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

在此演示中，我将为圆创建数据数组，设置一个名为frequency的属性，该属性的频率为500到2500 Hz之间（以赫兹为单位）：

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 => ({
  frequency: 500 + Math.random() * 2000,
  radius: ~~(Math.random() * 20),
  x: Math.random() * 300,
  y: Math.random() * 150
}));

const svg = d3.select("svg");

const color = d3.scaleOrdinal(d3.schemeCategory10);

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

const circles = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .attr("r", d => d.radius)
  .style("fill", (_, i) => color(i));

circles.on("mouseover", (d, i, n) => {
  d3.select(n[i]).raise().attr("r", d => d.radius + 2);
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type = "sine";
  osc.frequency.value = d.frequency;
  osc.connect(gain);
  gain.connect(audioCtx.destination)
  osc.start(0);
  d3.timeout(() => {
    osc.stop()
  }, 100)
}).on("mouseout", (d, i, n) => {
  d3.select(n[i]).attr("r", d => d.radius)
})

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

Answer 2

我引用了here的答案。感谢Daniel的评论。

因此，当鼠标悬停在音频上时，我会使用try代码来播放音频

wav_phone是音频存储的文件夹。

.on("mouseover",function(d){
    new Audio('wav_phone/'+d3.values(d)[0].name+'.wav').play(); 
})