Атрибут dir тега <audio>

Описание

Атрибут dir определяет направление текста для элементов интерфейса аудио-плеера. Хотя сам тег <audio> не содержит текстового контента, атрибут может влиять на отображение стандартных элементов управления.

Пример использования:
<audio controls dir="rtl"> <source src="arabic-song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

Значения атрибута:

Значение Описание Влияние на аудио-элемент
ltr Слева направо (по умолчанию) Стандартное расположение элементов управления
rtl Справа налево Может изменить порядок кнопок в некоторых браузерах
auto Автоматическое определение Определяет направление на основе содержимого (малоэффективно)

Особенности работы:

  • В большинстве современных браузеров не влияет на стандартные элементы управления
  • Может изменить направление текста в пользовательских подписях
  • Эффективен только при создании кастомных аудио-контролов
  • Наследуется дочерними элементами
Пример с кастомными контролами:
<div class="audio-container" dir="rtl"> <audio id="my-audio"> <source src="hebrew-audio.mp3" type="audio/mpeg"> </audio> <button onclick="document.getElementById('my-audio').play()"> تشغيل </button> </div>

Рекомендации:

  • Для RTL-языков применяйте атрибут к контейнеру, а не к самому тегу <audio>
  • При создании кастомного плеера используйте CSS-свойство direction
  • Тестируйте в целевых браузерах
  • Для стандартных элементов управления лучше использовать CSS

Ограничения: Нативные элементы управления аудио в большинстве браузеров игнорируют атрибут dir.

CSS альтернатива:

.rtl-audio { direction: rtl; unicode-bidi: bidi-override; } .rtl-audio .controls { flex-direction: row-reverse; }

JavaScript определение:

const audioElement = document.querySelector('audio'); console.log('Текущее направление:', audioElement.dir || 'ltr (по умолчанию)'); // Установка направления audioElement.dir = 'rtl';

Совет: Для полноценной RTL-поддержки создавайте собственные элементы управления с учетом направления текста.

Примечание: Атрибут dir в основном предназначен для текстовых элементов и имеет ограниченное применение для медиа-элементов.