HTML5音频标签+ jQuery的：切换激活键

<div id="audio-player"> 

    <div> 

     <img id="playButton" 
    onclick="document.getElementById('stars').play(); 
     document.getElementById('playButton').toggle(
      function(){ $(this).attr("src", "playbutton-active.png"); }, 
      function(){ $(this).attr("src", "playbutton-inactive.png"); });" 
     src="playbutton-inactive.png"> 

     <img id="pauseButton" 
    onclick="document.getElementById('stars').pause(); 
    document.getElementById('pauseButton').toggle(
     function(){ $(this).attr("src", "pausebutton-active.png"); }, 
     function(){ $(this).attr("src", "pausebutton-inactive.png"); });" 
     src="pausebutton-inactive.png"> 

     <img id="stopButton" 
    onclick="document.getElementById('stars').pause(); 
    document.getElementById('stars').currentTime = 0; 
    document.getElementById('stopButton').toggle(
     function(){ $(this).attr("src", "stopbutton-active.png"); }, 
     function(){ $(this).attr("src", "stopbutton-inactive.png"); });" 
     src="stopbutton-inactive.png"> 

    </div> 

    <audio id="stars"> 
    <source src="stars-in-the-night-sky.mp3"> 
    <source src="stars-in-the-night-sky.ogg"> 
    </audio>

HTML5音频标签+ jQuery的：切换激活键

我也试过来代替的getElementById（ '为playButton'），使用$（本）.toggle但有效/无效图像不切换。当我没有切换语句时，自定义按钮可用于开始/暂停/停止音频。添加切换，控件不再起作用，尽管最初的不活动控制图像显示出来。我也意识到，我需要一个单独的功能来重置其他按钮时，一个是切换。

来源

2011-04-14 Conando

您应该尝试“$（”＃playButton“）。toggle（..）;”。你需要有一个jQuery对象...

使用此方法，而不是：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#playButton").click(function(){ 
     $(this).toggle(..); 
    }); 
    }); 
</script>

您还可以看到jQuery的用户界面和它的“按钮”的方法！

来源

2011-04-14 08:45:19 Fabien

HTML5音频标签+ jQuery的：切换激活键

回答

相关问题