Javascript/JQuery自定義HTML播放按鈕

由於我不喜歡默認的HTML5音頻控件，我試圖實現一個簡單的按鈕來控制此音頻。現在，我當然不是Javascript/JQuery的專家，我無法弄清楚如何做到這一點。它的功能是遍歷一個結果集並在一個表中顯示多首歌曲（因此對於表格中的每個條目/歌曲，都應該有一個播放/暫停按鈕。我發現的唯一方法是硬編碼'id'標籤來控制音頻，但是這使得與ID這些音頻元素的多個。Javascript/JQuery自定義HTML播放按鈕

<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變量項，就像循環一樣。這會使得音頻鏈接，結果集本身

來源

2017-02-26 dnsko

你試過$（「表」）找到（「＃播放器」）。玩（）？或用另一個容器替換每個表。你的代碼中有語法錯誤，也許它也會起作用。 – t4dohx

我最終使用下列內容：

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

來源

2017-02-26 17:47:45 dnsko

Javascript/JQuery自定義HTML播放按鈕

回答

相關問題