HTML BASIC
HTML Introduction
HTML Getting Started
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Links
HTML Text Formatting
HTML Styles
HTML Images
HTML Tables
HTML Lists
HTML Forms
HTML Iframes
HTML ADVANCED
HTML Doctypes
HTML Layout
HTML Head
HTML Meta
HTML Scripts
HTML Entities
HTML URL
HTML URL Encode
HTML Validation
HTML5 FEATURES
HTML5 New Input Types
HTML5 Canvas
HTML5 SVG
HTML5 Audio
HTML5 Video
HTML5 Web Storage
HTML5 Application Cache
HTML5 Web Workers
HTML5 SSE
HTML5 Geolocation
HTML5 Drag & Drop
HTML5 Audio - Html5 基础教程 - IT书包
网站首页
HTML5 Audio
### Embedding Audio in HTML Document Inserting audio onto a web page was not easy before, because web browsers did not have a uniform standard for defining embedded media files like audio. In this chapter we'll demonstrates some of the many ways to embed sound in your webpage, from the use of a simple link to the use of the latest HTML5 `<audio>` element. ### Using the HTML5 audio Element The newly introduced HTML5 `<audio>` element provides a standard way to embed audio in web pages. However, the audio element is relatively new but it works in most of the modern web browsers. The following example simply inserts an audio into the HTML5 document, using the browser default set of controls, with one source defined by the `src` attribute. ```html <audio controls="controls" src="media/birds.mp3"> Your browser does not support the HTML5 Audio element. </audio> ``` An audio, using the browser default set of controls, with alternative sources. ```html <audio controls="controls"> <source src="media/birds.mp3" type="audio/mpeg"> <source src="media/birds.ogg" type="audio/ogg"> Your browser does not support the HTML5 Audio element. </audio> ``` The 'ogg' track in the above example works in Firefox, Opera and Chrome, while the same track in the 'mp3' format is added to make the audio work in Internet Explorer and Safari. ### Linking Audio Files You can make links to your audio files and play it by ticking on them. Let's try out the following example to understand how this basically works: ```html <a href="media/sea.mp3">Track 1</a> <a href="media/wind.mp3">Track 2</a> ``` ### Using the object Element The `<object>` element is used to embed different kinds of media files into an HTML document. Initially, this element was used to insert ActiveX controls, but according to the specification, an object can be any media object such as audio, video, PDF files, Flash animations or even images. The following example code embeds a simple audio file into a web page. ```html <object data="media/sea.mp3"></object> <object data="media/sea.ogg"></object> ``` <div class="callout callout-warning mb-3">Warning: The `<object>` element is not supported widely and very much depends on the type of the object that's being embedded. Other methods like HTML5 `<audio>` element or third-party HTML5 audio players could be a better choice in many cases.</div> ### Using the embed Element The <embed> element is used to embed multimedia content into an HTML document. The following code fragment embeds audio files into a web page. ```html <embed src="media/wind.mp3"> <embed src="media/wind.ogg"> ``` <div class="callout callout-warning mb-3">Warning: However the `<embed>` element is very well supported in current browsers and defined as standard in HTML5, but your audio might not played due to lack of browser support for that file format or unavailability of plugins.</div>
上一篇:
HTML5 SVG
下一篇:
HTML5 Video