Vue (Nuxt) 中的音频加载事件

Question

我有一个基于 Nuxt 的 gsap (greensock) 动画，我试图仅在我正在加载的音轨可用时才开始播放该动画。

音频的HTML：

<audio id="explainer_nar" preload="auto">
  <source src="/audio/explainer-nar.mp3" type="audio/mpeg" />
  <source src="/audio/explainer-nar.ogg" type="audio/ogg" />
</audio>

我将 gsap 时间线存储在一个名为 gsap_anim 的方法中。在那种方法中，我使用以下方式启动上面的音频：

const narration = document.getElementById('explainer_nar')
narration.currentTime = 0
narration.play()

现在，在我的安装中，我想在开始动画之前等待音频加载，因为当我只使用以下内容时：

mounted() {
  this.gsap_anim()
}

音频未播放（可能是因为尚未加载）。

那么，在 Vue（特别是 Nuxt）中，我如何为 HTML5 音频元素设置一个监听器，以便我只在加载时播放 gsap_anim 方法？

Answer 1

这个答案有帮助吗：

此外，如果您想确定这是一个 eventListener 问题，您可以加载您的页面，然后瞄准您的浏览器 devtools 将其发送到控制台并查看 narration.play() 是否正在播放.

这样你就可以确定是因为它还没有加载还是其他问题。

Answer 2

<audio> 元素在 完整媒体剪辑加载完毕后发出 canplay event when the browser has enough data to begin playing, and the canplaythrough event 。

您可以为 canplay/canplaythrough 添加执行 GSAP 动画的事件侦听器：

const narration = document.getElementById('explainer_nar')

narration.addEventListener('canplay', () => {
  // GSAP animation code here...
})

narration.currentTime = 0
narration.play()

Vue (Nuxt) 中的音频加载事件

Audio loaded event in Vue (Nuxt)

vue.js

nuxt.js

html5-audio