KFORS.ORG Четверг, 23.11.2017, 19:54
Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Студенческий » Уроки программирования » Освоение HTML5 тега audio
Освоение HTML5 тега audio
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>.

Прикрепления: 6990197.png(3Kb)
 
Форум » Студенческий » Уроки программирования » Освоение HTML5 тега audio
Страница 1 из 11
Поиск:
Сегодня нас посетили
Статистика Форума
Последние обновленные темы Самые популярные темы Лучшие пользователи Новые пользователи
  • Чертежи (1)
  • Обеспечение качества разработки программного обеспечения (1)
  • электротехника и электроника и схемотехника (1)
  • Ответы на тесты Концепции современного естествознания (2)
  • Чертежи на заказ ВСЕМ/Скидки, акции по снижению цены! ЖМИ! (0)
  • Экономика (12)
  • Бегущая строка (2)
  • Вещи и транспорт подразделения (2)
  • Witcher 3: Wild Hunt/Ведьмак 3: Дикая Охота - ЧИТЫ (0)
  • ОКАЖУ ПОМОЩЬ ПО НАПИСАНИЮ АВТОРСКИХ УЧЕБНЫХ РАБОТ (0)
  • Экономика (12)
  • АНЕКДОТЫ (7)
  • Управление проектами (6)
  • Поможем защитить диплом/диссертацию (2)
  • Ответы на тесты Концепции современного естествознания (2)
  • Обсуждение кланки (2)
  • Бегущая строка (2)
  • Вещи и транспорт подразделения (2)
  • Чертежи (1)
  • Обеспечение качества разработки программного обеспечения (1)
  • kfors
  • Белый
  • Onlines
  • senobit
  • maryankakmm
  • kbapo4ta
  • 44i55
  • smolickowar
  • startsmart
  • studentvzfei
  • ngsx
  • yuliyasolyar
  • lazex
  • antohakiseliov
  • ekaterinafomina1999
  • Demi9821
  • Demi
  • anna09
  • zarlev
  • tempo-cad


  • Яндекс цитирования Яндекс.Метрика Анализ веб сайтов
    Free counters!




    Copyright MyCorp © 2017