Javascript/JQuery自定义HTML播放按钮

因为我不喜欢默认的HTML5音频控件，所以我尝试实现一个简单的按钮来控制这个音频。现在，我肯定不是Javascript/JQuery方面的专家，我也不知道如何做到这一点。它所做的是通过一个resultset循环并将多首歌曲显示到一个表中（因此，对于表中的每个条目/歌曲，都应该有一个播放/暂停按钮。关于这种方法，我发现的唯一一件事是硬编码的“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>

{结果%中歌曲的百分比}
{%endfor%}

如何播放/暂停最近的音频元素

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

功能播放器动作（el）{
$（el）.最近的（'player.play（）；
}

我试过这样的方法，但它是错误的

感谢您的帮助

---

注意：

{{}

标记是Django变量项，就像循环一样。这将呈现音频链接和结果集本身

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

功能播放（el）{
var audio=$（el）.prev（'#player'）[0]；
音频播放（）；
el.setAttribute（'onclick'，'pause（this'）；
}
功能暂停（el）{
var audio=$（el）.prev（'#player'）[0]；
audio.pause（）；
el.setAttribute（'onclick'，'play（this'）；
}

您是否尝试过$（“table”）.find（“#player”）.play（）？或者用另一个容器替换每个表。您的代码中有语法错误，也许它也可以工作。