简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

HTML audio

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 <object> tag or the <embed> 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 <embed> element## The
#<embed> 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: 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<embed height="50" width="100" src="horse.mp3">
    <p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
    <p>或者你没有打开扬声器。</p>
</embed>
</body>
</html>

You find an audio in mp3 format locally and replace src="horse.mp3" with your mp3 file , try opening the webpage again


Question:

##<embed> 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.

Use the <object> element

<object tag> Tags can also define containers for external (non-HTML) content.

The following code snippet can display the MP3 file embedded in the web page: 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<object height="100" width="300" data="Kalimba.mp3"></object>
<p>如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。</p>
<p>或者你没有打开扬声器。</p>
</body>
</html>

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

HTML5 The <audio> element is an HTML5 element , is illegal in HTML 4 but works in all browsers.

The <audio> element works in all modern browsers.

Below we will use the <audio> 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: 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    您的浏览器不支持该音频格式。
</audio>
</body>
</html>

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:

  • ##<audio> tag in HTML 4 is invalid. Your page fails HTML 4 validation.

  • You must convert the audio file to a different format. The

  • <audio> element does not work in older browsers.

The best HTML solution

The example below uses two different audio formats. The HTML5 <audio> element attempts to play audio as mp3 or ogg. If that fails, the code will fall back to trying the <embed> element. 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    <embed height="50" width="100" src="horse.mp3">
</audio>
</body>
</html>

Replace src with your local audio and try it

Question:

You The audio must be converted to a different format. The

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

<script src="http://mediaplayer.yahoo.com/latest"></script>

Example 

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p><a href="Kalimba.mp3">Play mp3</a></p>
<script src="http://mediaplayer.yahoo.com/latest"></script>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<h2>链接到一首歌</h2>
<p><a href="nverq.mp3">点击此处播放</a></p>
</body>
</html>

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
<embed>Define embedded objects. Deprecated in HTML4, allowed in HTML5.
<object>Define embedded objects.
<param>Define the parameters of the object.
# <video>Define a video or movie <source> defines the multimedia resource of the media element (<video> and <audio>)## Continuing Learning
||
<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"> <title>php中文网(php.cn)</title>  </head> <body> <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio> </body> </html>
submitReset Code
Previous section Next Section
Tutorial List
get help
  • 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

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)  492129 plays
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！
# <track>
Specifies the subtitles of the media element file or other file containing text (<video> and <audio>)