p5.js | clearCues()函数

在p5.js中，clearCues()是用于清除音频/视频流上的所有文本和ID3元数据轨道提示的函数。该函数的语法如下：

mediaElement.clearCues()

语法说明

想要使用clearCues()函数，必须进行以下步骤：

1. 创建一个HTML5的音频或视频元素并将其绑定到p5.js sketch实例。你可以通过调用createAudio()或createVideo()函数并传进一个可播放的音频/视频文件路径来创建它。
2. 对其进行配置，如：将其播放等。
3. 在合适的时候（例如在用户点击“停止播放”按钮时），使用clearCues()函数清除所有的文本和ID3元数据轨道提示。

使用案例

以下是一个简单的使用案例，它将在音频播放器上播放某个音频，并向用户展示该音频播放的进度，然后在用户停止播放时清除所有轨道提示：

let myAudio;

function setup() {
  createCanvas(400, 400);
  myAudio = createAudio('myAudio.mp3');
  myAudio.play();
}

function draw() {
  let currentTime = myAudio.currentTime();
  let duration = myAudio.duration();
  let percentComplete = currentTime / duration;
  
  // 展示音频播放的进度
  noStroke();
  fill(255, 0, 0);
  rect(0, 0, percentComplete * width, 20);
}

function mousePressed() {
  // 停止播放并清除所有轨道提示
  myAudio.clearCues();
  myAudio.stop();
}

在上面的例子中，我们创建了一个名为myAudio的音频实例，并调用了它的play()函数来播放它。然后，在draw()函数中，我们计算了音频播放的进度并将其呈现在屏幕上。最后，在mousePressed()函数中，我们调用了clearCues()函数并将音频停止，这样就清除了所有文本和ID3元数据轨道提示。

注意事项

• clearCues()函数只适用于音频和视频流，不适用于单个音频和视频文件。
• 当你调用clearCues()函数时，它会清除音频/视频流上的所有文本和ID3元数据轨道提示。
• 如果你在播放音频或视频时使用了轨道提示（比如字幕或KS标签），则调用clearCues()函数会将它们全部清除。

相关函数

• createAudio(): 创建一个HTML5的音频元素
• createVideo(): 创建一个HTML5的视频元素
• play(): 开始播放音频/视频
• stop(): 停止播放音频/视频

参考

1. p5.js Reference
2. HTML Audio/Video DOM clearCue() Method