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()；然后打电话给.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();
        });
    });