Forum Discussion

DanAdams-9ad8e6's avatar
DanAdams-9ad8e6
Community Member
1 year ago

Allowing microphone access on embedded web app

I have embedded a web app into my Storyline via a web object, and do not seem to be able to find any way to allow the Storyline to access the user's microphone.   How do I go about allowing the e...
advice
Articulate 360
storyline 360
DannyMcGee-3972's avatar
DannyMcGee-3972
Community Member
11 months ago

Hi, I am experiencing a similar issue. I have a web app that I am running through the web object option in Storyline. When I publish and run in preview I'm getting this message. 

"The security policies of this page don't allow using the microphone." I'm unsure if this is related to the page or to Storyline and would appreciate some advice. 

 

MichaelZ's avatar
MichaelZ
Community Member
1 month ago

I've been working on exactly this problem - enabling microphone access for embedded web apps in Storyline 360.

The core issue is that Storyline's Web Object creates an iframe without the allow attribute, so the browser blocks microphone access. The fix is a JavaScript trigger that finds the iframe after it loads and adds the permissions:

setTimeout(function() {
  var iframe = document.querySelector('iframe[src*="YOUR_DOMAIN"]');
  if (iframe) {
    iframe.setAttribute('allow', 'microphone; camera; autoplay');
    console.log('Permissions enabled');
  }
}, 500);

Set this as an Execute JavaScript trigger on Timeline Starts for the slide containing the Web Object. Replace YOUR_DOMAIN with whatever domain your embedded app is on.

A few things to be aware of:

  • This works in published output and Storyline preview, but not in Review 360 (Review 360 has its own iframe restrictions)
  • The host page must be served over HTTPS for the browser to allow microphone access
  • If the iframe takes longer to load, increase the timeout from 500 to 1000 or 2000
  • Test in Chrome, Firefox, Edge — they all handle this slightly differently

I wrote up the full implementation including troubleshooting common issues here: https://www.zenobits.co.uk/docs/zenobits-storyline-integration-guide (see the microphone permissions section specifically)