在vue中显示歌曲的当前时间

我想知道如何才能让时间不断地更新。所以当我按下播放按钮时,秒数开始从0:00自动更新到结束,因为现在它只是在点击时更新。我正在尝试使用HTML5音频,我已经成功地从这行代码中获得了时间更新的标签。

sound.ontimeupdate = function () { document.getElementById('Time').innerHTML = sound.currentTime.toFixed() }

但这不是我所需要的,我想让data()中的时间属性得到更新,并显示在标签中,如我的HTML代码所示。

我试着添加了一个事件监听器,但没有成功……。它被调用,每次调用都被记录在 console.log 中,但时间属性没有更新。

let sound = null
export default {
  data () {
    return {
      isPlaying: false,
      time: 0,
      duration: 0
    }
  },
  methods: {
    playMusic () {
      if (!sound) {
        sound = new Audio(require('assets/YES.mp3'))
      }
      this.isPlaying = true
      sound.play()
      // sound.addEventListener('timeupdate', function () { this.time = sound.currentTime.toFixed() })   -- did not work

      this.time = sound.currentTime.toFixed()
    }

Html。

<label id="Time" @timeupdate>
    { { time } }:{ { duration } }
</label>

解决方案:

在你的内心 addEventListener 你会得到不同 this 比你想象的要好。

要么使用 fat arrow

sound.addEventListener('timeupdate', () => this.time = sound.currentTime.toFixed() )

或者,老办法,保存 this

let that = this
sound.addEventListener('timeupdate', function () { that.time = sound.currentTime.toFixed() })

给TA打赏
共{{data.count}}人
人已打赏
未分类

让target_compile_definitions适用于静态库,这些静态库在

2022-9-8 6:03:18

未分类

64位x86中MOVZX r32、rm16与MOVZX r64、rm16的区别。

2022-9-8 6:03:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索