Why do you need music on the site?

A rather interesting question, play music or voice files on the site, or the built-in player helps site visitors to relax, causes positive emotions and sets up to the desired way, so to speak facilitates interaction with the site. But these effects work only when the music on the site is chosen correctly and the sound volume does not exceed the permissible limits, otherwise all your efforts will be in vain and will cause negative emotions from site visitors.

How to insert audio (music) to the site in HTML?

We often ask such a question, music on the site is a relevant and creative element, and there are many ways to reproduce it and they are not so difficult to implement. Let's start with the fact that each user of the global network uses any browser to access the Internet, and there is no general and universal technology to play sound and music files, each browser works in its own algorithms and they are somewhat different from each other, so when playing music from The help of the introduction in HTML page code may arise. But as you know, all problems are solved!

Insert music to HTML, JavaScript, jQuery, Ajax methods:

1 way.

Creating a music player audio on the website or player

The technology is simple, the player file is created so that it does not load the site or server choose the technology that we will use: JavaScript, jQuery, Ajax. Based on the selected technology, we develop a script for our site and insert to the site. The script is created depending on what you need: automatic reproduction of background music on the site or user-driven player. Next, create a folder at the root of the site for music and load audio files into it.

Or as an alternative compatisfaction, you can create a player on flash technology (Flash), such a player will look more effectively. The truth will be more expensive and harder for the site (will increase the time for downloading the pages of the site).

2 way.

Installing music to the site using HTML

Using HTML and browser capabilities can be inserted to the site player or background music. The technology is as simple: HTML5 code is created with the "Audio" tag and this code is written to the site, and when the user enters the site, it sees a minimized player, the visitor clicks the Play button or automatically begins to play background music. The view of the player will depend on the browser from which the visitor came, but the functionality will remain standard: the PLAY, STOP, NEXT, PREV, VOLUME buttons. Looks like a player with HTML code like this:

Cam code to insert looks like this:

As you could notice the "Controls AutoPlay" command includes music playback as soon as the visitor comes to the site.

An alternative version of HTML code is the "BGSOUND" tag, it does not use a visual player at all, when visiting the site starts playing music on the site, but adjust the volume, put on a pause, etc. The user will not be able. Setting the sound file playback is configured in the code itself.

The formats of sound files for playing music on the site can be: WAV, AU, MIDI, MP3, OGG (extensions). Music files are loaded to the site, or links to those sites where the sound file is located, the main thing is that it is in the open access.

How often did you have to look for the music you like online? That is the one you heard on your favorite site (social networks, music portals). It often happens that it is simply not else.
Mate "seekers" will say that it is not. But let's consider the average user whose knowledge of technologies does not allow the "digging" in the source code of the page or cache.

It so happened that most of my friends are just such users. Here for them and it was decided to write this expansion of chromium (and the like).

What can

• Download any audio file from any site (MP3, WAV)
• Correctly determines the original name
• Shows duration, size and bit rate
• Download on the same page as a track (without redirect)
• Preview File

Try the extension from the Chrome store

Some pictures and video:

I will be happy with a healthy criticism. I hope someone will be useful to this expansion.
If interested, then in the near future I will publish an overview in the source in another hub and lay out on GitHub.
Also in the plans to port in Firefox and IE.

P.S\u003e The possibility of downloading video is also there, but at the moment it is turned off (there are small problems with streaming video).

HTML language
Inserting sound and video

Sound insert. Tag
Adds, reproduces and controls the audio recordings on a web page. The path to the file is set via the attribute sRC or nested tag .

Syntax:

Some

Tag Attributes

autoPlay - the sound starts to play immediately after loading the page;

controls. - adds control panel to audio file;

loop. - repeats sound reproduction from the beginning after its completion;

preload. - Used to download the file along with the download of the web page;

sRC

The closing tag is curative.
Inside container

Example:

Insert video. Tag
Adds, reproduces and controls the video settings on a web page. The path to the file is set via the attribute sRC or nested tag .

Syntax:

Some Elements can be associated with various files. The browser will use the first launched format.

Tag Attributes

autoPlay - video starts playing automatically after page loading;

controls. - adds the control panel to the video;

loop. - repeats video playback from the beginning after its completion;

height - Specifies the height of the area to play the video;

width. - Specifies the width of the area to play the video;

preload. - Used to download video along with the download of the web page;

sRC - Specifies the path to the playable file.

The closing tag is curative.
Inside container

Example:

The result of the example in the browser:

Music on the site is rather rare than the norm. By inserting music to the site, you need to understand that some users it can and push off at all. In this article, we will look at several options inserting music to the site, as well as consider how to make background music.

How to insert background music to the site

Inserting background music on the site is the most dangerous option in terms of losing visitors. Because the background music is not enough that it is impossible to turn off, so it is also not adjustable to the volume (it all depends on the current volume on the computer). So you need to think a hundred times before inserting background music.

There are two ways to insert music in HTML

Option 1. via HTML tag

Syntax for inserting background music

Taga There are several attributes:

• loop \u003d "value" - the number of music repetitions (if -1, then repeated infinitely)
• balance \u003d "value" - stereo balance (from -5000 to 10,000)
• volume \u003d "Value" - Volume (0 maximum, -10000 minimum)

Music will play automatically when downloading the page.

for example

Option 2. Through the tag

Syntax for inserting an object with music

Taga It is possible to use the following attributes:

• width \u003d "value" - width (in pixels or percent)
• height \u003d "Value" - Height (in pixels or percentage)
• align \u003d "Value" - Alignment (Left - Left, Right - right, center - center)
• hidden \u003d "value" - the visibility of the panel (TRUE - Hide, False - Show), the default panel is visible
• autostart \u003d "Value" - play music when loading (True - Yes, False - no)
• loop \u003d "value" - value True - play in a circle, false - once

for example

Each browser will look like a regular player in different ways, so we will not consider each of them separately.

In HTML5 you can use the tag

Meaning of tag

Syntax tag

The following attributes can be used:

• autoPlay \u003d "Value" - Enable music immediately when downloading a page
• controls \u003d "Value" - Display the player control panel in the browser
• loop \u003d "meaning" - responsible for cyclical
• preload \u003d "Value" - download music immediately with page download

The considered options in my opinion are not ideal solutions, since all are based on regular players. Each browser will have its own default player, and in some it can not work at all. Therefore, it is best to download the player to your site and download music from it. This player will have a stop function, volume settings, etc. - All the necessary set for a simple user.

This question is found very often, so I decided to devote a separate article in the lessons in the lessons. Since to play audio universal technology for all browsers, HTML does not have, then to solve this problem, I propose to download the audio player file, as is done on most sites. We do everything in steps:

1. On hosting, where your site is located in the root directory (folder where the index file), match the Audio folder. In the future, you will place all audio files.

3. Now select the desired files, better in MP3 format. Create folder audio. At the root of the site and download them.

4. It remains only to insert the player connection code. It will suit any site in the right place. You should only specify the path to the player file and the audio file, respectively, replacing the words your_Domen and name_Audio_File:

And everything is ready! You can see and work. example.

How to install background music in html

I use the capabilities of HTML and browser, you can also insert the background music to the page. You will need an audio file of the desired format: WAV, AU, MIDI or MP3. You can use any file with the specified extension as an example.

First method - This is the Embed tag. Embed item is used to download and display objects (for example, video files, flash rollers, some sound files, etc.) that the browser does not understand.

The syntax is pretty simple:

The closing tag is not required.

Now we see an example of writing with attributes, and below with their decoding:

Attributes Embed tag to play audio in HTML
Width - panel width in pixels (or percentage)
Height - Height of the panel in pixels (or percent)
Align - Location of the panel relative to text, Possible LEFT, RIGHT, CENTER
Hidden - allows you to hide the panel, attribute values: True - panel is hidden, false - Panel visible (default value)
Autostart - True - the player starts automatically when the page is loaded, False is waiting for the playback button
Loop - cycle, True - track play in a circle, and with False value - only once

The second way. Very old, but also practical) Add a melody to the same folder (directory), where your file is lying, and in Body, you will write the following code:

As a result, after loading the page will sound the melody specified in the BGSOUND tag. Now consider better attributes tag :

sRC - path to your audio file
loop. - How many times can repeat the melody (if -1, then repeated infinitely)
balance - value of stereo balance (from -5000 to 10,000)
vOLUME. - Volume loudness melody, where 0 maximum, and -10000 minimum.

However, it will not be possible to somehow control the player - each time the page is updated, the track will be played again.

After describing the method of inserting background music, I want to dissuade you from this, since most users at the time of visiting various sites are already listening to music. Therefore, passing musical accompaniment can only make it close to close the tab with the site.

Insert audio and music in HTML5 - Tag Audio

audio. - A pair tag that defines background sound, music or other audio stream on the site.

Attributes Tag Audio.

autoPlay- The file is played immediately when loading the page (similar to the background music BGSOUND)
controls. - Display the player control panel in the browser
loop. - loses the file re-after its end
preload. - download audio file will occur with the download page
sRC - path to audio file (MP3 or OGG)

Sample code tagged with Audio

Audio in HTML 5