javascript - jquery onclick后播放声音

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();然后在 event.target 上调用 .load()、.play():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();
        });
    });