Несколько аудио тегов не работают вместе

Question

Я пытаюсь написать сайт для звуковой панели для моего проекта, и я хочу иметь возможность щелкнуть тег <a> и заставить его воспроизводить аудио для определенного тега <audio>. На данный момент я использую этот код, который я нашел на SO:

<a onclick="this.firstChild.play()"><audio src="1.aif"></audio>1</a>

Хотя это работает в большинстве случаев, при использовании его на iOS, если вы нажмете «1» вместо «a», он выберет другой элемент для воспроизведения (у меня есть несколько на странице). Я думал, что у меня должно быть это так, чтобы, когда вы нажимаете на <a>, он воспроизводил определенный клип <audio> через класс,

<a onclick="(.1).play()"><audio class="1" src="1.aif"></audio>1</a>

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

Answer 1

Если вы даете отдельные имена классов элементам, для этого и нужен id. (Класс более подходит для применения к нескольким элементам.) Так что может быть что-то вроде:

<a onclick="document.getElementById('a1').play()"><audio id="a1" src="1.aif"></audio>1</a>

Сказав это, способ получить элементы по классу использует .getElementsByClassName() - обратите внимание, что он возвращает элементы множественного числа в виде NodeList, поэтому даже если вы знаете, что существует только один элемент с для данного класса вы должны учесть это:

<a onclick="document.getElementsByClassName('1')[0].play()"><audio class="1" src="1.aif"></audio>1</a>

Обратите внимание, что, как показано в таблицах совместимости Quirksmode , не все браузеры поддерживают .getElementsByClassName().

(Вы также можете использовать document.querySelectorAll(), но он также не поддерживается старыми браузерами.)