gpt4 book ai didi

vue.js - Vuex getter实时更新audio.currentTime状态

转载 作者:行者123 更新时间:2023-12-03 06:48:52 26 4
gpt4 key购买 nike

我想在Vuex存储中拥有音频播放器,以使用其数据输出到Vue组件中的自定义音频播放器。

在Vuex商店中,有一个播放音乐的状态属性aplayerstore.js代码:

state: {
aplayer: new Audio()
},
getters: {
getCurrentTime: state => state.aplayer.currentTime
}

在组件中,我想显示 aplayer.currentTime当前歌曲。我正在尝试通过在计算属性中使用getter getPlayer来获取它。
components.vue代码:
getCurrentTime() {
return this.$store.getters.getCurrentTime;
}

但是,当输出到模板时,当前时间冻结为0。但是,当我按“暂停”时,当前时间将正确显示。

请帮忙。

最佳答案

当观察普通对象(而Audio不是)时,Vue的效果最佳。 Vue无法检测到currentTime属性何时更改。

docs:

The object must be plain: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.



最好的解决方案是生成自己的 currentTime number属性,并在播放音频时通过使用 audio.currentTime使其值定期与 setInterval同步,并清除音频暂停的时间间隔。

关于vue.js - Vuex getter实时更新audio.currentTime状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57410904/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com