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

У меня есть своего рода галерея с примерно 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>

javascript html audio jquery playback
person technopeasant    schedule 18.04.2011    source источник

Ответы (1)


arrow_upward
22
arrow_downward

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

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

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

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

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>
person jessegavin    schedule 18.04.2011
comment
@jessegavin спасибо за подробный ответ. Я ценю время, которое вы потратили на объяснение преимуществ jQuery в этом приложении. Я внедрил ваш код на свою страницу, но он не воспроизводит аудиофайл. Есть предположения? Работает ли это для вас? - person technopeasant; 18.04.2011
comment
Является ли html на вашей странице точно таким же, как html в вашем примере? Всегда ли аудиотег следует за тегом ссылки? - Вы получаете какие-либо конкретные ошибки javascript? - person jessegavin; 18.04.2011
comment
@jessegavin HTML-код копируется точно, и да, аудиотег следует за ссылкой в ​​каждом случае (поддерживает .next). Никаких конкретных ошибок, просто нет звука. Вот jsFiddle для демонстрации: jsfiddle.net/66FwR - person technopeasant; 18.04.2011
comment
У меня там был лишний }. Я обновил свой ответ выше. Теперь это работает. Я также обновил ваш jsFiddle, чтобы вы могли увидеть его в действии: jsfiddle.net/66FwR/1. - person jessegavin; 19.04.2011
comment
@Jessegavin идеально! Синтаксис, вероятно, станет моей смертью. Нужно ли включать href в теги привязки? - person technopeasant; 19.04.2011
comment
Вам не нужно. Если вы хотите поддерживать браузеры, не поддерживающие javascript, вы можете поменять href так, чтобы он указывал на URL-адрес mp3 для каждой песни (кроме этого не потребуется никаких изменений в коде). - person jessegavin; 19.04.2011
comment
@jessegavin Ах, приятно знать. Спасибо. Сбросил код на свой сайт. Он не работает, поэтому я ищу, что может конфликтовать с ним. - person technopeasant; 19.04.2011