| kfors | Дата: Среда, 06.05.2015, 02:12 | Сообщение # 1 |
 Генералиссимус
Группа: Администраторы
Сообщений: 87
Награды: 0
Репутация: 101
Статус: Offline
|  С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег <audio> на ваших сайтах.
Используем <audio> для вставки звукового файлу на страницуНиже приведен простейший пример использования тега <audio>, он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly, который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.<audio src="sound.mp3" autoplay></audio>
Воспроизведение звука в циклеХотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.<audio src="sound.mp3" autoplay loop></audio>
Отображение элементов управленияВместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls.<audio src="sound.mp3" controls></audio>
Различные форматы файловТег <audio> поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.<audio controls> <source src="sound.ogg"> <source src="sound.mp3"> </audio>
Указываем MIME-тип файловПри использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type.<audio controls> <source src="sound.ogg" type="audio/ogg" > <source src="sound.mp3" type="audio/mp3" ></audio>
Для старых браузеровА что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег <audio>? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег <audio>.<audio controls> <source src="sound.ogg" type="audio/ogg" > <source src="sound.mp3" type="audio/mp3" > Ваш браузер не пожжерживает тег audio!
</audio>
Буферизация файловПри воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload. Он может принимать 3 значения:none — если вы не хотите использовать буфер файлов;auto — если вы хотите, чтобы браузер беферизировал файл целиком;metadata — для загрузки лишь служебной информации (продолжительность звучания и др.).
Управление воспроизведением через JavaScriptУправлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:<audio id="player" src="sound.mp3"></audio><div> <button onclick="document.getElementById('player').play()">Воспроизведение</button> <button onclick="document.getElementById('player').pause()">Пауза</button> <button onclick="document.getElementById('player').volume+=0.1">Громкость +</button> <button onclick="document.getElementById('player').volume-=0.1">Громкость -</button></div>
Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега <audio>.
|
| |
| |
