Question

我的网络表单中有以下HTML，如下所示：

 <asp:GridView ID="gridLanguages" AutoGenerateColumns="false" runat="server">
          <Columns>
            <asp:TemplateField>
                 <ItemTemplate>
                     <a class="audio">
                          <%# Eval("Name") %>
                      <audio  >
                         <source src="<%# "/languages/" + Eval("Path") %>" type="audio/mpeg">
                    </audio>
                     </a>
                 </ItemTemplate>
            </asp:TemplateField>
          </Columns>
      </asp:GridView>

这是我用来触发事件的函数：

<script>

        $('document').ready(function () {
            $(".audio").click(function (event) {
                console.log("Event triggered"); // this line is shown in console so this part is ok
                var audio = $(this)[0];
            });
        });

   </script>

正如您所看到的，gridview数据源可以包含多个已成功加载的mp3文件路径。现在我想要实现的是当一个元素触发事件时，我想播放相应的音频文件。我也试图找出如何，如果用户点击另一个mp3链接，所有以前的音频文件将被停止，当前的音频文件将播放...我怎样才能实现？

有人可以帮帮我吗？

Answer 1

您可以使用.each()来迭代所有.audio元素，将currentTime设置为0，调用.pause();然后在.load()：.play()上致电event.target，var audio = $(this)[0];。注意，document是一个对象，而不是一个字符串

    $(document).ready(function () {
        var elems = $(".audio");
        elems.click(function (event) {
            elems.find("audio").each(function() {                 
              this.pause();
              this.currentTime = 0;
            });
            console.log("Event triggered");
            var audio = $(this).find("audio")[0];
            audio.load();
            audio.play();
        });
    });

在jquery onclick之后播放声音

1 个答案: