Responsivevoice jQuery does not work in Firefox

Question

I am trying to test/make custom buttons for responsivevoice (Play, Pause, Resume, Stop). Most of it works, but my test won't play in Firefox. Also I am using an old jQuery version (1.4) for now. I might be able to use a new jQuery version if that will fix it. I also want the audio to stop if users leave the page or close the Window/tab. This is my test so far:

//window.onload=function(){
$("#step1Play").click(function() {
  $(".start").hide();
  $(".stop").show();
  $(".fa-volume-up.disabled").addClass("blink_me");
  event.stopPropagation(); //old jQuery version??
  responsiveVoice.speak($("#step1").text(), "Norwegian Female", {
    pitch: 1,
    rate: 1,
    onend: function() {
      $("#step1Play").show();
      $(".stop").hide();
      $(".fa-volume-up.disabled").removeClass("blink_me");
    }
  });
});
$("#step1Stop").click(function() {
  $("#step1Play").show();
  $(".stop").hide();
  $(".fa-volume-up.disabled").removeClass("blink_me");
  event.stopPropagation(); //old jQuery version??
  responsiveVoice.cancel($("#step1").text(), "Norwegian Female", {
    pitch: 1,
    rate: 0.9
  });
});
$("#step1Pause").click(function() {
  $(".stop").hide();
  $(".start").show();
  $(".fa-volume-up.disabled").removeClass("blink_me");
  event.stopPropagation(); //old jQuery version??
  responsiveVoice.pause($("#step1").text(), "Norwegian Female", {
    pitch: 1,
    rate: 0.9
  });
});
$("#step1Resume").click(function() {
  $(".start").hide();
  $(".stop").show();
  $(".fa-volume-up.disabled").addClass("blink_me");
  event.stopPropagation(); //old jQuery version??
  responsiveVoice.resume($("#step1").text(), "Norwegian Female", {
    pitch: 1,
    rate: 0.9,
    onend: function() {
      $("#step1Play").show();
      $(".stop").hide();
      $(".fa-volume-up.disabled").removeClass("blink_me");
    }
  });
});
//}
//$(window).on('beforeunload', function() { //newer jQuery version
$(window).unload(function() { //old jQuery version
  responsiveVoice.cancel();
  $("#step1Play").show();
  $(".stop").hide();
  $(".fa-volume-up.disabled").removeClass("blink_me");
});

.btn-group button {
    background-color: #333; /* dark grey background */
    border: 1px solid #FFF; /* white border */
    color: white; /* White text */
    padding: 7px 8px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
    margin: 0;
}
.btn-group button.disabled {
    background-color: #FFF; /* White background */
    border: 1px solid #FFF; /* White border */
    color: #888;
    cursor: default;
    font-size: 140%;
    padding: 2px 5px 5px 0;
}
.btn-group button.disabled:hover {
    background-color: #FFF; /* Green background */
}
.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}
.btn-group button.green{
  background-color: green;
}
/* .btn-group > button:last-child {
      border-radius: 0px 5px 5px 0px;
}
.btn-group > button:first-child {
      border-radius: 5px 0px 0px 5px; 
}*/

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #0071b3;
}
.btn-group button.stop, .btn-group #step1Resume, .stop {
  display:none;
  }

button.disabled.blink_me {
 animation: blinker 1s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="step1">
  <p x-webkit-speech>Dette er en test. Dett var Dett. Kjallabais!</p>
  <div class="btn-group">
    <button class="fa fa-low-vision btn-item button disabled" type="button"> </button>
    <button class="fa fa-volume-up btn-item button disabled" type="button"> </button>
    <button class="stepButton fa fa-play start" id="step1Play" type="button" value="🔊 Play Step 1" title="Tekst til lyd (fra start)" />
    <button class="stepButton fa fa-stop stop" id="step1Stop" type="button" value="🔊 Stop" title="Stop" />
    <button class="stepButton fa fa-pause stop" id="step1Pause" type="button" value="🔊 Pause Step 1" title="Pause" />
    <button class="stepButton fa fa-play-circle start" id="step1Resume" type="button" value="🔊 Play step 1" title="Fortsett" />
  </div>
 </div>
 (Does not work in Firefox)
<div id="step2">
  <p x-webkit-speech>Jo, jeg snakker jo Norsk. Yippi!</p>
  <input class="stepButton" id="step2Button" onclick="responsiveVoice.speak($('#step2').text(), 'Norwegian Female', {pitch: .7, rate: 0.7});" type="button" value="🔊 Play Step 2" />
  <input class="stepButton" id="step2ButtonStop" onclick="responsiveVoice.cancel($('#step2').text(), 'Norwegian Female', {pitch: .7}, {rate: 0.5});" type="button" value="🔊 Stop" />
</div>
  (Work in firefox)

It looks like Firefox is not able to use the fallback:

  "message": "ReferenceError: event is not defined",
  "lineno": 92,
  "colno": 3

Answer 1

It may solve your problem to explicitly name your event parameters in your callbacks. Like, instead of this:

$("#step1Stop").click(function() {

do this:

$("#step1Stop").click(function(event) {

Even if this doesn't solve your problem, it's good practice for readability. And it would be my first try to fix "event is not defined"!