JavaScript播放/暫停音頻按鈕，更改課程並創建自動循環

我的代碼的工作原理是這樣的：當我單擊播放時，類「播放」更改爲類「暫停」，但當我單擊暫停時，它不會更改爲「玩」類。JavaScript播放/暫停音頻按鈕，更改課程並創建自動循環

第二個問題將是如何爲音頻製作自動循環。

我的代碼：

HTML：

<a class="playback"> 
       <span id="toggle" class="play"></span> 
      </a> 
      <audio> 
      <source src="<?php bloginfo('template_directory') ?>/venga.ogg" type="audio/ogg" /> 
       <source src="<?php bloginfo('template_directory') ?>/venga.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio>

CSS：

.play { 
     background: url('img/play.png') no-repeat; 
     width: 32px; 
     height: 32px; 
     padding: 24px 45px 3px 0px; 
     margin: 0 0 0 5px; 
    } 
    .pause { 
     background: url('img/pause.png') no-repeat; 
     width: 32px; 
     height: 32px; 
     padding: 24px 45px 3px 0px; 
     margin: 0 0 0 5px; 
    }

JS：

<script> 
$(function() { 
    $(".playback").click(function(e) { 
     e.preventDefault(); 
     var song = $(this).next('audio').get(0); 
     if (song.paused) 
      song.play(); 
     else 
      song.pause(); 
    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#toggle').bind("click", function() { 
     if ($(this).attr("class") == "play") 
      $(this).attr("class", "pause"); 
     else 
      $(this).attr("class", "play"); 
    }); 
}); 
</script>

來源

2013-04-14 Tomas Kleinotas

你是否得到任何錯誤的類改變代碼。我試過了，它可以很好地處理你的代碼。 – plalx

沒有錯誤，但班級「暫停」不會變回班級「玩」 –

你能設置一個重現問題的jsFiddle嗎？ – plalx

謝謝你給了靈感像我這樣的初學者.. 的腳本似乎工作在我的HTML頁面，與iOS模擬器。

也許你包含2個jQuery版本？我不確定你的代碼出現問題。

來源

2013-04-24 08:41:16 ask91

JavaScript播放/暫停音頻按鈕，更改課程並創建自動循環

回答

相關問題