首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Responsivevoice jQuery在火狐中不起作用

Responsivevoice jQuery在火狐中不起作用
EN

Stack Overflow用户
提问于 2017-09-28 09:41:49
回答 1查看 525关注 0票数 2

我正在尝试测试/制作自定义按钮以响应(播放、暂停、恢复、停止)。大部分都能用,但我的测试不会在Firefox上播放。另外,我现在使用的是一个旧的jQuery版本(1.4)。我可能会使用一个新的jQuery版本,如果这将修复它。如果用户离开页面或关闭窗口/选项卡,我也希望音频停止。到目前为止,这是我的测试:

代码语言:javascript
复制
//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");
});
代码语言:javascript
复制
.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; }
}
代码语言:javascript
复制
<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无法使用后盾:

代码语言:javascript
复制
  "message": "ReferenceError: event is not defined",
  "lineno": 92,
  "colno": 3
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-28 09:49:01

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

代码语言:javascript
复制
$("#step1Stop").click(function() {

这样做:

代码语言:javascript
复制
$("#step1Stop").click(function(event) {

即使这不能解决您的问题,这是一个良好的可读性实践。这将是我第一次尝试修复“事件没有定义”!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46465910

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档