Question

我已经将这个jquery代码和html用于英语培训网站。

$(document).ready(function() {
  $("p").hover(
    function() {
      $(this).css({"color": "purple", "font-weight" : "bolder"});
    },
    function() {
      $(this).css({"color": "black", "font-weight" : ""});
    }
  ); 
  $("p").click(function (event) {
    var element = $(this);
    var elementID = event.target.id;
    var oggVar = (elementID +".ogg");   
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', oggVar); 
    audioElement.load();
    audioElement.addEventListener("load", function() { 
        audioElement.play(); 
    }, true);
    audioElement.play();    
  }); 
});

<div>
  <p id="one"> this is the first paragraph</p>
....   
  <p id="four"> this is the fourth paragraph</p> 
....   
</div>

问题是如果在播放（或双击）音频文件时单击文本，则第二个文件（或同一文件）开始播放。所以我最终同时播放了两个文件。我需要阻止这一点。我认为'结束'事件是相关的，但是，尽管看了一些例子，我看不出如何检测文件是否正在播放并等到它完成之后再允许第二个文件启动（或者甚至阻止它播放在所有）。任何帮助将非常感谢:)

Answer 1

您可以为ended and playing事件添加事件侦听器。另外，为什么要通过javascript创建音频标签？我只想创建一个空的隐藏音频标签：

<audio id='myAudio' autoplay='autoplay'></audio>

您有两种选择：

播放/停止音频时禁用/启用按钮/链接（首选imho）
在播放时忽略点击次数

然后向它添加两个eventlisteners：

var playing = false;

$('#myAudio').on('playing', function() {
   playing = true;
   // disable button/link
});
$('#myAudio').on('ended', function() {
   playing = false;
   // enable button/link
});

$("p").click(function (event) {
   if(!playing) {
      var element = $(this);
      var elementID = event.target.id;
      var oggVar = (elementID +".ogg");   
      var audioElement = $('#myAudio')[0];
      audioElement.setAttribute('src', oggVar); 
      audioElement.play();
   }

});

Answer 2

 ***var audioElement = null;***     

 $("p").click(function (event) {

    ***if (audioElement) {
        audioElement.pause();
     }***

var element = $(this);
var elementID = event.target.id;
var oggVar = (elementID +".ogg");   
audioElement = document.createElement('audio');
audioElement.setAttribute('src', oggVar); 
audioElement.load();
audioElement.addEventListener("load", function() { 
    audioElement.play(); 
}, true);
audioElement.play();    

 });

Answer 3

public void UpdatePlayerColors(string m_Color1, string m_Color2)
{
    Material m_Base = (Material)Resources.Load($"/Assets/Colours/{m_Color1}", typeof(Material));
    Material m_Pattern = (Material)Resources.Load($"/Assets/Colours/{m_Color2}", typeof(Material));

    Debug.Log("Base is " + m_Base);
    Debug.Log("Pattern is " + m_Pattern);
}

这适用于jquery音频。

如何使用jquery和html5检测音频文件的结尾

3 个答案: