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
JoseTansengco's avatar
JoseTansengco
Staff
1 year ago

Hi DanAdams-9ad8e6,

Happy to help!

You can try modifying your iframe to add the allow tags and specify the exact permissions you need. Example:

<iframe src="..." allow=”autoplay; microphone”></iframe>

Hope this helps!

DannyMcGee-3972's avatar
DannyMcGee-3972
Community Member
10 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. 

 

  • LucianaPiazza's avatar
    LucianaPiazza
    Staff
    10 months ago

    Hello DannyMcGee-3972, 

    Thanks for reaching out regarding the Audio settings message you are receiving when trying to access the microphone. This may be related to the security settings of the hosting website or the browser rather than Storyline itself. I have a few clarifying questions to better understand your setup!

    • What web app are you currently using? Can you natively access the microphone for this site when viewing it in a browser window? 

     

    • From your screenshot, I understand you are using Edge. Do you experience this behavior in another browser? I'm curious if it is browser-specific.  


    As a first step, here are a few things you can check: 

    • Secure Hosting: Ensure your web app is hosted on a secure website using `https://`. Modern browsers block mixed content, so if your web app uses `http://`, it might be causing the issue.
    • Browser Permissions: Check the browser settings to ensure that microphone access is allowed for the site where your web app is hosted.
    • iFrame Restrictions: If your web app is embedded in an iframe, ensure the hosting website allows it. Some sites have `X-Frame-Options` set to `SAMEORIGIN` or `DENY`, which can prevent the web object from functioning properly.
       

    If you're still having trouble, we'd be happy to examine your file more closely. You can upload your .story file to this thread or privately in a support case. 

    Looking forward to hearing from you! 

  • MichaelZ's avatar
    MichaelZ
    Community Member
    12 days 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)