HTML 5 — Фоновый звук на сайте — Музыка

How to add background music to a web page?

@Asaph I think there’s very few situations where it might be appropriate (e.g. a HTML game, a canvas based animation etc). The majority of times, you’re right — it’s annoying and will cause people to leave.

3 Answers 3

The tag is Internet Explorer-specific and will thus not work in other browsers such as FireFox. The tag should work in FireFox if you use it correctly. It will use a browser plug-in to play the sound. Below is an example:

• loop=»true» specifies to play the sound repeatedly.
• src=»https://stackoverflow.com/questions/6529645/sound.wav» specifies the relative path of the sound file to play. The variety of formats you can play depends on what type= you specify.
• hidden=»true» indicates to not show the media player’s interface. Hide it if you want the user to not be able to pause, stop, or navigate through the sound.
• type=»video/quicktime» specifies to use a Quicktime component, which means the client must have Quicktime installed. Use application/x-mplayer2 for Windows Media Player or audio/x-pn-realaudio-plugin for Real Player audio. Quicktime plays more formats and is probably what you will want to use.

Alternatively, use in a very similar way. An example is below:

Keep in mind that, like the tag, background sound on a web page is generally frowned upon because it is often obtrusive and annoying. Also, as the user switches between pages or causes post-backs, the sound will restart from the beginning. Only use audio formats that are highly compressed, meaning they have small file sizes, or the sound will not play for several seconds while it downloads to the client machine.

Источник

Фоновый HTML 5 звук или музыка на сайте

HTML теги определяют фоновый звук или аудиопоток на сайте:

• Флажок autoplay=»autoplay» определяет воспроизведение музыкального файла сразу же после загрузки страницы.
• Флажок autobuffer=»autobuffer» используется в паре с autoplay=»autoplay» – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
• src=»https://ab-w.net/HTML5/url» – источник звукового файла.
• Флажок controls=»controls» показывает панель управления плеером.

Строка: Ваш браузер не поддерживает теги ! Обновите версию браузера! – будет показана если версия браузера пользователя не слишком новая.

Как вы видите, файл должен быть с расширением .ogg.

Теги впервые представлены в спецификации HTML 5. Новые теги могут не интерпретироваться устаревшими версиями браузеров!

Автор проекта — Вася Митин | Дата публикации: Февраль 2010 | Обновление: Ноябрь 2018

Направление текста Фоновый HTML звук на сайте HTML видео на сайте

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Фоновый HTML звук? – Не вопрос!

Источник

How to Add Background Audio/Music to Your Website

Learn how to add background audio or music files to your website by using the HTML element and its various attributes.

To add background music/audio on your website, you can use the HTML audio element ( ).

Let’s say you have an audio file that you want to play in the background as soon as users visit your website. Here’s the general HTML code required to do that:

audio autoplay> source src="your-audio-file.wav" type="audio/wav" /> audio>

The element’s src attribute accepts both internal and external audio sources as values.

Notice the autoplay attribute. That’s required if you want the audio to start playing as soon as the user enters your webpage.

Demo: to hear an example, turn down the volume on your computer/headphones and click on this demo.

There are three supported audio formats in HTML: MP3, WAV, and OGG. In the element you specify the format in the type attribute:

File Format	Media Type
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

In this tutorial I use the WAV format, therefore I added the type=»audio/wav» attribute on the element above.

The following is a handful of useful attributes that are built-in to the element, and provide you fine-grained control.

To loop your background audio, you can add the loop attribute:

audio autoplay loop> source src="your-audio-file.wav" type="audio/wav" /> audio>

To mute your background audio, you can add the mute attribute:

audio muted> source src="your-audio-file.wav" type="audio/wav" /> audio>

Why would you use the muted attribute? Well, you might want to disable your audio element’s audio source temporarily and switch it back on again later, without removing the entire element from your webpage.

To add controls (play, pause, etc.), use the controls attribute:

audio controls> source src="your-audio-file.wav" type="audio/wav" /> audio>

Now the user can click play if they want to hear your audio file.

Browser support for audio formats

• MP3 is supported in all browsers,
• WAV is supported in all browsers except Edge/IE
• OGG is supported in all browsers except Edge/IE and Safari

Tip: add an extra to your element as a fallback, in case that your end user uses a browser that doesn’t support your primary file format:

audio controls> source src="your-audio-file.wav" type="audio/wav" /> source src="your-audio-file.mp3" type="audio/mpeg" /> audio>

Now if the end user’s browser doesn’t support the WAV format, it will play the MP3 source instead.

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Источник

Урок 14. Как вставить аудио или музыку на сайт в html

1. Как вставить аудио (музыку) на сайт в html
2. Как установить фоновую музыку в html

Как вставить аудио (музыку) на сайт в html

Данный вопрос встречается очень часто, поэтому я решил ещё в уроках посвятить ему отдельную статью. Поскольку для проигрывания аудио универсальной технологии для всех браузеров у HTML нет, то для решения этой проблемы предлагаю скачать файл аудио проигрывателя, как и делается на большинстве сайтов. Делаем всё по шагам:

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

2. Далее нужно скачать файлы плеера .

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

4. Остаётся только вставить код подключения плеера. Он подойдёт для любого сайта В нужном месте следует только указать путь к файлу плеера и аудио файлу, соответственно заменив слова ваш_домен и название_аудио_файла:

И всё готово! Можете посмотреть и работу примера.

Как установить фоновую музыку в html

Использую возможности HTML и браузера, можно также вставить на страницу фоновую музыку. Вам понадобится аудио файл нужного формата: WAV, AU, MIDI или MP3. Можете в качестве примера использовать любой файл с указанным расширением.

Первый способ — это тег embed. Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Синтаксис довольно-таки прост:

Закрывающий тег не требуется.

Теперь смотрим пример записи с атрибутами, а ниже с их расшифровкой:

Атрибуты тега embed для проигрывания аудио в html
width — ширина панели в пикселях (или процентах)
height — высота панели в пикселях (или процентах)
align — расположение панели относительно текста, возможные значения left, right, center
hidden — позволяет скрыть панель, значения аттрибута: true — панель скрыта, false — панель видима (значение по умолчанию)
autostart — значение true — проигрыватель стартует автоматически при загрузке страницы, false — ждет нажатия на кнопку воспроизведение
loop — цикл, true — трэк проигрываться по кругу, а при значении false — только один раз

Если значением будет число, то Mozilla Firefox проиграет мелодию указанное количество раз, для Explorer’а числовое значение равносильно значению true.

Второй способ. Очень старый, но тоже практичный) Добавьте мелодию в ту же папку (директорию), где лежит Ваш файл, а в body пропишите следующий код:

В результате после загрузки страницы будет звучать указанная Вами в теге bgsound мелодия. Теперь рассмотрим лучше атрибуты тега :

src — путь к Вашему аудиофайлу
loop — сколько раз мелодию повторить ( если -1, то повторяется бесконечно)
balance — значение стереобаланса (от -10000 до 10000)
volume — громкость проигрывания мелодии, где 0 максимум, а -10000 минимум.

Однако не будет возможности как-либо контролировать проигрыватель — при каждом обновлении страницы трек будет проигрываться заново.

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

Вставка аудио и музыки в HTML5 — тег audio

audio — парный тег, определяющий фоновый звук, музыку или другой аудио поток на сайте.

Для каждого браузера проигрыватель и панель управления может отличаться. Для некоторых браузеров, например FF, нужно загружать ogg-файл, для остальных mp3.

Атрибуты тега audio

autoplay— файл проигрывается сразу при загрузке страницы (аналогично фоновой музыке bgsound)
controls — отобразить панель управления плеера в браузере
loop — проигрывает файл заново после его окончания
preload — загрузка аудио файла произойдёт вместе с загрузкой страницы
src — путь к аудио файлу (mp3 или ogg)

Пример кода с тегом audio

 
 
 
 
 
 
 
Аудио в HTML 5
 
 
 

Теперь смотрим работу тега audio в Вашем браузере:

Спасибо за внимание! В следующем уроке рассмотрим вставку видео!)

Источник