Can't access audio resources from innerHTML

Elements Audio & Video
,
1

Hi,
I have a few audio files in my Hype app. I can play these using the Hype actions (on mouse click > play sound . . .).

I wanted to play some of these sounds on keyboard events, too, so I’ve been trying to include the audio files in the HTML so I can access them with javascript. I just can’t seem to include the files in the resources folder using this HTML:

<audio id="chartAudio" controls="" preload="auto">
  <source src="${resourcesFolderName}/chart.ogg" type="audio/ogg"> 
  <source src="${resourcesFolderName}/chart.mp3" type="audio/mpeg">
</audio>

The audio doesn’t show up in the Hype preview, and they are not found when running the preview or the exported product in Chrome.

Monosnap%202019-11-26%20
Monosnap 2019-11-26 .png2124×778 299 KB

Refraction%20Simulator%202019-11-26%20
Refraction Simulator 2019-11-26 .png1448×80 23.3 KB

I thought I must be doing something wrong with the file path, but if I do the same thing with an image in the resource folder:

<img src="${resourcesFolderName}/myImage.png">

That works fine, so it doesn’t seem to be an issue with the path.

2

Have you added it to the innerHTML of a regular square or are you using the HTML widget? The later creates an iFrame (with its own page)… avoid that.

3

Thanks for the comment, but it is in a rectangle.

4

Look at your file… it is called sound - chart… rename it to chart Or vice versa the URL to match the name. Although I’d avoid white space in names as they make live complicated (getting escaped and all).

2 Likes
5

OMG, I am such an idiot! How did I miss that!?
I’m embarrassed for posting this but I’m happy to be done banging my head against the wall. Thank you!