Home > Article > Web Front-end > Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5

Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5

黄舟Original: 2017-01-22 11:43:591448browse

Although browsers are developing rapidly, the standards in browsers are still imperfect. In the early development of HTML4+CSS2+JS, the problem that causes many programmers a headache is browser compatibility. The same is true for audio playback. Currently, there is still no standard for playing video and audio on web pages. Now, in most browsers, audio is played through plug-ins (such as flash plug-ins). However, not all browsers have such plug-ins, which causes certain troubles for audio playback. The new HTML5 standard stipulates a standard way to include audio through the audio element. Let's take a closer look at this tag.

1. Support for audio formats

Currently, the audio element supports three audio formats

Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5

2. How to use

<!DOCTYPE html>   
<html>   
    <body>   
        <audio src="http://www2.shengda.edu.cn/ytw/gbzx/photo/bgmusic.mp3" controls="controls">  
        您的浏览器不支持该HTML5标签  
        </audio>  
    </body>   
</html>

Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5

##control attribute displays the console

is for display by browsers that do not support the audio element

To run other browsers and support it, you must use the following method

<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>

3. Attributes of the audio tag

Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5

and above It's Xiaoqiang's HTML5 mobile development road (15) - the content of audio in HTML5. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of HTML5 Video tagNext article：Detailed explanation of HTML5 Video tag

See more

Xiaoqiang’s road to HTML5 mobile development (15) - Audio in HTML5

Related articles