Sound Spielen nach jquery

Question

Onclick Ich habe eine folgende HTML in meiner Web-Formulare wie folgt vor:

<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> 

Und hier ist die Funktion, dass ich das Ereignis auszulösen bin mit:

<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> 

Wie Sie können sehen, dass die Gridview-Datenquelle mehrere Pfade zu MP3-Dateien enthalten kann, die ich erfolgreich geladen habe. Nun, was ich versuche zu erreichen ist, wenn das Ereignis auf einem Element ausgelöst wird, möchte ich die entsprechende Audiodatei für das abspielen, auf das geklickt wurde. Ich versuche auch herauszufinden, wie, wenn der Benutzer auf einen anderen MP3-Link klickt, alle vorherigen Audiodateien gestoppt würden und der aktuelle würde spielen ... Wie kann ich das erreichen?

Kann mir jemand helfen ??

Answer 1

Sie können .each() verwenden, um alle .audio Element zu durchlaufen, stellen currentTime zu 0, rufen .pause(); dann rufen Sie .load(), .play() auf event.target: var audio = $(this)[0];. Hinweis, document ist ein Objekt, keine Zeichenfolge

$(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(); 
     }); 
    });