Javascript/JQueryカスタムHTML再生ボタン

Question

デフォルトのHTML5オーディオコントロールが気に入らなかったので、このオーディオを制御する簡単なボタンを実装しようとしていました。今、私は確かにJavascript/JQueryの専門家ではないので、これを行う方法を理解できませんでした。それは、結果セットをループして複数の曲をテーブルに表示することです（テーブル内の各エントリ/曲には再生/一時停止ボタンが必要です）。このアプローチについて唯一見つかったのは、ハードコードされた 'id'タグオーディオを制御するために、しかし、これは、そのIDでこれらのオーディオ要素の複数をレンダリングします。

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

どのように私は最も近いaudio要素を一時停止/再生しに行くか？

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

私はこのような何かを試してみました、それはエラーです

すべてのヘルプ感謝しています！

注：{{}}タグはループのようにDjangoの可変アイテムです。これは私が次を使用して終了オーディオリンクと結果セット自体

Answer 1

をレンダリングします：

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