Bouton de lecture HTML personnalisé JQuery/Javascript

Question

Comme je n'aimais pas les commandes audio HTML5 par défaut, j'essayais d'implémenter un simple bouton qui contrôlerait cet audio. Maintenant, je ne suis certainement pas un expert en Javascript/JQuery, et je ne pouvais pas comprendre comment faire cela. Ce qu'il fait est qu'il boucle un ensemble de résultats et affiche plusieurs chansons dans une table (pour chaque entrée/chanson dans le tableau, il devrait y avoir un bouton play/pause.) La seule chose que j'ai trouvé à propos de cette approche étaient des tags 'id' codés pour contrôler l'audio, mais cela rend multiple de ces éléments audio avec cet identifiant.

<table> 
     <tbody> 
     {% for song in result %} 
        <tr> 
        <td> 
         <span> 
         <audio id="player" src="{{ song.audio_url }}"></audio> 
         <button onclick="playerAction(this)" class="butn butn--primary small"><i class="fa fa-play" aria-hidden="true"></i></button> 
         </span> 
        </td> 
       </tr> 
     {% endfor %} 
     </tbody> 
    </table> 

Comment pourrais-je aller sur la lecture/pause l'élément audio le plus proche?

<script> 
function playerAction(el){ 
    $(el).closest('player).play(); 
} 
</script> 

J'ai essayé quelque chose comme ça , mais les erreurs

Toute l'aide est apprécié!

Remarque: Les balises {{}} sont des éléments variables Django, tout comme la boucle. Cela rendra les liens audio et le ResultSet se

Answer 1

je me suis retrouvé à l'aide de ce qui suit:.

<script> 
function play(el){ 
    var audio = $(el).prev('#player')[0]; 
    audio.play(); 
    el.setAttribute('onclick', 'pause(this)'); 
} 

function pause(el){ 
    var audio = $(el).prev('#player')[0]; 
    audio.pause(); 
    el.setAttribute('onclick', 'play(this)'); 
} 
</script>