Как проигрывать аудио при наведении курсора?

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

Прежде всего: я ненавижу сайты, которые воспроизводят любой звук, это очень раздражает. Я пишу этот ответ просто как любопытство и как дополнение к ответу ОП.

Из вопросов и ответов ОП ясно, что они имеют в виду аудиофайл. Однако, поскольку D3 означает документы, управляемые данными, мы можем использовать данные для воспроизведения звука другими, творческими способами.

В этом ответе я буду использовать интерфейс AudioContext. Хороший учебник можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

В этой демонстрации я создаю массив данных для кругов, устанавливая свойство с именем 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 => ({
  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

Я ссылаюсь на ответ отсюда. Спасибо за комментарий от Даниила.

Поэтому я использую код попытки воспроизведения звука, когда на него наведен указатель мыши.

wav_phone папка, в которой хранится аудио

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