p5.js MediaElement onended() 方法

简介

在p5.js中，我们可以使用MediaElement类来处理音频和视频。onended()方法是MediaElement类中的一个回调函数，该方法将在媒体播放结束时被调用。developer.mozilla.org上对onended()方法的定义为：

当媒体播放结束时触发的事件。

因此，我们可以在onended()方法中编写一些逻辑，以便在媒体播放结束时触发。

用法

p5.js提供了onended()方法，使我们可以在媒体播放结束时执行一个回调函数。onended()方法可以在加载MediaElement时使用，例如：

let myMediaElement;

function setup() {
  createCanvas(400, 400);
  myMediaElement = createVideo("myVideo.mp4", onLoad);
  myMediaElement.showControls();
  myMediaElement.onended(myMediaEnded);
}

function onLoad() {
  myMediaElement.play();
}

function myMediaEnded() {
  console.log("Media ended!");
}

在这个例子中，我们创建了一个视频元素，并在onLoad回调函数中播放它。在创建视频元素时，我们附加了onended()回调函数。当视频播放结束时，myMediaEnded()回调函数将被调用，这个函数将输出“Media ended!”到浏览器控制台中。

示例

让我们来看一个更实际的例子，假设我们想在播放完一段音乐后自动播放下一首歌曲。我们可以使用onended()方法来实现这个功能，例如：

let mySound1, mySound2;

function preload() {
  mySound1 = loadSound("song1.mp3");
  mySound2 = loadSound("song2.mp3");
}

function setup() {
  createCanvas(400, 400);
  mySound1.onended(playNextSong);
  mySound1.play();
}

function playNextSong() {
  mySound2.play();
}

在这个例子中，我们预加载了两首歌曲，并设置了mySound1的onended()回调函数。当第一首歌曲播放结束后，playNextSong()函数将被调用，播放第二首歌曲。

总结

p5.js的MediaElement类提供了onended()回调函数，使我们能够在媒体播放结束时执行一个回调函数。该方法简单易用，可以让我们在处理音频和视频的开发中更加灵活。