Vue（Nuxt）中的音频加载事件

Posted 2023-02-25

【中文标题】Vue（Nuxt）中的音频加载事件

【英文标题】：Audio loaded event in Vue (Nuxt)

【发布时间】：2021-06-11 13:30:41

【问题描述】：

我有一个基于 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 方法？

【参考方案1】：

当浏览器有足够的数据开始播放时，<audio> 元素会发出一个canplay event，而当加载完整的媒体剪辑时，canplaythrough event 可以播放到它的结束。

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

const narration = document.getElementById('explainer_nar')

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

narration.currentTime = 0
narration.play()

【参考方案2】：

这个答案有帮助吗：https://***.com/a/6313040/8816585

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

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