Освоение HTML5 тега audio

Освоение HTML5 тега audio

Проверить тег можете в новом шаблоне от uGarts - FunMus для uCoz
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег <audio> на ваших сайтах.
Используем <audio> для вставки звукового файлу на страницу
Ниже приведен простейший пример использования тега

Код
<audio src="sound.mp3" autoplay></audio>
Примечание! Нельзя ссылку на файл в корне сайта делать
<audio src="/music/sound.mp3" > не будет читаться, это недостаток, и лишние символы; Правильной ссылкой будет <audio src="http://site.ru/music/sound.mp3" >.

Воспроизведение звука в цикле

Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт
Код
<audio src="sound.mp3" autoplay loop></audio>

Отображение элементов управления
Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls
Код
<audio src="sound.mp3" controls></audio>
Цитата
Столкнувшись с тегом аудио, и его атрибутом controls, я нашел пару оплошностей, в какой-то мере они значительны: 1) При паузе аудио файл загружается быстрее; 2) При многочисленных кликах и манипуляций с кнопками ломается сам процесс проигрывания песен. 3) Отсутствие кнопок переключения файлов на странице, если прописан тег 2 или более раз

Буферизация файлов
При воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут 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>

    На этом все спасибо за внимание

  • avatar