Как сделать звук в html
Урок 14. Как вставить аудио или музыку на сайт в html
1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html
Как вставить аудио (музыку) на сайт в html
Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:
1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
2. Далее нужно скачать файлы плеера .
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.
4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:
И всё готово! Можете посмотреть и работу примера.
Как установить фоновую музыку в html
Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.
Синтаксис довольно-таки прост:
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
| Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true. |
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.
| Для каждого браузера проигрыватель и панель управления может отличаться. Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3. |
Атрибуты тега audio
Пример кода с тегом audio
Теперь смотрим работу тега audio в Вашем браузере:
Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)
Выпуск №10. Работа со звуком в HTML
Дата публикации: 2009-07-15
Всем привет. C Вами Андрей.
Из этого выпуска мы узнаем, каким образом можно подключить звук к HTML странице, т.е. файлы звукового формата к вашему сайту.
Существует 3 метода встраивания звуковых файлов.
Первый вам уже знаком. Это ссылка на звуковой файл — универсальный вариант, который поддерживается большинством браузеров.
По нажатию на эту ссылку, автоматически запускается стандартная программа для воспроизведения файлов указанного формата, обычно это Windows Media (воспроизводит AIFF, AU, MIDI, WAV и МРЗ — файлы). Этот вариант вам знаком, поэтому пойдем дальше.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Данный контейнер обеспечивает возможность прослушивания с помощью средств воспроизведения, отображаемых прямо на Web-странице, однако пульт управления проигрыванием может выглядеть по-разному в разных браузерах.
Еще для того что б этот контейнер отображался, в браузере должен быть установлен специальный плагин. В Internet Explorer он стоит по умолчанию, а вот что касается остальных браузеров, то не у всех он может быть. Тогда его придется установить.
Параметр 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.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CONSOLE — полный набор органов управления.
SMALLCONSOLE — компактное представление консоли. Полный набор органов управления, кроме кнопки паузы.
PLAYBUTTON — только кнопка воспроизведения.
PAUSEBUTTON — только кнопка паузы.
STOPBUTTON — только кнопка остановки. При этом файл выгружается.
VOLUMELEVER — только регулятор громкости.
С параметрами разобрались.
Предлагаю вам самим попробовать применить различные параметры и посмотреть, как они работают (тут ничего сложного нет).
Третий способ – это указать звуковой файл фоновым звуком для страницы.
Применение HTML5 Audio: подсказки и уроки интеграции звука
С приходом на рынок технологии Flash, эта задача значительно упростилась, так как Flash-плагин позволяет вам встраивать любую анимацию или звук в страницу, и технология поддерживается большинством браузеров. Но востребованность Flash постепенно сходит на нет после выхода на рынок инновационных девайсов от компании Apple: iPhone и iPad. Как известно, компания Apple принципиально не оснащает свои устройства поддержкой Flash, а число пользователей продукции стремительно растёт.
Вкратце, здесь небольшая путаница.
К счастью, HTML5 значительно упростил жизнь разработчикам, так как в технологии присутствует элемент audio. Данный элемент позволяет вам встраивать аудио-файлы в любую веб-страницу, а также реализовать панель управления посредством javascript. Что более важно, технология не требует дополнительных плагинов, и поддерживается почти во всех браузерах, за исключением ранних версий (о поддержке браузерами мы поговорим позже!).
В нашей сегодняшней статье мы расскажем вам о том, каким образом можно встроить звуки посредством элемента audio. Мы также научимся управлять процессом воспроизведения посредством javascript, а также постараемся рассказать вам о поддержке технологии среди браузеров.
Данный элемент крайне просто использовать. В нашем сегодняшнем примере мы будем встраивать песенку Бинга Кросби (Bing Crosby) «White Christmas»:
Здесь не нужно особо много объяснять. Примерно как вы вставляете изображение посредством тэга img, таким же образом вы можете вставить звук посредством тэга audio.
Вышеприведенный пример вряд ли будет работать во всех браузерах. Здесь дело затрагивает формат файла.
Вот вам таблица браузеров, где указаны поддержки звуковых форматов:
Как видно в таблице, наиболее оптимальным вариантом реализации будет подключение обоих форматов файлов.
Для того чтобы сделать это, вы можете добавить несколько элементов source элементу audio, и в них указать пути к различным форматам. Браузер будет воспроизводить первый файл, который он поддерживает. Вот пример:
Конечно же, это означает, что вам нужно создать как Mp3, так и OGG версию вашего звукового файла (здесь вам на помощь приходит Audacity ), но только так можно организовать кросс-браузерную поддержку.
Ранние версии Internet Explorer (версии 7 и 8) вообще не поддерживают элемент audio. Тем не менее, далее в статье мы рассмотрим, как обойти этот недуг.
Автоматическое воспроизведение звука
Хотя вышеприведенный код и встраивает звук, он не воспроизводит его. Если нам надо, чтобы звук воспроизводился автоматически при загрузке страницы, нам нужно добавить элементу атрибут autoplay:
Добавляем кнопки управления
Хотя и автоматическое воспроизведение может быть полезным, во многих случаях оно надоедает или совсем неуместно. Поэтому мы можем установить дополнительные кнопки управления элементов audio, чтобы пользователь сам мог решать:
Это добавляет горизонтальную панель с кнопкой паузы/воспроизведения, временной шкалой с ползунком, а также регулятор громкости. Всё примерно так же, как вы можете видеть на плеере в Youtube.
Важно помнить, что панель управления будет отличаться в зависимости от браузеров. Например, в браузере на iPhone будет отсутствовать ползунок громкости, так как у устройства есть отдельные кнопки для управления уровнем звука.
Добавление к элементу audio атрибута loop сделает так, что звук будет воспроизводиться бесконечно.
Это может быть полезным для того, чтобы включать фоновую музыку, либо звуковые эффекты в играх.
Вы также можете использовать атрибут preload, который даст браузеру данные о том, когда и где должен быть подгружен определенный звуковой файл.
Предварительная загрузка звукового файла означает, что звук может быть воспроизведен сразу же при нажатии пользователем кнопки play.
Для этого атрибута есть несколько значений:
«none» – браузер не должен навязывать загруженный файл. Т.е. если вы уверены в том, что большинство пользователей не будут воспроизводить этот файл, используйте этот параметр. Либо используйте его в случае, когда вам нужно сохранить как можно больше пропускной способности сервера.
«metadata» – параметр схож с none, за исключением того, что вы оповещаете браузер о возможности подгрузки метаданных, типа продолжительности аудио-дорожки, но не самого аудио-файла.
«auto» – вы позволяете браузеру загружать сам аудио-файл.
Имейте в виду, что предварительная загрузка – это лишь удобное дополнение, так как некоторые браузеры могут просто проигнорировать эту команду и начать творить всё, что им вздумается.
Управление воспроизведением посредством javascript
Что удобно в элементах javascript – это то, что ими проще простого управлять посредством javascript. Аудио-элемент предлагает множество удобных параметров и способов управления:
Play() – начать воспроизведение с текущей позиции;
Pause() – остановить воспроизведение на текущей позиции;
canPlayType(type) – определить, поддерживает ли браузер воспроизведение данного типа медиа;
duration – продолжительность дорожки в секундах;
currentTime – текущее положение в секундах. Вы также можете установить данный параметр на перемещение положения воспроизведения.
Используя предложенные выше параметры и методы, мы можем создать некоторые основные кнопки управления:
Посмотреть демо: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html
Поддержка ранних версий Internet Explorer
В большинстве случаев браузер пользователя будет поддерживать элемент HTML5. Но, к сожалению, браузеры IE версий 7 и даже 8 не поддерживают этот элемент (хотя в 9-м уже есть поддержка). Важно продумать версию отката для пользователей, которые остались в 2008 году.
Очень сырой, но эффективный метод заключается в том, чтобы применить специальные комментарии для выделения данных браузеров, и задать им объектный указатель до звукового файла. Таким образом, браузер зачастую будет отображать встроенный контроллер, позволяющий пользователям воспроизводить, останавливать или перематывать музыку в почти похожей на HTML5 audio манере. Вот пример:
Вышеприведенный пример будет работать во всех браузерах, которые поддерживают HTML5 Audio, и также будет работать в браузерах IE версий 7 и 8. С помощью комментариев, мы перенаправляем рычаги управления для кнопок напрямую к звуковому файлу.
В нашей сегодняшней статье мы научились встраивать аудио-файлы посредством HTML5. Элемент audio не только прост в использовании, но мы также можем оформить его под собственные требования, а также управлять воспроизведением посредством javascript.
Хотя пока что поддержка страдает в некоторых браузерах (типа старых версий IE), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Как стилизовать стандартный тег audio без js. Освоение HTML5 тега audio
С приходом на рынок технологии Flash, эта задача значительно упростилась, так как Flash-плагин позволяет вам встраивать любую анимацию или звук в страницу, и технология поддерживается большинством браузеров. Но востребованность Flash постепенно сходит на нет после выхода на рынок инновационных девайсов от компании Apple: iPhone и iPad. Как известно, компания Apple принципиально не оснащает свои устройства поддержкой Flash, а число пользователей продукции стремительно растёт.
Вкратце, здесь небольшая путаница.
Данный элемент крайне просто использовать. В нашем сегодняшнем примере мы будем встраивать песенку Бинга Кросби (Bing Crosby) «White Christmas»:
Вышеприведенный пример вряд ли будет работать во всех браузерах. Здесь дело затрагивает формат файла.
Некоторые браузеры умеют воспроизводить файлы формата.mp3, но не умеют файлы формата.ogg, а другие наоборот. Большинство браузеров умеют воспроизводить файлы формата.wav, но ввиду его большого размера, использование его в качестве звука для веб-сайта неуместно.
Вот вам таблица браузеров, где указаны поддержки звуковых форматов:
Автоматическое воспроизведение звука
Хотя вышеприведенный код и встраивает звук, он не воспроизводит его. Если нам надо, чтобы звук воспроизводился автоматически при загрузке страницы, нам нужно добавить элементу атрибут autoplay:
Добавляем кнопки управления
Это добавляет горизонтальную панель с кнопкой паузы/воспроизведения, временной шкалой с ползунком, а также регулятор громкости. Всё примерно так же, как вы можете видеть на плеере в Youtube.
Важно помнить, что панель управления будет отличаться в зависимости от браузеров. Например, в браузере на iPhone будет отсутствовать ползунок громкости, так как у устройства есть отдельные кнопки для управления уровнем звука.
Добавление к элементу audio атрибута loop сделает так, что звук будет воспроизводиться бесконечно.
Вы также можете использовать атрибут preload, который даст браузеру данные о том, когда и где должен быть подгружен определенный звуковой файл.
Предварительная загрузка звукового файла означает, что звук может быть воспроизведен сразу же при нажатии пользователем кнопки play.
Для этого атрибута есть несколько значений:
«none » – браузер не должен навязывать загруженный файл. Т.е. если вы уверены в том, что большинство пользователей не будут воспроизводить этот файл, используйте этот параметр. Либо используйте его в случае, когда вам нужно сохранить как можно больше пропускной способности сервера.
«metadata » – параметр схож с none, за исключением того, что вы оповещаете браузер о возможности подгрузки метаданных, типа продолжительности аудио-дорожки, но не самого аудио-файла.
«auto » – вы позволяете браузеру загружать сам аудио-файл.
Управление воспроизведением посредством javascript
Что удобно в элементах javascript – это то, что ими проще простого управлять посредством javascript. Аудио-элемент предлагает множество удобных параметров и способов управления:
Play() – начать воспроизведение с текущей позиции;
Pause() – остановить воспроизведение на текущей позиции;
canPlayType(type) – определить, поддерживает ли браузер воспроизведение данного типа медиа;
duration – продолжительность дорожки в секундах;
currentTime – текущее положение в секундах. Вы также можете установить данный параметр на перемещение положения воспроизведения.
Используя предложенные выше параметры и методы, мы можем создать некоторые основные кнопки управления:
Play Music
Pause Music
Stop Music
Посмотреть демо: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html
Поддержка ранних версий Internet Explorer
В большинстве случаев браузер пользователя будет поддерживать элемент HTML5. Но, к сожалению, браузеры IE версий 7 и даже 8 не поддерживают этот элемент (хотя в 9-м уже есть поддержка). Важно продумать версию отката для пользователей, которые остались в 2008 году.
Очень сырой, но эффективный метод заключается в том, чтобы применить специальные комментарии для выделения данных браузеров, и задать им объектный указатель до звукового файла. Таким образом, браузер зачастую будет отображать встроенный контроллер, позволяющий пользователям воспроизводить, останавливать или перематывать музыку в почти похожей на HTML5 audio манере. Вот пример:
Вышеприведенный пример будет работать во всех браузерах, которые поддерживают HTML5 Audio, и также будет работать в браузерах IE версий 7 и 8. С помощью комментариев, мы перенаправляем рычаги управления для кнопок напрямую к звуковому файлу.
В нашей сегодняшней статье мы научились встраивать аудио-файлы посредством HTML5. Элемент audio не только прост в использовании, но мы также можем оформить его под собственные требования, а также управлять воспроизведением посредством javascript.
Хотя пока что поддержка страдает в некоторых браузерах (типа старых версий IE), можно без проблем делать откаты для них, если это понадобится, что в наши дни встречается всё реже и реже.
Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:
1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.
3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.
4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла :
Как установить фоновую музыку в html
Синтаксис довольно-таки прост:
Закрывающий тег не требуется.
Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:
Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:
В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :
После описания метода вставки фоновой музыки хочу Вас от этого отговорить, так как большинство пользователей в момент посещения различных сайтов уже, как правило, слушают музыку. Поэтому попутное музыкальное сопровождение может его только заставить закрыть вкладку с сайтом.
Атрибуты тега audio