How to insert a music file into html. Inserting audio and video

Greetings, Friends! In this video we will continue our conversation about inserting objects into an HTML document.

After the script is connected, we must add another script to connect the player shell itself and specify the player parameters:

AudioPlayer.setup("file folder/player.swf", ( width: 290, initialvolume: 100, transparentpagebg: "yes", left: "000000", lefticon: "FFFFFF" ));

This script must also be written before the closing tag. It is worth noting that here we have indicated the width, volume, which will be automatically set during playback, and other parameters that we can change at our discretion.

After the scripts are connected, we just need to add a musical composition to the page so that it is available for listening. To do this, we will use paragraph tags, inside which we can leave information that will be displayed if the player does not appear. Let's connect another script indicating the player ID and the path to the music file. It will look something like this:

Music

Here it is also worth paying attention to the ID, which is used to display the player. It should be noted that if we want to add more than one composition to a page, we need to register a new ID for each file. For example, to add another file we will change the ID a little, something like this:

Music

AudioPlayer.embed("audioplayer_2", (soundFile: "path to folder with music file/file name.mp3"));

Well, that's basically all. Now we know how to add audio to an HTML document. Of course, there are other ways. But I think in our case this option is quite sufficient.

Video lesson: How to insert audio into an HTML document?

The HTML directory and other materials can and should be downloaded!

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 your site using the audio tag. 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:

Browser Google Chrome Mozilla Firefox Safari Opera Internet 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. But, nevertheless, it is not supported by Internet Explorer. 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:

Your browser does not support the audio tag.

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

The main attributes of the audio tag include:

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

The source subtag can have the following attributes:

  • src - path to the audio file;
  • type - audio source type;
  • media - type of device on which the audio file will be played (all - on all devices, tv - television, etc.);
This question comes up very often, so I decided to devote a separate article to it in the lessons. Since HTML does not have a universal technology for playing audio for all browsers, to solve this problem I suggest downloading the audio player file, as is done on most sites. We do everything step by step:

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

3. Now select the files you need, preferably in mp3 format. Create an audio folder in the root of the site and upload them.

4. All that remains is to insert the player connection code. It is suitable for any site. In the right place, you just need to indicate the path to the player file and audio file, respectively replacing the words your_domain and audio_file name:






And everything is ready! You can also look at the working example.

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

The first way is the embed tag. The embed element is used to load and display objects (for example, video files, flash movies, some audio files, etc.) that the browser does not initially understand.

The syntax is quite simple:

A closing tag is not required.

Now look at an example of a record with attributes, and below with their decoding:

Embed tag attributes for playing audio in html
width - panel width in pixels (or percentage)
height - panel height in pixels (or percentage)
align - position of the panel relative to the text, possible values ​​are left, right, center
hidden - allows you to hide the panel, attribute values: true - the panel is hidden, false - the panel is visible (default value)
autostart - true - the player starts automatically when the page loads, false - waits for the play button to be pressed
loop - loop, true - the track is played in a circle, and if false - only once

Second way. Very old, but also practical) Add the melody to the same folder (directory) where your file is located, and in the body write the following code:


As a result, after loading the page, the melody you specified in the bgsound tag will sound. Now let's take a better look at the tag attributes:

src - path to your audio file
loop - how many times to repeat the melody (if -1, then repeats endlessly)
balance - stereo balance value (from -10000 to 10000)
volume - melody playback volume, where 0 is the maximum, and -10000 is the minimum.

However, there will be no way to control the player in any way - every time the page is refreshed, the track will be played again.

After describing the method of inserting background music, I want to dissuade you from this, since most users, as a rule, already listen to music when they visit various sites. Therefore, accompanying music can only force him to close the tab with the site.

Inserting audio and music in HTML5 - audio tag
audio - a paired tag that defines background sound, music or other audio stream on the site.

Audio tag attributes

autoplay - the file is played immediately when the page is loaded (similar to bgsound background music)
controls - display the player control panel in the browser
loop - plays the file again after it ends
preload - the audio file will be loaded along with the page loading
src - path to the audio file (mp3 or ogg)

Example code with audio tag





Audio tag


Audio in HTML 5





The audio tag is not supported by your browser.
Download music.


I think it's time to get an answer to the question of how to insert Flash movies, video and audio files into an HTML document.
I'll show you several ways to insert a video clip or audio file.

Method 1.

Video and audio files can be inserted into an HTML document using the tag.

A closing tag is not required.

It's possible that when you check the example, your browser may require connecting to a special plugin:

The player's appearance depends on the connected plugin and tag attributes.

For example, here's Google Chrome:

Or in Internet Explorer:

EMBED attributes

height - player height (in pixels). Example:

Swf" height="100">

width - player width (in pixels). Example:

Swf" width="200">

src - address of a flash movie, video or audio file. Example:

type - specifies the MIME type (a specification for formatting messages and encoding information for transmission over the Internet) of the element's content.

pluginspage - the address of the Internet page from where you can download and install the browser plugin.

autostart - if the parameter is “0”, this means that after loading the web page, the player will be stopped. If you specify the parameter “1”, then after loading the web page, the player will be automatically played (works in the IE browser). Example:

title - displays a tooltip when you hover the mouse over an audio or video player. (Works in IE browser).

Example:

TAG embed

Result in Google Chrome:

Or you can do it like this:

TAG embed

Result in Google Chrome:

Method 2.

Images, audio, video, Java applications, ActiveX, PDF and Flash can be inserted into an HTML document using the tag.

The closing tag is required.

OBJECT attributes

data – specifies the path to the object file;
type – object type (optional). For example:

type="application/x-shockwave-flash" or type="image/png" etc.;

width – width;
height – height

You can also write text between opening tags. The written text will be displayed if the browser does not support the object element.

Example:

OBJECT tag Your browser does not support the object tag

The result of this example in a browser window if it does not support the OBJECT tag:

Method 3.

You can also insert audio into a web page using the tag:

AUDIO tag attributes

autoplay - audio plays automatically immediately after the web page loads;

controls - control panel for the audio player;

height - audio player height;

loop - repeat audio playback from the beginning after it ends;

src - path to the audio file

Example:

TAG AUDIO

Result:

You can also insert a video into a web page using the following tag:

VIDEO tag attributes

autoplay - the video plays automatically immediately after the web page loads;
controls - control panel for the video player;
height - video player height;
width - video player width;
loop - repeat playing the video from the beginning after it ends;
src - path to the video file;
poster - image address. The picture will be displayed to the user while the video is not available or playing.

  • muzicons.com - does not download files from a computer, inserting audio via direct links to the file or through the built-in search engine looks like this:
  • www.jetune.ru - fully works only for Russian users. To upload a track, you need to find on the website (without registration) or upload your artist (with registration), click on a specific track and get the player code:
  • prostopleer.com - download or search for music on the site and get the player code: Some file hosting services have audio players for mp3 files

    Typical representatives of the network fauna:

  • divshare.com Register. Click “Upload new file”, upload the track. Click on “dashboard” (above) and the file will appear. Right-click on it, select “share”, copy “Embed Playlist” and paste:
  • box.net after downloading the file (by clicking on shared) will display a link to a page for listening and downloading a file like:
    www.box.net/shared/zf1uk007vy

    2. Learning to “catch fish”

    Having understood the principle, you can forget about such services, which are often closed, delete files, change conditions, etc.
    The code for inserting music into a blog consists of two main components - a flash player (*.swf file in the form http://../player.swf) and an audio file (in the form http://../song.mp3) - the rest is HTML, that is, letters.
    It looks something like this:




    I uploaded the flash player here and got:
    http://site/wp-content/uploads/2009/06/webplayer.swf
    then loaded the track:
    http://site/wp-content/uploads/2009/06/08-caravan.mp3
    I pasted these links into the code above:

    Full code for the outrage:


    • Loading...
    Top