在 vue 中构建音频播放器；如何在更改绑定后开始播放音频：src？

Posted 2023-02-25

【中文标题】在 vue 中构建音频播放器；如何在更改绑定后开始播放音频：src？

【英文标题】：Building an audioplayer in vue; how to get the audio to begin playing after changing a bound :src?

【发布时间】：2018-07-09 06:25:28

【问题描述】：

问题示例： https://jsfiddle.net/manfrin/tnszqwpd/58/（警告，加载时将开始播放音乐）。

我有一个看起来像的音频标签

  <audio 
    :src="current" 
    @timeupdate="time = $event.target.currentTime" 
    ref="audio" 
    @ended="nextTrack()" 
    autoload preload="auto" autoplay>
  </audio>

当轨道结束时，它会调用 nextTrack 来更改 src，如下所示：

nextTrack: function () 
    if (this.playlist.length > 0) 
    this.current = this.playlist.shift()
    this.$refs.audio.load()
    this.$refs.audio.play()
    this.playing = true
   else 
    this.current = "";
    this.playing = false;
  
,

当播放列表中有曲目时，它可以正常工作 -- this.current 设置为下一个曲目并开始正常播放。

但是，如果您先清除播放列表（当播放列表为空时按“下一曲目”按钮），然后添加曲目并按播放，则曲目不会开始。我在音频标签上调用play()，它仍然无法播放。

我相信这可能是因为我在设置this.current 之后立即调用this.$refs.audio.play()，所以也许vue 没有及时更新:src 以便在正确的src 上调用play()，但我试过了setTimeout 并没有修复它。此外，我认为nextTrack 在有播放列表时有效，因为设置了autoplay，而不是因为我正在调用加载/播放。

如何同时更改音频标签的 src 并使其以相同的顺序播放？

【参考方案1】：

我已经为此苦苦挣扎了几天，最后我决定发布一个 *** 问题，当然 5 分钟后我弄明白了。

由于我需要依赖我在nextTrack() 方法中设置的状态，我可以使用this.$nextTick。我的 nextTrack/play 看起来像这样：

  nextTrack: function () 
    if (this.playlist.length > 0) 
    this.current = this.playlist.shift()
    this.playing = true
    this.play()
   else 
    this.current = "";
    this.playing = false;
  
,
play: function () 
    if (!this.playing) 
    if (!this.current && this.playlist.length > 0) 
      this.$refs.audio.pause()
      this.current = this.playlist.shift()
    
    if (!this.current) 
      this.playing = false
     else 
      this.playing = true
    
    this.$nextTick(() => 
        if (this.playing) 
        this.$refs.audio.play()
      
    )
   else 
    this.$refs.audio.pause()
    this.playing = false
  
,

重要的部分是这个，特别是：

    this.$nextTick(() => 
        if (this.playing) 
        this.$refs.audio.play()
      
    )

nextTick 允许我等到 vue 处理完状态更新，然后我可以在音频参考上调用 play。

工作 jsfiddle：https://jsfiddle.net/manfrin/tnszqwpd/72/（再次，音频自动播放警告）。