HTML5 音频标签 + Jquery：切换活动按钮

Posted 2023-02-25

【中文标题】HTML5 音频标签 + Jquery：切换活动按钮

【英文标题】：HTML5 Audio tag + Jquery: Toggling the active button

【发布时间】：2011-04-14 04:04:50

【问题描述】：

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

我也尝试使用 $(this).toggle 代替 getElementById('playButton')，但活动/非活动图像不会切换。当我没有切换语句时，自定义按钮可以启动/暂停/停止音频。添加切换按钮后，控件不再起作用，尽管显示了初始的非活动控件图像。我还意识到，当一个按钮被切换时，我需要一个单独的函数来重置其他按钮。

【参考方案1】：

您应该尝试“$("#playButton").toggle(..);"。 你需要有一个 JQuery 对象...

改用这个方法：

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

您还可以看到 JQuery-ui 及其“按钮”方法！