Improved Javascript Injection


#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.

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?

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

closed #28