2

我正在尝试为响应式语音测试/制作自定义按钮（播放、暂停、恢复、停止）。大部分都有效，但我的测试无法在 Firefox 中播放。我现在也使用旧的 jQuery 版本（1.4）。如果可以修复它，我也许可以使用新的 jQuery 版本。如果用户离开页面或关闭窗口/选项卡，我还希望音频停止。这是我到目前为止的测试：

//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)
看起来 Firefox 无法使用回退：

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

1 回答 1

1

event在回调中显式命名参数可能会解决您的问题。就像，而不是这样：

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

做这个：

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

即使这不能解决您的问题，这也是提高可读性的好习惯。这将是我第一次尝试修复“未定义事件”！

于 2017-09-28T09:49:01.463 回答