Xiaoqiang's road to HTML5 mobile development (15) - Audio in HTML5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

黄舟

Jan 22, 2017 am 11:43 AM

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

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

Copy after login

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

Copy after login

3. Attributes of the audio tag

Xiaoqiangs 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 of this Website

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