Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to add music mp3 to html". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "html how to add music mp3"!

In html, you can add music using the embed tag, just add the "" code in the body area. Embed tags can be used to insert a variety of multimedia formats such as Midi, Wav, AIFF, AU, MP3, and so on.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

You can use embed tags to add music, which defines embedded content, such as plug-ins.

Syntax:

Embed src=url

Description: embed can be used to insert a variety of multimedia, the format can be Midi, Wav, AIFF, AU, MP3, etc., Netscape and the new version of IE support. Url is an audio or video file and its path, which can be relative or absolute.

Example:

The code is as follows:

Second, property setting

1. Auto playback:

Syntax: autostart=true, false

Description: this attribute specifies whether audio or video files are automatically played after downloading.

True: music files play automatically after downloading

False: music files do not play automatically after downloading.

Example:

The code is as follows:

2. Play it in a loop:

Syntax: loop= positive integers, true, false

Description: this attribute specifies whether the audio or video file is looped and the number of cycles.

When the attribute value is a positive integer value, the number of cycles of the audio or video file is the same as the positive integer value

When the property value is true, the audio or video file loops

When the property value is false, the audio or video file does not loop.

Example:

The code is as follows:

3. The panel shows:

Syntax: hidden=ture, no

Note: this property specifies whether the control panel is displayed, and the default value is no.

Ture: hiding panel

No: display panel.

Example:

The code is as follows:

4. Start time:

Syntax: starttime=mm:ss (minutes: seconds)

Description: this attribute specifies the time when the audio or video file starts playing. If not defined, it will be played from the beginning of the file.

Example:

The code is as follows:

5. Volume:

Syntax: integers between volume=0-100s

Description: this attribute specifies the volume of the audio or video file. If it is not defined, the settings of the system itself are used.

Example:

The code is as follows:

6. Container attributes:

Syntax: height=# width=#

Description: the value is a positive integer or percentage, in pixels. This property specifies the height and width of the control panel.

Height: height of the control panel; width: the width of the control panel.

Example:

The code is as follows:

7. Container units:

Syntax: units=pixels, en

Description: this property specifies that the units of height and width are pixels or en.

Example:

The code is as follows:

8. Appearance settings:

Syntax: controls=console, smallconsole, playbutton, pausebutton, stopbutton, volumelever description: this property specifies the appearance of the control panel. The default value is console.

Console: normal panel

Smallconsole: smaller panel

Playbutton: show only the play button

Pausebutton: show only the pause button

Stopbutton: show only the stop button

Volumelever: only the volume adjustment button is displayed.

Example:

The code is as follows:

9. Description text:

Syntax: title=#

Description: # is the text of the description. This attribute specifies the description text of the audio or video file.

Example:

The code is as follows:

Extended data:

The advocacy of WebM

Due to the authorization problem of AVC (H.264), the open source camp led by Chrome, Firefox and Opera began to shake their support for AVC. Although these browsers can still support AVC, they also tend to an open source multimedia project called WebM, which includes a new open source video codec scheme called VP8. At present, VP8 has developed to VP9. WebM as an encapsulated format has the suffix of .webm and the MIME type of video/webm. In terms of audio, you can use Vorbis/Opus. In terms of compatibility, the compatibility of Chrome, Firefox, Opera with VP8 is quite ideal, but Safari and IE can hardly support it.

Open source Ogg

Ogg is almost the same as WebM, open source, and is widely supported on open source platforms. Its video coding scheme is called Theora (developed by the VP3, developed by the Xiph.org Foundation and can be used in any encapsulation format), and the audio is Vorbis. The suffix is usually .ogv or .ogg, and the MIME type is video/ogg. In terms of compatibility, Chrome, Firefox, and Opera can support it (but Opera cannot support it on mobile platforms), but Safari and IE hardly support it.

Html5 scheme

The main premise of the above discussion is that the video is based on Html5. Now let's summarize the compatibility:

Codecs/container

IE

Firefox

Safari

Chrome

Opera

IPhone

Android

Theora+Vorbis+Ogg

3.5 +

5.0 +

10.5 +

H.264+AAC+MP4

9.0 +

3.0 +

5. 0 + 1

3.0 +

2.0 +

WebM

9.0 million *

4.0 +

6.0 +

10.6 +

2.3 +

* IE9 supports VP8 only if the user has installed the codec for VP8.

Classic Google Chrome announced that it would abandon H.264 in 2011, but "it hasn't been realized yet."

It can be seen that MP4 (AVC) is still the mainstream now, but in order to solve the wavering of AVC in the "open source camp", we can choose to take advantage of video's multi-source solution to provide additional support for webm or ogg on top of AVC:

This is fallback content

Browsers will choose which format of streaming media files to load according to their preferences. Of course, the server must support multiple formats for the same video. You can do this:

Provide a video version of WebM (VP8+Vorbis)

Provide a video version of MP4 (H.264+AAC (low complexity))

Ogg version is available (Theora+Vorbis)

The server is recommended to use nginx, and try to pay attention to the correct configuration of MIME type.

At this point, I believe you have a deeper understanding of "how to add music mp3 to html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.