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

问题描述

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

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);});

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

我搜索了谷歌，没有找到任何关于它的信息。我猜代码可能很简单，例如

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

标签： javascriptd3.jsaudioaudiocontext

首先：我讨厌播放任何声音的网站，这很烦人。我写这个答案只是出于好奇，也是对OP 答案的补充。

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>

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

问题描述

解决方案

推荐阅读