In HTML, you can use the embed tag to add music. You only need to add the "" code in the body area. The embed tag can be used to insert various multimedia, and the formats can be Midi, Wav, AIFF, AU, MP3, etc.

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

You can use the embed tag to add music. The tag defines embedded content, such as plug-ins.

Grammar:

embed src=url

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

Example:

The code is as follows:

<embed src="your.mid">

2. Attribute settings

1. Autoplay:

Syntax: autostart=true , false

Description: This attribute specifies whether the audio or video file will automatically play after downloading.

• true: The music file will play automatically after downloading;

• false: The music file will not play automatically after downloading.

Example:

The code is as follows:

<embed src="your.mid" autostart=true>
<embed src="your.mid" autostart=false>

2. Loop playback:

Syntax: loop=positive integer, true, false

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

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

When the attribute value is true, the audio or video file loops;

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

Example:

The code is as follows:

<embed src="your.mid" autostart=true loop=2>
 <embed src="your.mid" autostart=true loop=true>
 <embed src="your.mid" autostart=true loop=false>

3. Panel display:

Syntax: hidden=ture, no

Description: This attribute specifies whether the control panel is displayed. The default value is no.

• ture: hide the panel;

• no: show the panel.

Example:

The code is as follows:

<embed src="your.mid" hidden=ture>
 <embed src="your.mid" hidden=no>

4. Start time:

Syntax: starttime=mm:ss (min. : seconds)

Description: This attribute specifies the time when the audio or video file starts playing. If not defined, play from the beginning of the file.

Example:

The code is as follows:

<embed src="your.mid" starttime="00:10">

5. Volume size:

Syntax: volume=an integer between 0-100

Description: This attribute specifies the volume of audio or video files. If not defined, the system's own settings will be used.

Example:

The code is as follows:

<embed src="your.mid" volume="10">

6. Container attributes:

Syntax: height=# width=

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

height：控制面板的高度；
 width：控制面板的寬度。

Example:

The code is as follows:

<embed src="your.mid" height=200 width=200>

7. Container unit:

Syntax: units=pixels, en

Description : This attribute specifies the unit of height and width as pixels or en.

Example:

The code is as follows:

<embed src="your.mid" units="pixels" height=200 width=200>
 <embed src="your.mid" units="en" height=200 width=200>

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 : Only the play button is displayed;

• pausebutton: Only the pause button is displayed;

• stopbutton: Only the stop button is displayed;

• volumelever: Only the volume adjustment buttons are displayed.

Example:

The code is as follows:

<embed src="your.mid" controls=smallconsole>
 <embed src="your.mid" controls=volumelever>

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:

<embed src="your.mid" title="第一首歌">

Extended information:

WebM advocacy

Due to the licensing issues of AVC (H.264), the open source camp headed by Chrome, Firefox, and Opera began to waver in their support for AVC. Although these browsers can still support AVC, they also prefer an open source multimedia called WebM. project, which includes a new open source video codec scheme called VP8. Currently VP8 has developed to VP9. WebM as an encapsulated format has the .webm suffix and the video/webm MIME type. For audio, you can use Vorbis/Opus. From a compatibility perspective, Chrome, Firefox, and Opera are very compatible with VP8, but Safari and IE are almost unable to support it.

Open source Ogg

Ogg is almost the same as WebM, open source, and is widely supported on open source platforms. Its video encoding scheme is called Theora (developed from VP3, developed by the Xiph.org Foundation, and can be used in any packaging format), and its 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 are almost unable to support it.

Html5方案

以上的討論實際上的大前提是：視頻基于Html5的

可以看出現(xiàn)在主流的仍然是MP4(AVC)，但是為了解決“開源陣營”對AVC的搖擺不定，可以選擇利用video的多源方案，在AVC的基礎(chǔ)上額外提供對webm或ogg的支持：

<video poster="movie.jpg" controls>
        <source src="movie.webm" type=&#39;video/webm; codecs="vp8.0, vorbis"&#39;>
        <source src="movie.ogg" type=&#39;video/ogg; codecs="theora, vorbis"&#39;>
        <source src="movie.mp4" type=&#39;video/mp4; codecs="avc1.4D401E, mp4a.40.2"&#39;>
        <p>This is fallback content</p>
</video>

瀏覽器會根據(jù)自己的偏好來選擇具體加載那種格式的流媒體文件，當(dāng)然服務(wù)端必須對同一個視頻提供多種格式的支持，具體可以這么做：

1. 提供一個WebM的視頻版本（VP8+Vorbis）

2. 提供一個MP4的視頻版本（H.264+AAC(low complexity)）

3. 提供Ogg版本（Theora+Vorbis）

服務(wù)端推薦使用nginx，盡量注意MIME類型的配置正確

推薦學(xué)習(xí)：html視頻教程

The above is the detailed content of How to add music mp3 in html. For more information, please follow other related articles on the PHP Chinese website!