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

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

Это ясно из обоих вопросов OP и ответа, что они относятся к аудио файлу. Однако, поскольку 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>

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

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

wav_phone - это папка, в которой хранится звук.

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