How to play and control JavaScript audio/video files

We will show you how to use JavaScript to play and control audio/video files using the audio and video tags, which are new features of HTML5.

How can I play audio/video files with JavaScript?

There are ways to use the audio and video tags, which are new features of HTML5, and ways to control the audio and video tags with JavaScript.

What are the new features of HTML5, the audio and video tags?

　The HTML5 <audio> and <video> tags are new tags for playing audio and video on web pages . These tags are popular as a simpler, easier-to-use, and cross-platform alternative to traditional embed and object tags.

　Specifically, the <audio> tag is used to play audio files, and the <video> tag is used to play video files. These tags leverage the browser’s playback capabilities to play video and audio files. Additionally, with the standardization of HTML5, many browsers now support this feature.

The <audio> and <video> tags can specify the file path using the src attribute. You can also use the autoplay attribute to autoplay. Additionally, the <video> tag allows you to specify the size of the video using the width and height attributes.

　In this way, the <audio> and <video> tags are new tags that allow you to easily play audio and video on web pages. By using these tags, you can develop cross-platform web applications more easily than before.

Explanation using a sample program

Below is a sample program using the <audio> and <video> tags.

<!-- <audio>Sample program for audio playback using tags -->
<audio src="audio.mp3" controls></audio>

<!-- <video>Sample program for video playback using tags -->
<video src="video.mp4" controls width="640" height="360"></video>

The above code uses the <audio> tag to play an audio file called audio.mp3. Also, by specifying the controls attribute, built-in playback controls are displayed.

Similarly, the <video> tag is used to play a video file called video.mp4. Additionally, we are using the width and height attributes to specify the size of the video.

In this way, by using the <audio> and <video> tags, you can easily play audio and video using the new features of HTML5.

How to control audio and video tags in JavaScript

This section explains how to control the <audio> tag and <video> tag using JavaScript. Some typical control methods are introduced below.

Play/Stop/Pause

To play an <audio> tag or <video> tag, use the play() method. On the other hand, if you want to stop it, use the stop() method. To pause, use the pause() method.

// <audio>When controlling tags
const audio = new Audio('audio.mp3');
audio.play(); 
audio.pause();
audio.stop(); 

// <video>When controlling tags
const video = document.querySelector('video');
video.play();
video.pause(); 
video.stop();

Volume adjustment

To adjust the volume of the <audio> tag or <video> tag, use the volume property. Values ​​range from 0.0 to 1.0, with 0.0 being mute and 1.0 being maximum volume.

// <audio>When controlling tags
const audio = new Audio('audio.mp3');
audio.volume = 0.5; // Volume set to 50%.

// <video>When controlling tags
const video = document.querySelector('video');
video.volume = 0.5; // Volume set to 50%.

Monitoring events

For <audio> and <video> tags, events occur when playback starts or ends. You can monitor these events using JavaScript.

// <audio>When controlling tags
const audio = new Audio('audio.mp3');
audio.addEventListener('play', () => {
  console.log('Playback has started.');
});
audio.addEventListener('ended', () => {
  console.log('Playback has been completed.');
});

// <video>When controlling tags
const video = document.querySelector('video');
video.addEventListener('play', () => {
  console.log('Playback has started.');
});
video.addEventListener('ended', () => {
  console.log('Playback has been completed.');
});

This is how to control <audio> and <video> tags using JavaScript. By making full use of these methods, you can develop more advanced audio and video applications.

summary

We explained how to use JavaScript to play and control audio/video files using the audio and video tags, which are new features of HTML5.

You now understand how to play audio and video on a web page using the <audio> and <video> tags.

This time, we explained how to control the <audio> and <video> tags using JavaScript. 
Playing video and audio is one of the important functions in web applications.

If the file to be played is large, it is important to choose the appropriate codec, compression format, etc. so that the user can play it comfortably.