HTML `audio` tag

Explore the basics of using HTMLaudiolabel

ThisaudioTags allow you to embed audio content into HTML pages.

This element can stream audio, maybe the microphone can be used in the following waysgetUserMedia()Or it can play you usingsrcAttributes:

<audio src="file.mp3" />

By default, the browser does not display any controls for this element. This means that the audio will only play when it is set to autoplay (more on that later) and the user cannot see how to stop the audio, control the volume, or move on the track.

To display the built-in controls, you can addcontrolsAttributes:

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

The control can have a custom appearance.

You can use the following command to specify the MIME type of the audio filetypeAttributes. If it is not set, the browser will try to determine it automatically:

<audio src="file.mp3" controls type="audio/mpeg" />

By default, audio files will not play automatically. Add toautoplayProperties to automatically play audio:

<audio src="file.mp3" controls autoplay />

Note: Mobile browsers do not allow autoplay

ThisloopThe property (if set) will restart the audio at 0:00, otherwise, if the audio does not exist, the audio will stop at the end of the file:

<audio src="file.mp3" controls autoplay loop />

You can also play silent audio files in the following ways:mutedProperties (not sure if there is any use):

<audio src="file.mp3" controls autoplay loop muted />

CORS

Audio is subject toCORSUnless you allow it on the server side, audio files cannot be played across sources.

Preload audio

If you don't setautoplayThe specification says that the browser will only download audio metadata (for example, to find out the length), not the audio itself.

You can use the following command to force preload audio

<audio src="song.mp3" preload="auto" />

If the content is displayedaudionot support

ThisaudioThe label isVery good support, Until IE9, so there is no need to use placeholder text now, but we have this option. You only need to add a closing tag, and then insert text between the opening tag and the closing tag:

<audio src="song.mp3">Audio tag not supported</audio>

Add native controls

You can choose to have the browser display a set of controls to allow users to play audio when needed, indicate the length, set the volume, and let them browse the track, instead of automatically playing the audio in the background:

<audio src="song.mp3" controls />

This is how it looks in Chrome:

Audio element

You can use CSS to style the control, although this is beyond the scope of this introduction.

Add multiple sources

The browser can implement one audio codec, but not another. Maybe you want to use a new standard to reduce the file size by half, but you still want to support older browsers.

You can passsourcelabel:

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

Handling audio events

We can listen to every eventaudioUse JavaScript elements to create interesting projects and interfaces. There are many different events to play.

ThisplayEvent triggered when audio playback starts:

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

You can also useon<event>The attributes are placed directly on the HTML element:

<audio src="song.mp3" controls onplay="playing()" />
const playing = () => {
  alert('Audio is playing!!!')
}

These are some events you can listen to:

  • playAudio starts to play
  • pauseAudio is paused
  • endedAudio playback complete
  • timeupdateThe user interacted with the playback timeline and moved forward/backward
  • volumechangeUser changed the volume

There are more events related to audio loading, andYou can find the full list on MDN.

Download mine for freeHTML manual


More HTML tutorials: