Arhn - архитектура программирования

Выбор аудиоэлементов с помощью классов и их воспроизведение

У меня есть звуковой клип, зарегистрированный в html:

<audio class="aaa" id="sss"><source src="url/sound.wav"/></audio>
<script type="text/javascript">var sss = document.getElementById("sss"); sss.volume='0.1';</script>

Этот звук можно воспроизвести с событием mouseenter на определенном div:

$('#divid').mouseenter(function () {
    $(sss.play());
});

Как этого можно добиться с помощью аудиокласса вместо идентификатора?

редактировать: решено

25.09.2013

Ответы:


1

.play() - это метод объекта HTMLAudioElement, а не объекта jQuery, оболочка jQuery здесь ничего не делает, поскольку вы передаете ему перенастроенное значение метода .play(), вы можете выбрать элемент(ы) с помощью jQuery, получить объект элемента DOM (s) из коллекции и вызовем на ней метод .play():

$('audio.aaa').get(0).play(); // works for the first matched element in the collection

Если элементов несколько, можно пройтись по коллекции с помощью метода .each():

$('audio.aaa').each(function() {
   // `this` keyword here refers the HTMLAudioElements
   this.foo();
});
25.09.2013
  • По какой-то причине это работает только в Firefox, а не в Opera и Chrome. 25.09.2013
  • @weaponx Каждый браузер поддерживает разные аудиоформаты, developer.mozilla.org/en-US /docs/HTML/Supported_media_formats 25.09.2013
  • моя вина. проблема была в кэшировании. ваш код работает без проблем во всех трех браузерах. Спасибо за помощь. 25.09.2013
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..