Browsers/JS don't like cross site scripting. There's ways to get around it, but I find them complicated and it's easily solved with a relay for testing purposes. You can get into all that other gubbins later if you want.
Take these two scripts and put them in some directory that is useful to you. The HTML/JS script calls the PHP. The PHP calls Mary. The PHP then sends what it got from Mary back to the client or browser. The client then plays it.
The main reason why you get the cross site problem is that Mary uses a different port compared to normal, ie port 80 in most cases.
Here's the HTML/JS :
<title>Demo Play TTS</title>
// It's a pain using JS for cross site so just use a simple PHP relay to start with.
var relay = "gettts.php";
// The words to render.
var tts = "Just a simple Demo. Refresh page if you change the words in the script.";
// The URL for the relay with the words added on.
var url = relay + "?words=" + tts;
// Set up an audio player and get the audio from the relay URL.
var audio = new Audio(url);
// Play the audio which would have been made by Mary.
Just a simple Demo. Refresh page if you change the words in the script.
And the PHP...
// Your server or host.
$host = "http://localhost";
// A voice you have installed with Mary.
$voice = "cmu-slt-hsmm";
// Get the words sent from the JS - best to do some sanitising here later.
$words = $_GET['words'];
// URL to the Mary port and various settings.
$url = $host . ":59125/process?INPUT_TEXT=" . $words . ".&INPUT_TYPE=TEXT&OUTPUT_TYPE=AUDIO&LOCALE=en_US&AUDIO=WAVE_FILE&VOICE=" . $voice;
// Mary doesn't like spaces.
$url = str_replace(" ", "+", $url);
// Get the WAV file from Mary.
$wav = file_get_contents($url);
// Set a header for the client.
// Echo the audio data.
Have a play with that. Save the PHP as 'gettts.php' and the HTML whatever you see fit. Change the JS variable 'tts' to whatever you like. Just hit the HTML page in your browser to see what it does.
Hopefully it will work, it did for me. You may have to change the voice setting if you don't have that one, but I think that is the default voice when installing.
Note that PHP is server side - so you need to browse to the HTML via your local host. Just double clicking on the HTML file will not work.