Can I make a symbol an audio element?


I have a bunch of symbols that I’d like to use to trigger separate audio clips using javascript.
I’d like each instance of the same symbol to play a different audio file.

On a regular element (a square for instance), am able to define an audio element by editing the element’s innerHTML.

From what I understand, symbols are treated as elements.

If this is the case, how can I define a symbol as an audio element if I’m not able to edit the symbol’s innerHTML?

Is there a way to make a symbol(s) an audio element that can trigger audio via javascript?

Hi @Raleigh

Symbols can indeed be treated as elements in so far as being moved, changing the visibility, etc but it is a special kind of element (it’s like having another Hype document / scene) it also lives outside of the Hype element flow so it can be useful for other situations. (like staying on screen when scenes are transitioning)

May I ask why you want to use symbols as an audio element? You could theoretically use many instances of a symbol to load an audio src and then play them.

Here is an example. (469.4 KB)

Hi @DBear,

Many thanks for your response and for your helpful example!
Thanks for the clarification regarding the symbols being a special kind of element. That makes more sense now (also very cool to know that symbols can stay on screen as scenes transition - did not know that!).

To answer your question, I am creating a web app that visualizes guitar scales as artwork. In my prototype, I’ve made small svg buttons that are mapped to the fretboard so that as the user mouses over the neck, the notes play and light up.

I have two different button shapes that trigger audio - oval and circular.

First, I made the oval buttons and added an opacity transition to make them start out transparent, fade into view, and then fade back to transparent after a short time (the duration of a plucked note).

I then made this animated button into a symbol, and added to the symbol an On Mouse Over action to trigger different sound files for different instances of the symbol.

This worked great (for the oval buttons) and produced exactly the result I was looking for.

Unfortunately, when I tried to follow the same procedure when putting together the circular buttons, I got some very glitchy results. Even though I set the new circular symbol buttons up to trigger the audio files On Mouse Over, the audio file seemed to trigger twice for each symbol rather than once. The audio file seemed to trigger upon mouse entering the edge of the svg, and another when exiting the edge of the svg. It was as if I had attached both a Mouse Over action as well as a Mouse Out action to the symbol even though I had only set it up to trigger On Mouse In. It was pretty frustrating because there was no explanation that I could find for why it would be happening (other than a bug in the software).

So, in an effort to avoid having to start from scratch with the problematic circular buttons, I made a post on the Hype forums in an effort to investigate different ways that I might trigger the audio - with javascript for instance.

Well, I ultimately did end up rebuilding the circular buttons and things seem to be working fine so far and the audio files are triggering as expected (one note per button rather than two on enter and exit).

Here is a link to my prototype version with the glitch in case you’d like to take a look. Or, perhaps the Hype team might like to take a look at it as well in case it is indeed a bug (which I suspect it is).

When the scene first loads, the middle neck pops out at the same time as the controls at the bottom of the screen. At this point, if you mouse over the middle neck, the transparent oval button symbols will play fine. Then, on the control bar at the bottom, if you click the ‘dots’ button, the buttons on the fretboard will change to dots and the circular svg button will replace the oval buttons. Now, when you mouse over the neck, you will hear all of the glitchy double-note triggers in their full (problematic) glory.

I would welcome any feedback or input, but I think since I’ve rebuilt the circular buttons, things seem to be glitch-free (knock on wood) on my most recent version. Again, thanks so much for your input!

Sincerely, rg

(I just requested access on the link)

Thanks for taking a look Jonathan!
Here is a fresh Google Drive link to the Hype file just in case.

Thanks very much for taking a look. I’m curious to see what might be causing the unexpected behavior.