p5.js | addCue()函数

简介

addCue() 函数是 p5.js 库中的一个方法，用于为 video 和 audio 元素添加文本轨道或元数据。文本轨道可以添加字幕，元数据可以存储任意数据（注意，只有某些浏览器才支持）。

该函数使用 HTML5 Web API addCue() 来完成。它可以使用两种模式，一种为 text 模式，用于添加文本轨道，另一种为 metadata 模式，用于添加元数据。

语法

createVideo().addCue(time, callback [, value, value, ...]);
createAudio().addCue(time, callback [, value, value, ...]);

参数

• time：轨道的时间点，单位为秒。
• callback：回调函数，轨道指定时间处执行。
• value（可选）：传递给回调函数的参数。

返回值

无返回值。

示例

添加文本轨道：

let video;

function setup() {
  video = createVideo('video.mp4');
  video.hide();
  video.addCue(10, showSubtitle, '这是第一段字幕');
  video.addCue(15, showSubtitle, '这是第二段字幕');
  video.addCue(20, showSubtitle, '这是第三段字幕');
}

function showSubtitle(value) {
  // 自定义你的字幕显示逻辑
  console.log(value);
}

function draw() {
  // ...
}

添加元数据：

let audio;

function setup() {
  audio = createAudio('audio.mp3');
  audio.addCue(10, showMetadata, { 'title': '这是标题', 'author': '这是作者' });
}

function showMetadata(metadata) {
  // 自定义你的元数据处理逻辑
  console.log(metadata.title);
  console.log(metadata.author);
}

function draw() {
  // ...
}

注意事项

• 本函数只适用于 p5.js 创建的 video 和 audio 元素。

• 某些浏览器对 metadata 的支持存在差异，如 Chrome 和 Firefox 支持，但 Safari 不支持。

• 在文本轨道中，文本的参数值会作为回调函数的第一个参数传递给该函数。如果您在添加轨道时未指定值，则该参数仍将作为 null （和 JavaScript 中的 undefined 一样）传递，函数应相应地处理。

• 回调函数可以是命名函数或匿名函数。