How to insert an audio track in html. We save audio from the Internet to files. How to set background music in html

Hi all. This is Andrey.

In this episode we will learn how to connect sound to HTML page, i.e. audio files for your website.

There are 3 embedding methods sound files.

By clicking on this link, a standard program for playing files of the specified format is automatically launched, usually this Windows Media(plays AIFF, AU, MIDI, WAV and MP3 files). This option is familiar to you, so let's move on.

Second the way is to use a container .

This container allows you to listen using playback tools displayed directly on the Web page, however, the playback control panel may look different in different browsers.

In order for this container to be displayed, a special plugin must be installed in the browser. IN Internet Explorer it is the default, but as for other browsers, not everyone may have it. Then you will have to install it.

XHTML

The src parameter is required and specifies the name of the file being played. Other parameters may not be specified. Their list is given below.

WIDTH=n— defines the width of the console in pixels.

HEIGHT=m— defines the height of the console in pixels.

AUTOSTART=TRUE|FALSE— if TRUE, playback starts automatically.

AUTOLOAD=TRUE|FALSE- if it has value FALSE, the file is not downloaded automatically.

STARTTIME="mm:ss"— playback starts from the moment specified in minutes and seconds from the beginning of the file.

REPEAT= TRUE / FALSE— allows or prohibits repeating an audio/video clip.

PLAY LOOP=Z— if you specified REPEAT-TRUE, specify the number of repetitions here instead of Z.

VOLUME=percentage— playback volume, indicated as a percentage of the maximum.

ALIGN="value"— aligns the control console in relation to the page text. Can have the values ​​CENTER, BASELINE TOP LEFT, RIGHT.

CONTROLS="value"— specifies a set of console controls. Can have the following values ​​(explained below) - CONSOLE, SMALLCONSOLE, PLAYBUTTON PAUSEBUTTON, STOPBUTTON AND VOLUMELEVER.

CONSOLE— a full set of controls.

SMALLCONSOLE— compact representation of the console. Full set of controls except pause button.

PLAYBUTTON- Play button only.

PAUSEBUTTON- only pause button.

STOPBUTTON- only a stop button. The file is then downloaded.

VOLUMELEVER- volume control only.

We figured out the parameters.

I suggest you try applying different parameters yourself and see how they work (there is nothing complicated here).

Third The way is to specify a sound file as the background sound for the page.

The syntax here is simple:

src=filename- sound file

looop=n- number of repetitions (infinite - continuously)

volume- volume (from 10000 to 0.0 - default value)

balance- balance between the left and right speakers, the value can vary from -10000 (maximum for the left channel) to 10000 (maximum for the right channel).

We have already talked about the use of HTML5 and why it is relevant today. Now let’s take a closer look at the question “How to insert audio into a website using HTML5.”

You can add music to the site using the tag audio. An example of the simplest implementation of this tag:

But again, as with video, it’s not that simple. Not all browsers support the required audio codecs. Let's look at the table:

BrowserGoogle ChromeMozilla FirefoxSafariOperaInternet Explorer
mp3 Eat No Eat No Eat
wav Eat Eat Eat Eat No
A.A.C. Eat No Eat No Eat
ogg/vorbis Eat Eat No Eat No

As can be seen from the table, the most “universal” format is .wav. However, Internet Explorer does not support it. Therefore, it is recommended to convert the audio file to several formats and use several audio codecs. The following example illustrates one way to add HTML audio to a web page:

The appearance of the audio player will depend on the browser, here, for example, is the appearance of the audio player in the Firefox browser:

AUDIO tag attributes

To the main tag attributes audio relate:

  • src- path to the audio file (can be specified separately using an embedded tag source);
  • controls- the audio control panel is displayed (play, pause, volume, etc.);
  • autoplay- plays the audio file immediately after loading the web page;
  • loop- cyclic playback;

Nested tag source may have the following attributes:

  • src- path to the audio file;
  • type- type of audio source;
  • media- type of device on which the audio file will be played (all - on all devices, tv - television, etc.);

Why do you need music on the site?

Quite an interesting question: playing music or voice files on a site, or a built-in player helps site visitors relax, evokes positive emotions and puts them in the right mood, so to speak, makes it easier to interact with the site. But these effects only work if the music on the site is selected correctly and the sound volume does not exceed acceptable limits, otherwise all your efforts will be in vain and will cause negative emotions among site visitors.

How to insert audio (music) into a website in html?

We are often asked this question; music on a website is a relevant and creative element, and there are many ways to play it and they are not so difficult to implement. Let's start with the fact that every user of the Global Network uses some kind of browser to access the Internet, and there is no general and universal technology for playing sound and music files, each browser works according to its own algorithms and they are somewhat different from each other, so when playing music with By embedding it into the HTML code of a page, problems may arise. But as you know, all problems can be solved!

Insert music into a website HTML, JavaScript, jQuery, AJAX ways:

1 way.

Creating an audio music player on a website or player

The technology is simple, a player file is created so that it does not load the site or server; we select the technology that we will use: JavaScript, jQuery, AJAX. Based on the selected technology, we develop a script for our site and insert it into the site. The script is created depending on what you need: automatic playback of background music on the site or a player controlled by the visitor. Next, create a folder in the root of the site for music and upload audio files to it.

Or, as an alternative method, you can create a player using Flash technology; such a player will look more impressive. The truth will be more expensive and harder for the site (it will increase the loading time of the site pages).

Method 2.

Installing music on a website using HTML

Using the capabilities of HTML and the browser, you can insert a player or background music into the site. The technology is just as simple: HTML5 code is created with the “audio” tag and this code is written into the site, and when the user visits the site, he sees a minimized player, the visitor presses the play button or background music automatically starts playing. The appearance of the player will depend on the browser from which the visitor came, but the functionality will remain standard: Play, Stop, Next, Prev, Volume buttons. The player with HTML code looks like this:

The embed code itself looks like this:

As you may have noticed, the "controls autoplay" command enables autoplay of music as soon as a visitor enters the site.

An alternative version of the HTML code is the "bgsound" tag, this does not use a visual player at all; when you visit the site, music on the site will start playing, but you can adjust the volume, pause, etc. the user will not be able to. The audio file playback volume setting is configured in the code itself.

Sound file formats for playing music on the site can be: WAV, AU, MIDI, MP3, OGG (extensions). Music files are uploaded to the site, or links to those sites where the sound file is located are used, the main thing is that it is in the public domain.

However, Internet content is often unique, for example, it includes not only music, but also comments from performers, interviews, all sorts of stories about creation, etc.

An incredible number of utilities have been created to download streaming content from the Internet - some of them are universal, others are “tailored” for specific services. Some programs gain access to source audio and video files and simply read them byte-by-byte from the Internet, while some can download files, load files into multiple streams, work with groups of files, etc. The stream description can be an xml file in the format ASX (for Windows Media Player) or stored in files of the RealAudio format (extensions .ra and .rm - for audio, .rv - for video), etc. Such streams are delivered not only via the standard protocols http, udb / tcp, but also via special - rtsp, mms, rtp, as well as through peer-to-peer technologies used, for example, in such a popular Internet television service as SopCast. Naturally, to play these formats, you need an appropriate client - say, Windows Media Player, VLC media player, etc. The latter, by the way, can not only play streaming content, but also save it on local drives. This is what we will use, because most resources are quite tough for him.

So, to record an online radio program or podcast in particular, you must first obtain a link to the streaming content and then enter it into the VLC player. If the site uses Windows Media Player to play audio, getting to the link will be easy. You need to right-click on the player built into the site page and select “Properties”. In the “Location” field, find the address and copy it to the clipboard. If the site uses a Flash player or a player developed on the basis of HTML5, then it is likely that you will have to rummage through the source code of the page or turn to special utilities to “rip out” links.

The next step is to convert streaming audio. Perhaps you can’t say that this operation in VLC is simple and obvious. On the contrary, it is cumbersome and confusing. Using the “Media Open URL” menu command, streaming content can be written to a file. By default, VLC is configured to play the link, and to save it to a file, you need to change the mode to “Convert” in the dialog box that opens. The dialog will change - the target file is indicated in a new window and a profile is selected (i.e., the format in which the recording will be saved). After clicking the “Start” button, the player begins copying the streaming audio to a file. He does this completely unnoticed and, in principle, is able to write for as long as he likes - this process will have to be controlled independently. Please note that when you stop and continue the conversion process, the resulting file is reset to zero. So you need to rename previously saved files.

It is quite obvious that repeating such an operation every time is very troublesome. Especially if you need to write different threads at different times. The VLC player provides a simple scheduled download tool called the VLC Configurator. It indicates what and where to write (these parameters are configured in the same way as described above) and for how long. For example, if you need to record a certain Internet radio program every day, you should set the “Repeat” and “Interval between repeats” options in the dialog. Now, after launch, the program will independently convert streaming content.

By the way, VLC will also help when converting streams, for example, ASF files into MP3, which is more familiar and understandable by pocket players. This operation can be done either manually, converting a local file each time, or automatically using a simple Powershell script, which, as you know, is included in Windows 7 and is available in earlier versions of this operating system. The script is passed several parameters - the path to the files, the file mask and, optionally, the resulting folder where the files are stored (if it is not specified, the files are written to the source directory). Inside the loop, the VLC program is called, to which parameters are sent: what to encode, where to write, and the actual encoding parameters. Once encoding is complete, VLC is unloaded from RAM. You can verify this by the last construct, which waits for the process to unload from memory. You can enter such a script in any text editor - notepad or a special “visual” editor Powershell ISE. If you save it in a file, for example convert.ps1, then it is launched with a construct like:

. convert.ps1 c:  files  music *.asf.

In conclusion, it is worth noting a few more features of the script. The Windows operating system does not automatically specify paths to programs, so the script must also specify the path to vlc.exe: in the 64-bit version - C: 'Program Files (x86)'  VideoLAN  VLC (note that lines with spaces are enclosed in quotes) and in 32-bit - C:  'Program Files'  VideoLAN  VLC  . Also, you should make sure that you leave the VLC program before running the script, otherwise the waitforexit() method will run indefinitely (due to the fact that the program called in the script will exit, but a copy of it will remain). Of course, it is also possible to process process identifiers in a script, but such a possibility will only complicate it. To solve this problem, you should simply add a force termination of all running VLC to the beginning of the script: ps vlc* | %($_.kill()). Another feature is related to the Windows 7 security system, which requires that all scripts be signed. The Set-ExecutionPolicy RemoteSigned command can help you bypass this limitation; you need to run it in Powershell as an administrator.

Script convert.ps1 on Powershell to convert streaming content to MP3

param ( $inputpath, $wildcard, $outputpath = $inputpath)

ls -path $inputpath  $wildcard | % (

write-host $outputfile

vlc -i dummy $_.fullname ¨:sout=#transcode (acodec=mp3,ab=128,channels=2):standard (access=file,mux=asf,dst=$outputfile)¨ vlc://quit

Extracting audio from FLV videos

Another example of using VLC and Powershell together is extracting audio from Flash videos in FLV format. Such video clips are stored on specialized portals, such as the well-known YouTube. Of course, Google and other video hosting owners do their best to prevent the downloading of content, but there will always be ways to bypass the protection and get the video you like...

However, the task discussed here is the following: how to extract audio from an FLV file downloaded by any known method in order, for example, to listen to it in a pocket player. Such an operation is quite within the capabilities of VLC, both in the GUI and from the command line. By the way, in the first case, you need to do almost the same set of actions as before: select the “Media - Convert/Save” command from the menu, specify the source and result files, as well as conversion parameters, i.e. the corresponding codec.

To perform manual conversion using Powershell, you need, as before, to construct a small script (let's call it flv2mp.ps1), to which the names of the source and destination folders are sent (by default, the same as the source). Its whole trick lies in the passed parameters: since a video is not required, you should use the dummy parameter, define the file parameters in the standard block, and so that the script does not bother you with pop-up windows, simply block them with the –dummy-quiet –sout option.

param($inputpath, $outputpath = $inputpath)

ls -path $inputpath  *.flv | % (

$outputfile = join-path $outputpath($_.name.replace($_.extension, '.mp3'))

write-host $outputfile

vlc $filename -I dummy --dummy-quiet --sout ¨#transcode (acodec=mp3,vcodec=dummy):standard (access=file,mux=raw,dst=’$outputfile’)¨ vlc://quit

ps vlc | %($_.waitforexit())

Music on the site is more a rarity than the norm. When inserting music onto a website, you need to understand that some users may be completely turned off by it. In this article we will look at several options for inserting music into a website, and also look at how to make background music.

How to insert background music on a website

Inserting background music on a website is the most dangerous option in terms of losing visitors. Because the background music not only cannot be turned off, but its volume cannot be adjusted in any way (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 into html

Option 1. Via html tag

Syntax for inserting background music

At the tag there are several attributes:

  • loop="value" - the number of repetitions of the music (if -1, then repeats endlessly)
  • balance="value" - stereo balance (from -10000 to 10000)
  • volume="value" - volume (0 maximum, -10000 minimum)

Music will play automatically when the page loads.

For example

Option 2. Through a tag

Syntax for inserting an object with music

At the tag The following attributes can be used:

  • width="value" - width (in pixels or percentages)
  • height="value" - height (in pixels or percentage)
  • align="value" - alignment (left - left, right - right, center - center)
  • hidden="value" - panel visibility (true - hide, false - show), by default the panel is visible
  • autostart="value" - play music when loading (true - yes, false - no)
  • loop="value" - value true - play in a circle, false - once

For example

The standard player will look different for each browser, so we will not consider each of them separately.

In html5 you can use the tag

The meaning of using the tag

Tag syntax

The following attributes can be used:

  • autoplay="value" - turn on music immediately when the page loads
  • controls="value" - display the player control panel in the browser
  • loop="value" - responsible for cyclicity
  • preload="value" - load music immediately when the page loads

The considered options, in my opinion, are not ideal solutions, since they are all based on standard players. Each browser will have its own default player, and in some it may not work at all. Therefore, it is best to download the player to your website and download music from it. Such a player will have functions for stopping, adjusting volume, etc. - all necessary set for the common user.