Выпуск №10. Работа со звуком в HTML

звуковые файлы

Всем привет. C Вами Андрей.

Из этого выпуска мы узнаем, каким образом можно подключить звук к HTML странице, т.е. файлы звукового формата к вашему сайту.

Существует 3 метода встраивания звуковых файлов.

Первый вам уже знаком. Это ссылка на звуковой файл — универсальный вариант, который поддерживается большинством браузеров.

<a href="myfile.mp3"> текст ссылки </a>

По нажатию на эту ссылку, автоматически запускается стандартная программа для воспроизведения файлов указанного формата, обычно это Windows Media (воспроизводит AIFF, AU, MIDI, WAV и МРЗ — файлы). Этот вариант вам знаком, поэтому пойдем дальше.

Второй способ заключается в использовании контейнера <embed>.

Данный контейнер обеспечивает возможность прослушивания с помощью средств воспроизведения, отображаемых прямо на Web-странице, однако пульт управления проигрыванием может выглядеть по-разному в разных браузерах.

Еще для того что б этот контейнер отображался, в браузере должен быть установлен специальный плагин. В Internet Explorer он стоит по умолчанию, а вот что касается остальных браузеров, то не у всех он может быть. Тогда его придется установить.

<embed src="intro.mp3" width="500" height="300"></embed>

Параметр src – обязательный, определяет имя проигрываемого файла. Остальные параметры можно не указывать. Их перечень приведен ниже.

WIDTH=n — определяет ширину консоли в пикселях.

HEIGHT=m — определяет высоту консоли в пикселях.

AUTOSTART=TRUE|FALSE — если имеет значение TRUE, воспроизведение начинается автоматически.

AUTOLOAD=TRUE|FALSE — если имеет значение FALSE, файл не загружается автоматически.

STARTTIME="mm:ss" — воспроизведение начинается с указанного в минутах секундах момента от начала файла.

REPEAT= TRUE / FALSE — разрешает или запрещает повторять звуковой/видео клип.

PLAY LOOP=Z — если Вы указали REPEAT-TRUE, укажите здесь вместо Z количество повторений.

VOLUME=percentage — громкость воспроизведения, указанная в процентах от максимальной.

ALIGN="value" — выравнивает консоль управления по отношению к тексту страницы. Может иметь значения CENTER, BASELINE TOP LEFT, RIGHT.

CONTROLS="value" — задает набор органов управления консоли. Может иметь следующие значения (они объяснены далее)-CONSOLE, SMALLCONSOLE, PLAYBUTTON PAUSEBUTTON, STOPBUTTON И VOLUMELEVER.

CONSOLE — полный набор органов управления.

SMALLCONSOLE — компактное представление консоли. Полный набор органов управления, кроме кнопки паузы.

PLAYBUTTON — только кнопка воспроизведения.

PAUSEBUTTON — только кнопка паузы.

STOPBUTTON — только кнопка остановки. При этом файл выгружается.

VOLUMELEVER — только регулятор громкости.

С параметрами разобрались.

Предлагаю вам самим попробовать применить различные параметры и посмотреть, как они работают (тут ничего сложного нет).

Третий способ – это указать звуковой файл фоновым звуком для страницы.

Синтаксис тут простой:

<bgsound

src=filename — чзвуковой файл

lоор=n — количество повторов (infinite — непрерывно)

volume — громкость (от 10000 до 0,0 — значение по умолчанию)

balance — баланс между левой и правой колонками, значение может изменяться от -10000 (максимум для левого канала) до 10000 (максимум для правого канала).

/>

Пример:

<bgsound src="intro.mp3" balance="0" loop="infinite" volume="5" />

Пожалуй, это все, что касается встраивания звука в WEB-страницу. В настоящее время активно используется технология флэш, для встраивания звука. Как с помощью нее это делать, я покажу на диске, который скоро выйдет в свет.

На этом, выпуск посвященный звуку в HTML и подключению его к сайту, закончен.

киберсант-вебмастер

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (15)

  1. Елена

    Спасибо большое Андрей! Все получилось! Написано понятно и доступно о работе со звуковыми файлами!!! Прекрасный урок! СПАСИБО!!!

  2. Василий

    Спасибо однако!Вопрос такой-почему на моей страничке с музыкальными треками, при использовании ,например браузера Мозилла Ф. происходит автовоспроизведение файлов ,а в Эксплорере-нет.В настройках стоит запрет на автозапуск.Как с этим разобраться-а то в Мозилле приходится нажимать стоп плеера,чтоб небыло звуковой «каши»,спасибо!

  3. ximera

    Спасибо большое все получилось… Еще раз спасибо Андрей, твои уроки как всегда супер все просто и доступно.

  4. Николай

    Спасибо большое, Андрей! Прекрасный урок!

  5. Tanuxa

    Спасибо, за урок!

  6. Светлана

    Замечательно,Андрей,огромное спасибо!

  7. Анечка

    Добрый день! уроки отличные!
    У меня такой вопрос: при указании звукового файла фоновым звуком для страницы всё получается, но… как его остановить?:)

  8. Анатолий

    Все очень понятно. Спасибо.

  9. Станислав

    Андрей! Спасибо за урок.

  10. Александр

    Полезный урок!Спасибо!!

  11. Зинфира

    А я вот, простите, не поняла. Устанавливать плагин, какой? Что делать вот с этим-, куда вставлять? Ничего не поняла. А хочу понять, объясните, как новичку. Сайт у меня есть. Ведь не одна я такая.

  12. Баночкин Сергей

    Скажите, Андрей, а под картинку, например, телефона или фотоаппарата можно встроить звуковой файл звонка, или клацание аппарата,
    когда на картинку нажмут мышкой.(курсором) что бы сработал звук один, или два раза?
    = Баночкин С. =

  13. Любовь

    Не совсем получается, что-то не так делаю, нужно ешё разбираться, где ошибки.

  14. Алексей

    Здравствуйте Андрей! являюсь давним Вашим подписчиком рассылок. У меня вопрос, как сделать при нажатии на ссылку, была озвучка??? Помогите разобраться.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree