Question

我制作了一个简单的播放/暂停按钮，它与音频html5标签和jquery一起使用：

$(document).ready(function() {
   $("#stop-bt").hide();

 $("#play-bt").click(function() {
   $("#play-bt").hide();
   $("#audio-player")[0].play();
   $("#stop-bt").show();
 });

 $("#stop-bt").click(function() {
    $("#stop-bt").hide();
    $("#audio-player")[0].pause();
    $("#audio-player")[0].currentTime = 0;
    $("#play-bt").show();
 });
});

我想添加一个微调器来指示正在加载流。如何在流加载时显示包含我的微调器（#spin）的div，并在流开始播放时隐藏它？

我认为我可能会使用类似的方式走上正轨：.bind（'progress'，function（）{..}但是我无法弄明白。

谢谢！

Answer 1

感谢您的回答。我确信有很多方法可以解决这个问题。这就是最终为我工作的原因：

$(document).ready(function() {
 $("#stop-bt").hide();
 $("#spin").hide();

 $("#play-bt").click(function() {
   $("#play-bt").hide();
   $("#spin").show();
   $("#audio-player")[0].play();
  });

 $("#audio-player").bind('playing', function() {
   $("#spin").hide();
   $("#stop-bt").show();
 });


 $("#stop-bt").click(function() {
  $("#stop-bt").hide();
  $("#play-bt").show();
  $("#audio-player")[0].pause();
  $("#audio-player")[0].currentTime = 0;
 });

});

这是一个非常简单的解决方案，对某些人来说可能是基本的，但希望能帮助别人，我想解释一下。这个答案假设你在页面的某个地方有相应的html div。

基本上，它是如何工作的，首先隐藏包含停止按钮的div和包含微调器的div。接下来，如果单击包含播放按钮的div，则会隐藏播放按钮，显示微调器div并尝试播放音频。

有一个事件与html音频标签一起被称为'播放'（among others），它会在音频开始播放时显示出来。当播放事件开始时，它会隐藏包含微调器的div并显示包含停止按钮的div。

最后，如果单击停止按钮，它会隐藏停止div容器，显示播放按钮div容器，并暂停音频。

Answer 2

jQuery中没有内置的progress事件。你必须自己触发这个事件。您处于正确的轨道上，只需在加载流时触发progress事件。

并且不要忘记在加载流时定义自定义streamLoaded事件（您可以调用它）。

或者，如果您不想，您根本不需要使用自定义事件。只需在适当的位置显示/隐藏微调器。

Answer 3

我不知道你是不是想看那个图像，但是我有一个非常漂亮的微调器，它是免费的enter link description here

那就是页面。

我所做的就是将图像放在我使用的文本字段旁边并将其放入

style="display:none"

然后我把它放在我希望它显示的地方

$("theidoftheimage").show();

当我希望隐藏它时，我把：

$("theidoftheimage").hide();

这就是我的意思，我希望这很有用

使用Jquery加载音频时如何显示微调器？

3 个答案: