Detailed analysis of audio in HTML5-H5 Tutorial-php.cn

Detailed analysis of audio in HTML5

寻∝梦

Release： 2018-08-13 18:21:08

Original

2091 people have browsed it

There are many new things in HTML5, which are somewhat different from the old version. This article will describe the detailed analysis of the new audio elements in HTML5

HTML5 Audio(audio)

Last modified on August 1, 2017

HTML5 provides a standard for playing audio files.

Audio on the Internet

Until now, there was no standard for playing audio on web pages.

Today, most audio is played through plug-ins (such as Flash). However, not all browsers have the same plugins.

HTML5 specifies a standard for embedding audio elements on web pages, using the

Browser support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari all support the

Note: Internet Explorer 8 and earlier IE Version does not support the

HTML5 Audio - How it works

To play audio in HTML5, you need to use the following code:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文网</title> 
</head>
<body>
<audio controls>
  <source src="/statics/demosource/horse.ogg" type="audio/ogg">
  <source src="/statics/demosource/horse.mp3" type="audio/mpeg">

Copy after login

Your browsing The processor does not support the audio element.

control properties are used to add play, pause and volume controls.

Between you need to insert the prompt text of the

The

Audio formats and browser support

Currently, the

MIME types of audio formats: MP3, Ogg, Wav ;

HTML5Audio tag:

specifies multimedia resources, which can be multiple, between

autoplay: If this attribute appears, the audio will be played immediately after it is ready.

controls: If this attribute appears, controls are displayed to the user, such as a play button.

loop: If this attribute is present, playback will restart whenever the audio ends.

preload: If this attribute appears, the audio will be loaded when the page is loaded and prepared for playback. If "autoplay" is used, this attribute is ignored.

src: URL of the audio to be played.

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

Copy after login

The above example uses an Ogg file and is suitable for Firefox, Opera and Chrome browsers.

To ensure that it works with Safari, the audio file must be of MP3 or Wav type.

The audio element allows multiple source elements. The source element can link different audio files. The browser will use the first recognized format:

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Copy after login

[Related recommendations]

The basic elements of html, allowing you to learn HTML from scratch

Parsing in HTML5

The above is the detailed content of Detailed analysis of audio in HTML5. For more information, please follow other related articles on the PHP Chinese website!