Vue-注意音频时间变化-解网

问：

我有一个播放歌曲的音频文件。我目前正在制作一个等于歌曲长度和当前时间的滑块。你不能在 Vue 的 watch 组件中使用 player.currentTime，那么你将如何实时更新等于玩家当前时间的值。

我目前有，但只有在我暂停歌曲而不是实时更新时才会更新。v-model="player.currentTime"

这就是我目前所拥有的

player: new Audio()
this.player.src = this.songs[this.songIndex].src
this.player.play()

选手：

<input
  type="range"
  name="timeStamp"
  ref="time"
  v-model.lazy="this.player.currentTime"
  step="0.1"
  class="w-[100%] hover:cursor-pointer"
/>

vue.js vuejs3

不确定在这种情况下发出的事件是什么，但可能只是在事件或事件上触发。根据你如何实现你的播放器，如果你使用的是 Vue 特定的包，你可能需要将你的转换为更具体的东西，比如 an 或特定的东西。检查你的 Vue 开发工具是否有任何事件，或者检查元素本身，看看是否有任何监听器与之相关。v-modelblurlazyv-model@input

0赞 Mat 8/15/2022

我的播放器只是作为 player = new Audio（）存在于主应用程序组件的数据部分。我把它作为道具传递给一个子组件。我所有其他 V 模型都会实时更改，但由于某种原因，这个模型没有

1赞 kissu 8/15/2022

看这个，如果我没记错的话，看起来那个事件是。也许在播放器上尝试一下，看看它是否每秒都会带来一些东西。timeupdate@timeupdate

0赞 Mat 8/15/2022

我没有有问题的播放器元素，我只有一个播放器变量

0赞 kissu 8/15/2022

这里欢迎一些实际的代码（作为文本）。你如何在模板中显示它？不过，即使您没有 HTML 元素，它也应该以相同的方式工作。

答：

2赞 Raeisi 8/16/2022 #1

你必须听事件。我做了一个简单的示例代码：timeupdate

输出：

<template>
  <div style="border: 1px solid gray; border-radius: 5px; padding: 5px;">
    <div>
      <button @click="play">Play | Pause</button>
      {{ timeLabel }}
    </div>
    <div>
      <input
        type="range"
        :min="0"
        :max="duration"
        v-model="currentTime"
        @input="updateTime"
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseAudioPlayerTest',

  data() {
    return {
      src: 'Spring-Flowers.mp3',
      player: null,
      duration: 0,
      currentTime: 0,
      timeLabel: '00:00:00',
    };
  },

  methods: {
    play() {
      if (this.player.paused) {
        this.player.play();
        this.duration = this.player.duration;
      } else {
        this.player.pause();
      }
    },
    updateTime() {
      this.player.currentTime = this.currentTime;
    },
    timeupdate() {
      this.currentTime = this.player.currentTime;
      const hr = Math.floor(this.currentTime / 3600);
      const min = Math.floor((this.currentTime - (hr * 3600)) / 60);
      const sec = Math.floor(this.currentTime - (hr * 3600) - (min * 60));
      this.timeLabel = `${hr.toString()
        .padStart(2, '0')}:${min.toString()
        .padStart(2, '0')}:${sec.toString()
        .padStart(2, '0')}`;
    },
  },

  mounted() {
    this.player = new Audio(this.src);
    this.player.addEventListener('timeupdate', this.timeupdate, false);
  },
};
</script>

您可以在此处找到更多信息。

Vue-注意音频时间变化

Vue- watch for audio time change

评论

评论