Improved Javascript Injection

#8

I understand—this is some tricky stuff to get around some of Axure’s shortcomings. I’ve had to play around with it quite a bit to get stuff to work.

If you have an .rp file you could attach here or send me, and your real javascript references, I could try to get it to work for you.

The <meta name= " is in the block of code to be inserted… Look in my long code examples above, it is right at the end… the last 10 characters. Do you see where I highlighted your javascript declarations in yellow? It comes right after that.

So, just highlight all of the text in the gray box (in my previous post starting with 1"/><script and ending with meta name=" --Then paste it into your favorite editor, paste your external javascript references just before meta name=" , copy it all and paste it into the “User Scalable” text field in the Axure generator, as shown above.

Here is an example .rp file which calls an external javascript file from https://responsivevoice.org/

It adds text-to-speech to your website/prototype. To enable it, just add this:
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>

To use it, open this hyperlink:
javascript:responsiveVoice.speak('Hello javascript!');

As in:

Responsive_Voice v3.rp (90.8 KB)

Look at the HTML generators in this file. There are “HTML 1”, “HTML JS (default)” and “HTML JS 2”. The “HTML” generator is the basic built-in one you get in every .rp file. “HTML JS” has code in the User Scalable field, which includes the reference to the responsivevoice.js script. If you preview or publish with this generator, and turn your speakers/headphones on, the prototype should work correctly and speak things out loud. If you publish with the plain “HTML” generator, the pages will load and work, but no voice will come out (unless the js is still cached in your browser.)

Now, the “HTML JS 2” generator has your dummy javascript references in it. Look at the end of the long line in the User Scalable field and you’ll find it.

Hope all this helps you out!

If you get this working, you could try declaring all your external js for all pages, then only making the calls you need for a specific page. Might have to rename some of your functions so they are all different, but seems doable.

#9

Hi mbc66 & dav123456,

Thank you for your shared interrest in extending Axure prototypes with custom javascript. As mbc66 describes the official method to do this is to use “AxShare” plug-ins. The limitation of this method is that it only works on prototypes hosted on AxShare. If the javascript must work when a prototype is previwed from Axure or hosted elsewhere then the “hack” is an option. Remeber that the hack is a hack, and may not work in new versions of Axure.

Thanks,
Sam

#10

Another method to add custom javascript and CSS to prototypes is to “misuse” webfonts.

image.png649×643 25 KB

To add javascript use:

}</style><script type="text/javascript">
/* Insert Javascript Here */
</script><style type="text/css">{

To add css use:

}
/* Insert CSS Here */
{

/sam

#11

Nice. Really wish plugins were a part of the file instead of the AxShare project, just like this method works.

#12

Yes. It would be nice to get custom javascript into the Axure IDE.

#13

A great example of Javascript injection is the awesome CSS animations library created by DeeKey.

#14

More information about custom Javascript and CSS available here:
https://b2grli.axshare.com/#g=0&p=javascript_improved

#15

Hi mbc66,
May I ask you if you could please post an option with a ‘male’ voice?
Also, is it possible to control the voice’s pitch, rate and volume, by using code from this page ResponsiveVoice.JS?

image.png770×291 26.4 KB

Thank you,
Natalie

#16

Thanks bermanatalie,

Say, do you know if it is possible to replace the “Hello world” part with a variable from Axure? For instance, how would I get this to read back anything I type in a text field in an Axure prototype?

Well I found the answer. Use the following line where LVAR1 equals the text in the text field using the fx button.
javascript:responsiveVoice.speak(’[[LVAR1]]’, “UK English Male”);

#17

Hi dav123456
It’s really work as a :dizzy:charm!:dizzy:

VOICE-SPEAKING.rp (609.0 KB)
This file include:

  • 2 Female voices
  • 3 Male voices

Thank you so much!
Natalie

#18

If the text field contains a ’ or \ or newline then there will be an error. If the text field contains the text:
iam’error

then the javascript becomes (after the text field value is inserted):
javascript:responsiveVoice.speak(‘iam’error’, “UK English Male”);

you can fix this by escaping some characters. Here is an updated version of the javascript:
javascript:responsiveVoice.speak(’[[LVAR1.replace("\\", “\\\\”).replace("’", “\\’”).replace("\n", “\\n”)]]’, “UK English Male”);

(note that i have updated the javascript. the forum display \\ as , so i had do add a lot of extra \ to get the javascript correct)

/sam

#19

Thanks Sam, but I can’t get this working.
My javascript that works is: javascript:responsiveVoice.speak(’[[LVAR1]]’, “UK English Male”);
but when I replace it with your line I get no sound at all. So I tested the original javascript and tried to get it to say “Don’t” and it failed to respond, then I change the javascript to yours which didn’t respond, and then I put in this one:
javascript:responsiveVoice.speak(’[[LVAR1.replace("’", “’”)]]’, “UK English Male”);
but that didn’t respond either.

Any suggestions as to what I am doing wrong?

#20

Oh. I can see that this forum is messing with \ in the text. I have updated my post so that it now display the correct javascript.

#21

Hey Sam, try wrapping your script examples in backticks to bypass the Markdown/HTML parser:

some code here with as many \ backslashes \ as you want

You can also access this formatting by highlighting your text and clicking the Preformatted text icon, </>, at the top of the message editor.

#22

Excellent. It works. Thanks!

#23

I implemented voice in my prototype: https://9vtssu.axshare.com/#g=1&p=chatbot
I discovered that changing the “I’m” to “I am” in the widget allows Watson to speak.

#24

Hi sam.hepworth,

May I ask you if you could please share your expertise on how to fix errors that show up in MSIE and Firefox when trying to run javascript calls. I have 2 events OnShow and OnLoad code.
Here link to page with error: [Error in Firefox and MS Edge]
(https://sjlif6.axshare.com/#g=1&p=ask_watson_chatbot&c=1)

I tried to resolve this but couldn’t figure out.

Voice-Js -browser error.rp (97.8 KB)

Preview for attached file.
Please click to
Here I use javascript code:

javascript:var jsurl_one = document.createElement('script');
jsurl_one.setAttribute("type", "text/javascript");
jsurl_one.setAttribute("src", "https://code.responsivevoice.org/responsivevoice.js");
var head = document.getElementsByTagName('head')[0];
head.appendChild(jsurl_one);


javascript:responsiveVoice.speak('[[LVAR1]]', "US English Male");

Would appreciate your any help and advice!
Natalie

#25

Hi Natalie,

You can try this version:
Voice-Js -browser error-Sam.rp (98.8 KB)

When you execute javascript in “open link in current window” the javascript should return void or valid html. I have wrapped your javascript like this:

javascript: (function (){
< Your javascript here >
})();

This way you are sure to return void and it also helps you to not create unintentional global variables.

/sam

Solved: Link not working in Firefox and MSIE 11
#26

Wow, with this small line of script you saved a prototype that I did during a month. I fixed all voice over parts for Artificial intelligence. No more error message.:tada:

Million of thanks,
Natalie

unlisted #27