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, W3CSchool summarizes the problems and solutions for you.

Using plug-ins

A browser plug-in is 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). Depending on the type, they are Will be displayed by the browser, but also by external plug-ins.

Use the element

tag to define a container for external (non-HTML) content. (This is an HTML5 tag, illegal in HTML4, but valid in all browsers).

The following code snippet displays an MP3 file embedded in a web page:

Example

  php中文网(php.cn) 如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。或者你没有打开扬声器。

Run Example»

Click" Run Instance" button to view the online instance

Problem: The

  • tag is invalid 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.

Using the element the

tag can also define a container for external (non-HTML) content.

The following code snippet displays an MP3 file embedded in a web page:

Example

  php中文网(php.cn) 如果你无法听到该音频，那么可能你的电脑或浏览器不支持该文件格式。或者你没有打开扬声器。

Run Example»

Click the "Run Instance" button to view the online instance

Question:

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

Using the HTML5

HTML5

The

Below we will use the

Instance

  php中文网(php.cn)       您的浏览器不支持该音频格式。

Run Instance»

Click the "Run Example" button to view the online example

Problem: The

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

The best HTML solution

The example below uses two different audio formats. The HTML5

Instance

  php中文网(php.cn)

Run Instance»

Click the "Run Instance" button to view the online instance

Question:

  • #You must convert the audio 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

Using Yahoo Media 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 just add a line of code to your page or You can easily make your HTML page into Professional playlist:

Examples

  php中文网(php.cn) Play mp3Play wav