How to add music mp3 in html

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的

可以看出现在主流的仍然是MP4(AVC)，但是为了解决“开源阵营”对AVC的摇摆不定，可以选择利用video的多源方案，在AVC的基础上额外提供对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>

浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件，当然服务端必须对同一个视频提供多种格式的支持，具体可以这么做：

1. 提供一个WebM的视频版本（VP8+Vorbis）

2. 提供一个MP4的视频版本（H.264+AAC(low complexity)）

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

服务端推荐使用nginx，尽量注意MIME类型的配置正确

推荐学习：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!