CustomTooltips Audio Element

[Brigid Donaghy]

Hello, I want to add audio describing a block when it is hovered over, but I'm having trouble understanding how Custom Tooltips works.

I saw this demo that uses an image instead of audio - https://google.github.io/blockly-samples/examples/custom-tooltips-demo/index.html

And here's the code for the demo - https://github.com/google/blockly-samples/tree/master/examples/custom-tooltips-demo

I'm super new to Blockly and am having trouble understanding how to rework stuff from the demo to be the customization I want.

[Mark Friedman]

The key part of that sample's code is the definition and use of the customTooltip function.

A simple variation of that code which would add audio, rather than adding an image, would look something like the following:

const hoverSound = new Audio('../media/click.mp3');
const customTooltip = function (div, element) {
  // Set the text of the tooltip div to its default
  div.textContent = Blockly.Tooltip.getTooltipOfObject(element);
  // Play the sound
  hoverSound.play();
}
Blockly.Tooltip.setCustomTooltip(audioToolTip);

Obviously, your code to obtain the audio would be more complicated than the constant sound that I used above.

Hope this helps.

-Mark

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/38fa27ee-82cb-4e4c-86b1-113deb82c571n%40googlegroups.com.