Question

由于我不喜欢默认的HTML5音频控件，我试图实现一个控制此音频的简单按钮。现在，我当然不是Javascript / JQuery的专家，我无法弄清楚如何做到这一点。它的作用是循环结果集并将多首歌曲显示在一个表格中（因此对于表格中的每个条目/歌曲，应该有一个播放/暂停按钮。我发现这种方法的唯一方法是硬编码＆＃39;用于控制音频的id＆＃39;标签，但是这会使用该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>

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

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

Javascript / JQuery自定义HTML播放按钮

1 个答案: