HTML5 Audio tag + Jquery: переключение активной кнопки - PullRequest
Новая
       6

HTML5 Audio tag + Jquery: переключение активной кнопки

1 голос
/ 14 апреля 2011 
<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>

Я также попытался вместо getElementById ('playButton') использовать $ (this) .toggle, но активные / неактивные изображения не переключаются.Когда у меня нет операторов переключения, пользовательские кнопки работают, чтобы запустить / приостановить / остановить аудио.При добавлении переключателя элементы управления больше не работают, хотя отображаются начальные неактивные изображения элементов управления.Я также понимаю, что мне понадобится отдельная функция для сброса других кнопок при переключении.

1 Ответ

0 голосов
/ 14 апреля 2011

Вы должны попробовать "$ (" # playButton "). Toggle (..);". Вам нужен объект JQuery ...

Используйте этот метод вместо: 

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

Вы также можете увидеть JQuery-ui и его метод "кнопки"!

...