Динамично контролирайте HTML5 аудио с JavaScript

Имам нещо като галерия с 10 или повече миниатюри, всяка от които представлява една песен. За да контролирам възпроизвеждането на всеки от тях, съм задал бутон за възпроизвеждане, който да избледнява чрез jQuery. След известно ровене из Центъра за разработка на Apple открих някакъв естествен JavaScript за контрол на аудиото. Работи прекрасно, но е написан за управление на един обект наведнъж. Това, което бих искал да направя, е да го пренапиша като една функция, която динамично контролира възпроизвеждането/паузата на миниатюрата, която избирате.

По-долу е кодът, който намерих.. работи, но би било много ненужен код да го напиша 10 пъти.

Благодаря за помощта и съветите, винаги!

HTML:

    <div class="thumbnail" id="paparazzixxx">
        <a href="/bgjavascript: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="/bg#">
        <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