Forum Discussion
Allowing microphone access to web objects
Hello Heroes,
I've been stuck at this for quite some time now. I have a slide which has a webpage embedded as a web object and it is meant to open on the same slide rather than on a new window. This webpage requires microphone access, however Review 360 blocks access to microphone and camera (have tried javascript to allow but in vain)
I've attached a sample of story file which has a web page embedded and it requires microphone access. Any help would be highly appreciated.
Thank you
Have you tried outside review, I have always struggled to do this because of cross domain scripting
Hey Phil,
Thanks for your suggestion. Yes I have tried publishing it in a SCROM and uploading it on our LMS. Still the results were same.
There are videos of Heroes on Youtube where they have achieved the desired outcome, however I wasn't able to find any tutorial videos of the same.
Storyline embeds WebObjects in an iframe, but many browsers block microphone access inside iframes unless specific permissions are granted. It seems you are looking for something like this, with the following HTML being imported as index.html into Storyline.
<iframe src="https://speechnotes.co/dictate/" allow="microphone" ></iframe>Now, this may or may not cause you a lot of headaches, as it likely won't work as intended when switching the microphone on and off. Personally, I would avoid it, given that it could behave differently across browsers. With Review 360, I don't think it would work at all.
My solution would be to open this website in a new window using JavaScript, allowing you to precisely define its dimensions and position so that it appears as if it opens within the slide rather than in an external tab or window. This approach helps you avoid using an iframe and prevents the potential issues you have already encountered.Here is an index.html file that you can import as a Web Object in Storyline:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SpeechNotes Embed</title> <style> body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } iframe { width: 100%; height: 100vh; border: none; } </style> </head> <body> <iframe src="https://speechnotes.co/dictate/" allow="microphone" ></iframe> </body> </html>This works in Web and SCORM (tested in SCORM Cloud). However, it doesn't work in Review 360. It functions well in Chrome and Edge, but Firefox adds visibility: hidden to the microphone button for no apparent reason, making it essentially unusable.
Thank you for sharing this Nedim. Let me try this and get back with my insights.
