HTML Background Music

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

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

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

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

< 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
Обращаю внимание, что нецелесообразно включать музыку (звук) без разрешения пользователя.

Источник

How To Add Background Music In HTML (Very Simple Examples)

Welcome to a short tutorial on how to add background music in HTML.

The fastest way to add background music to a website is to insert an audio tag at the bottom of the page – .

Yep, it’s that simple, but there are still a couple of things to take note of – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming .

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

AUDIO MECHANICS

All right, let us now get into more details on the mechanics of the audio background music.

1) BACKGROUND MUSIC EXAMPLE

     
Contents here as usual.
 

• Just use the tag, but try to place it near to the bottom of the page – So that the audio loads last and users don’t have to stare at an empty page for long; Let the text and images load first.
• The autoplay property should be self-explanatory – Automatically start playing when the audio file is loaded.
• The loop property as well… Automatically loop when the audio has ended.

2) PLAYING MULTIPLE SONGS

Sadly, there is no quick-and-dirty way to create a playlist in HTML. A little bit of Javascript is required in this case:

1. The usual tag with slightly different properties – Here, we set it to autoplay only, and give it an id .
2. In the Javascript, we get the HTML tag, and define a playlist .
3. When the current song has ended, we simply play the next one; When there are no more songs in the playlist, we loop back to the first song.

SUPPORTED FILE FORMATS

The above examples only used the widely supported mp3 file format, but please take note it is also OK to use the many other audio file formats – wav, ogg, webm, flac . But the support of each file format varies from browser to browser – Check out this table on Wikipedia on the supported audio coding formats.

AUTOPLAY IS NOT REALLY RELIABLE

Nope, please don’t get me wrong. The HTML tag is widely supported in all modern browsers, and it should play just fine so long as the user is on a WIFI connection… Meaning, the problem comes when users are on mobile devices or slow/unstable connection.

Every browser will deal with autoplay differently – If the user is on a mobile device, the autoplay will most likely be ignored and not play. Also, users can set the browser to ignore autoplay totally.

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

A NOTE ABOUT &

If you have been poking around the Internet, you might spot some tutorials using and . Please do not use those anymore – They are deprecated and outdated. Stick with the modern instead.

BACKGROUND MUSIC – NOT A GOOD IDEA?

• Audio files will slow down the loading of the website.
• It is not really reliable in any case… It can be totally ignored by the browsers, or by the user’s setting.
• Intrusive. Imagine being in a quiet office or library, and the page suddenly plays loud music.
• Annoying. The user is listening to something else, and the background music on the page just crosses over.

So yep, not a good idea. Just don’t include any background music, unless it is absolutely required for a good reason.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

Background song in 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-страницы 

Источник

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 😊

Источник