How to play audio on mouseover?

Question

I designed a point cloud. when mouse over certain point, it will print the log information.

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

However, play the audio when mouse over it seems more funny.

I search the Google, find nothing about it. I guess the code maybe simple,such as

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

Check out the question https://stackoverflow.com/questions/9419263/playing-audio-with-javascript — Daniel, Jul 31 '18 at 07:15
Good to hear - feel free to post your solution as an answer to the question so it can help others in the future :) — Daniel, Jul 31 '18 at 08:03

score 3 · Answer 1 · answered Jul 31 '18 at 09:42

Before anything else: I hate websites that play any kind of sound, it's very annoying. I'm writing this answer just as as a curiosity, and as a complement to OP's answer.

It's clear by both OP's question and answer that they are referring to a audio file. However, since D3 means data driven documents, we can use data to play sound in other, creative ways.

In this answer I'll use the AudioContext interface. A good tutorial can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API

In this demo I'm creating the data array for the circles, setting a property called frequency, which is a frequency (in Hertz) between 500 and 2500 Hz:

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

Then, when you hover over the circles, a brief sound with that frequency is played:

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

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

Here is the (annoying!) demo:

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>

partida · Answer 2 · 2018-07-31T08:18:03.483

0

I reference the answer from here. Thanks the comment from Daniel.

So I use try code to play the audio when mouse over it, and it success

wav_phone is the folder that audio stored.

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

edited Jul 31 '18 at 08:18

answered Jul 31 '18 at 08:05

partida

501
4
20

How to play audio on mouseover?

2 Answers2