The <audio> tag of HTML5 is the easiest way to add background music or audio to a web page. Its basic writing is: <audio src="your-audio-file.mp3" controls></audio>, where the controls property is used to display the playback control. 1. Supported formats include MP3, WAV, OGG, AAC and FLAC, but the compatibility of each browser is different. MP3 is supported in Chrome, Edge, Safari and the new version of Firefox. WAV is universally used on all platforms. OGG is supported by Firefox and Chrome. AAC is mainly available on Safari and iOS. FLAC is only partially supported; 2. When using it, you need to pay attention to automatic playback restrictions, cross-domain issues, file path errors and server MIME type configuration; 3. It is recommended to provide multiple formats of source files to enhance compatibility, such as including MP3 and OGG at the same time; 4. Playback behavior can be controlled through JavaScript, such as clicking the button to play audio.

The easiest way to play background music or audio on a web page is to use the HTML5 <audio></audio> tag. It does not require plug-ins, and mainstream browsers also support it, but many people find that the audio cannot be played after using it. In fact, most of the problems lie in the format.

Basic writing method: how to add an audio

The <audio></audio> element of HTML5 is very direct to use, with a basic structure like this:

 <audio src="your-audio-file.mp3" controls></audio>

After adding the controls attribute, the browser will come with controls such as play, pause, and progress bar. You can also control the playback behavior through JavaScript, such as automatic playback, mute, and loop functions.

What formats are supported? Not all formats can be used

Although <audio> is very convenient, the format it supports is not unified and different browsers are different. Several common formats are MP3, WAV, OGG, AAC, and FLAC, but not all browsers are compatible with these.

Generally speaking:

• MP3 : Chrome, Edge, Safari are all supported, and Firefox is also supported (newer version).
• WAV : Universal on the entire platform, lossless sound quality, but large files.
• OGG / Vorbis : Firefox and Chrome support, Safari also supports it, but not as common as MP3.
• AAC / M4A : mainly performs well on Safari and iOS.
• FLAC : Some browsers support, such as Chrome and Firefox, but are not recommended as the only format.

Therefore, for compatibility, it is generally recommended to provide multiple formats of source files so that the browser can choose to play:

 <audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support audio playback.
</audio>

A few points to pay attention to in actual use

Sometimes even if the format is correct, it still cannot be played. Common reasons include:

• Automatic playback restrictions : Most browsers require users to interact with the page first (such as clicking) before they can automatically play audio, especially those with sound.
• Cross-domain issue : If the audio file comes from another domain name, the server needs to set CORS permissions correctly.
• File path error : The src address is written incorrectly, which is the most common low-level error. Check whether the path is correct.
• The server MIME type configuration is incorrect : Some servers do not configure the correct MIME type, which will cause some formats to fail to load.

For example, if you want to click the button to start playing, you can write it in JS like this:

 const audio = document.querySelector('audio');
document.querySelector('#play-btn').addEventListener('click', () => {
  audio.play();
});

Which format is the most convenient way to choose?

If you only want to put one format, MP3 is the best choice for compatibility at present , especially considering the support of mainstream browsers on both mobile and desktop. However, if the target user uses Firefox or other open source browsers more often, you can consider providing the OGG version at the same time.

In short, don't rely on only one format. Prepare more sources for <audio></audio> to cover more devices and browsers. Basically that's it.

The above is the detailed content of HTML5 audio element and supported formats. For more information, please follow other related articles on the PHP Chinese website!