play

16 March, 2023

Contributors

Milsaware

@milsaware

About

The play event is triggered when a media element starts playing, either from the beginning or after having been paused. The play event can be used to listen for when a media element begins playing and execute a function in response.

The play event is commonly used with HTML audio and video elements to perform tasks such as displaying a "Now Playing" message or updating a play/pause button.

Event listener

To listen for the play event, you can use the addEventListener() method to register a callback function that will be executed when the play event is triggered:

HTML

<audio id="myAudio" src="my-audio-file.mp3"></audio>

JavaScript

const myAudio = document.getElementById("myAudio");

myAudio.addEventListener("play", () => {
    console.log("Media playback has started.");
});

Here, we use the document.getElementById() method to get a reference to the HTML audio element with an ID of "myAudio". We then register a play event listener on the myAudio element using addEventListener(). When the media playback starts, the callback function specified in the event listener is executed, which logs a message to the console.

Property

You can use the onplay property of a media element to assign a function to be executed when the media playback starts playing:

const myAudio = document.getElementById("myAudio");

myAudio.onplay = () => {
    console.log("Media playback has started.");
};

Here, we use the document.getElementById() method to get a reference to the HTML audio element with an ID of "myAudio". We then assign a function to the onplay property of the myAudio element.

When the media playback starts, the assigned function will be executed, which logs a message to the console.

Inline

You can use the onplay attribute inline in an HTML tag to assign a function to be executed when the media playback starts playing:

<audio id="myAudio" src="my-audio-file.mp3" onplay="console.log('Media playback has started.')"></audio>

Here, we have an HTML audio element with an ID of "myAudio" and an inline onplay attribute that contains a JavaScript function. The function will be executed when the media playback starts.

Using the onplay property inline can be useful for small scripts or quick prototypes, but it can quickly become cumbersome and difficult to manage for larger projects. It's generally recommended to separate your HTML, CSS, and JavaScript code into separate files.

Programmatic trigger

You can trigger the play event programmatically by using the play() method of the media element that you want to play. When the play() method is called, the media playback will start and the play event will be triggered:

HTML

<audio id="myAudio" src="my-audio-file.mp3"></audio>
<button id="playButton">Play</button>

JavaScript

const myAudio = document.getElementById("myAudio");
const playButton = document.getElementById("playButton");

playButton.addEventListener("click", () => {
    myAudio.play();
});

Here, we use the document.getElementById() method to get a reference to the HTML audio element with an ID of "myAudio" and the play button with an ID of "playButton". We then register a click event listener on the playButton element.

When the click event is triggered on the playButton, the callback function specified in the event listener is executed, which calls the play() method on the myAudio element, triggering the play event.

Overall, triggering the play event programmatically can be useful when you want to automate media playback or perform certain actions when the media playback starts.

javascript