HTML Audio
Sounds can be played in different ways in HTML.
Problems and Solutions
Playing audio in HTML is not easy!
You need to know a lot of tricks to ensure that your audio files work in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone) Play.
In this chapter, PHP Chinese website (php.cn) summarizes the problems and solutions for you.
Using plug-ins
A browser plug-in is a A small computer program that extends the standard functionality of your browser.
Plug-ins can be added to pages using the tag or the tag.
These tags define containers for resources (usually non-HTML resources) and, depending on the type, they Displayed by the browser and also by external plug-ins.
#Use the element ## The tag defines a container for external (non-HTML) content. (This is an HTML5 tag, illegal in HTML4, but valid in all browsers).
The following code snippet can display the MP3 file embedded in the web page:
php中文网(php.cn)
如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。
或者你没有打开扬声器。
You find an audio in mp3 format locally and replace src="horse.mp3" with your mp3 file , try opening the webpage again
Question:
##
tag is in Not valid in HTML 4. The page fails HTML 4 validation.
Different browsers have different support for audio formats.
If the browser does not support the file format, the audio cannot be played without a plug-in.
If the user's computer does not have the plug-in installed, the audio cannot be played.
If you convert the file to other formats, it still cannot be played in all browsers.
element
Tags can also define containers for external (non-HTML) content.
The following code snippet can display the MP3 file embedded in the web page:
php中文网(php.cn)
如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。
或者你没有打开扬声器。
You find an audio in mp3 format locally and replace src="horse.mp3" with your mp3 file , try opening the web page again
Question:
Different browsers support audio formats Also different.
If the browser does not support the file format, the audio cannot be played without a plug-in.
If the user's computer does not have the plug-in installed, the audio cannot be played.
If you convert the file to other formats, it still cannot be played in all browsers.
Using the HTML5 element
HTML5 The element is an HTML5 element , is illegal in HTML 4 but works in all browsers.
The element works in all modern browsers.
Below we will use the tag to describe MP3 files (valid in Internet Explorer, Chrome and Safari), Also adds an OGG type file (valid in Firefox and Opera browsers). If it fails, it will display an error text message:
php中文网(php.cn)
您的浏览器不支持该音频格式。
If your browser does not support the audio format it will output "Your The browser does not support this audio format", otherwise the opposite will be true
Question:
## tag in HTML 4 is invalid. Your page fails HTML 4 validation.
You must convert the audio file to a different format. The
element does not work in older browsers.
The best HTML solution
The example below uses two different audio formats. The HTML5 element attempts to play audio as mp3 or ogg. If that fails, the code will fall back to trying the element.
php中文网(php.cn)
Replace src with your local audio and try it
Question:
You The audio must be converted to a different format. The
element cannot fall back to display an error message.
Yahoo Media Player - A simple way to add audio to your website
Yahoo Media Player provides your users with a small play button rather than a full player. However, when you click the button, the full player will pop up.
Please note that this player is always docked at the bottom of the window frame. Just click on it and slide it out.
Using Yahoo Player is free. To use it, you need to insert this JavaScript at the bottom of your web page:
Yahoo Player can play MP3s as well as various other formats. You can easily turn your HTML pages into professional playlists by just adding a line of code to your page or blog:
Example
php中文网(php.cn)
Play mp3
Try to find an audio file
##Use hyperlink
If a web page contains a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code snippet displays a link to an mp3 file. If the user clicks the link, the browser will launch a "helper application" to play the file:
php中文网(php.cn)
链接到一首歌 点击此处播放
Find an audio file and try it
inline Description of Sound
When you include a sound in a web page, or as an integral part of a web page, it is called an inline sound.
If you plan to use inline sounds in a web application, you need to be aware that many people find inline sounds annoying. Also note that users may have turned off the inline sound option in their browser.
Our best advice is to only include inline sounds where users expect to hear them. A positive example is when a user needs to hear a recording and clicks on a link, which opens the page and plays the recording.
HTML Multimedia Tags
##HTML5 New Tag
Tag Description
Define embedded objects. Deprecated in HTML4, allowed in HTML5.
Define embedded objects.
Define the parameters of the object.
Course Recommendations
Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
#
and )
#
Specifies the subtitles of the media element file or other file containing text ( and )
##
