Динамическое управление аудио HTML5 с помощью JavaScript - PullRequest
Новая
       14

Динамическое управление аудио HTML5 с помощью JavaScript

9 голосов
/ 18 апреля 2011

У меня есть своего рода галерея с 10 или около того миниатюрами, каждый из которых представляет одну песню. Чтобы управлять воспроизведением каждого из них, я установил кнопку воспроизведения на jQuery. После того, как я покопался в Центре разработки Apple, я нашел собственный JavaScript для управления аудио. Это прекрасно работает, но написано для управления одним объектом за раз. Я хотел бы переписать его как одну функцию, которая динамически управляет воспроизведением / паузой выбранного эскиза.

Ниже приведен код, который я нашел ... работает, но было бы много ненужного кода, чтобы написать его 10 раз.

Спасибо за вашу помощь и советы, всегда!

HTML: 

    <div class="thumbnail" id="paparazzixxx">
        <a href="javascript:playPause();">
            <img id="play" src="../images/icons/35.png" />
        </a>
        <audio id="paparazzi">
            <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>

JavaScript: 

<script type="text/javascript">
       function playPause() {
       var song = document.getElementsByTagName('audio')[0];
       if (song.paused)
           song.play();
       else
           song.pause();
       }
</script>

1 Ответ

22 голосов
/ 18 апреля 2011

jQuery отлично подходит для такого рода вещей.Это дает вам возможность легко манипулировать элементами, основываясь на их отношении к другим элементам в дереве DOM.В вашем примере вы хотите, чтобы элементы <a> влияли только на элементы <audio>, которые находятся рядом с ними при нажатии.

Проблема с вашим текущим кодом Javascript заключается в том, что он фактически просто захватывает только первый аудиоэлемент на всей странице.

Вот как вы можете изменить свой код для поддержки неограниченного количества <a> & <audio> пар.

  1. Добавить класс к тегу <a> (в моем примере - «воспроизведение»)
  2. Заменить атрибут href на «#»
  3. Затем используйте jQuery, чтобы прикрепить обработчик к событию click для элементов этого класса.

HTML 

<div class="thumbnail" id="paparazzixxx">
    <a class="playback" href="#">
        <img id="play" src="../images/icons/35.png" />
    </a>
    <audio id="paparazzi">
        <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
        <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
        Your browser does not support HTML5 audio.
    </audio>
</div>

Javascript 

<script type="text/javascript">
   $(function() {
     $(".playback").click(function(e) {
       e.preventDefault();

       // This next line will get the audio element
       // that is adjacent to the link that was clicked.
       var song = $(this).next('audio').get(0);
       if (song.paused)
         song.play();
       else
         song.pause();
     });
   });
</script>
...