HTML звук на сайте

Как сделать фоновую музыку на сайте

Возник сегодня вопрос: Как без использования флеша на сайте разместить фоновую музыку и, главное, чтобы при переходе по страницам музыка не переставала проигрываться не начинала проигрываться заново?

Немного погуглив и подумав, пришел к решению: при заходе на сайт разрешении пользователя (например нажатие на кнопку «включить музыку») яваскрипт открывает и скрывает маленькое окошко, и уже в нем «играет» фоновая музыка.

Итак, непосредственно реализация:

< html >
< head >
< title >Главная страница
< script >
function openPage()
var newwin = window.open( ‘bgsound.html’ , ‘ert’ , ‘scrollbars=0, resizable=0, titlebar=1, height=20, width=320’ );
newwin.blur(); // скрываем окно с фоновой музыкой
>


< body onload ="openPage()" >
< a href ="otherpage.html" >Перейти и послушать музыку на другой странице, вдруг не играет?

* This source code was highlighted with Source Code Highlighter .

bgsoung.html — страница с фоновой музыкой

< html >
< head >
< title >Фоновая музыка (для тишины просто закройте окно)
< script >
function player()
<
// Узнаем операционную систему
var isWin = navigator.userAgent.toLowerCase().indexOf( «windows» ) != -1;
if (isWin)
<
visitorOS= «Windows» ;
>
else
<
visitorOS= «Other» ;
>

var objTypeTag = «application/x-mplayer2» ; // для Windows
if (visitorOS != «Windows» ) < objTypeTag = "audio/mpeg" >; // Для остальных ОС

* This source code was highlighted with Source Code Highlighter .

otherpage.html — какая-тот другая страница

* This source code was highlighted with Source Code Highlighter .

UPD
Обращаю внимание, что нецелесообразно включать музыку (звук) без разрешения пользователя.

Источник

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

Фоновый HTML звук для браузеров Internet Explorer и Opera:

• – определяет фоновый HTML звук, музыку на сайте. Располагается в секторе .
• src=»» – определяет url звукового файла в формате Wav или Mp3.
• loop=»» – определяет количество проигрываний.
• volume=»-1000″ – регулирует громкость звука. В данном случае обозначенная величина будет вычтена из текущего уровня громкости, установленного на компьютере пользователя.
• balance=»0″ – регулирует баланс звучания.

Внимание! Описанный выше метод внедрения фонового звука в HTML-страницу приемлем только для браузеров Internet Explorer и Opera ранних выпусков. Для современных браузеров он не подходит ⇒ музыка и звук на странице сайта не воспроизводятся! Поэтому смотрим ниже , где подробно рассмотрен кроссбраузерный способ вставки звука и музыки на сайт для всех браузеров (Opera, Firefox, Internet Explorer, Chrome).

Звук в HTML или музыка на сайте для всех браузеров

Фоновый HTML звук для Opera, Firefox, Internet Explorer, Chrome:

Размещается код в секторе .

• autostart=»» – определят будет ли музыка проигрываться автоматически при открытии интернет-станицы или нет. Возможны значения: true – да или false – нет.
• loop=»» – определяет будут ли повторяться проигрывания. Возможны значения: true – да или false – нет.
• hidden=»» – определяет будет ли скрыта панель управления плейера или нет. Возможны значения: true – да или false – нет. Если не будет, то указываются размеры панели: width=»» height=»» .

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

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

HTML формы 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 😊

Источник

Html звук на фоне

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Как сделать фоновую музыку на сайте – HTML и HTML5

Всем привет!
Сегодня я расскажу, как сделать фоновую музыку на сайте используя HTML.
Это совершенно не сложно и не нужно быть гуру, чтобы создать такой эффект на сайте.
Стоит вопрос, а нужно ли это для вашего сайта? Может, вашим пользователям или читателям этот эффект будет мешать? Или даже раздражать? Ведь, если у вас, например, обучающий сайт, то музыка будет отвлекать. Если вы делаете сайт для какой-то музыкальной группы или певца, возможно, этот эффект будет классным и в тему.

Фоновая музыка на HTML5

Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом .

* Закрывающий тег обязателен.

• « autoplay » определяет воспроизведение музыкального файла сразу же после загрузки страницы.
• « autobuffer » используется в паре с « autoplay » – определяет воспроизведение музыкального файла уже в момент загрузки страницы.
• « src » – путь к звуковому файлу.
• « controls » показывает панель управления плеером.

Фоновая музыка на HTML ( этот способ не рекомендую )

Чтобы сделать на странице сайта фоновую музыку, достаточно воспользоваться тегом .

Тег размещается между тегами .

• « Balance » — управляет балансом звука между правой и левой колонками.
  Если в значении указать « -10 000 », мелодия будет играть в левой колонке.
  Если в значении указать « 10 000 », мелодия будет играть в правой колонке.
  Если в значении указать « 0 », мелодия будет играть равномерно в обеих колонках.
• « loop » — устанавливает, сколько раз проигрывать музыкальный файл. Значение по умолчанию « -1 » бесконечный повтор.
• « src » — путь к музыкальному файлу.
• « volume » — громкость музыки. Значение « -10 000 » – минимальная громкость, а значение « 0 » – по умолчанию соответствует текущей громкости воспроизведения.

    текст HTML-страницы 

Источник