Vue2.0之H5元素Audio属性currentTime、duration应用

需求：正在做的项目是一个SPA音乐播放器，用到了H5新加入的audio标签，同时像主流播放器一样显示当前播放歌曲的秒数和总时间；

思路：查阅API文档得知需要用到audio.currentTime和audio.duration分别表示当前播放时间和音频总时间，但如何用数据驱动的思想来使用成了第一个问题。

左思右想好像避免不了DOM操作，于是先用了dom.querySelector选中audio音频元素，再调用上面说到的2个方法来显示播放时间。

但实际操作起来并无效果，浏览器报错提示不能操作undefined对象的currentTime和duration方法；

怀疑是dom操作语句有问题，遂考虑使用ref引用来操作audio：

<p>{{ cTime }}</p>

<p>{{ dTime }}</p>

data(){

return{

cTime: null,

dTime: null

}

mounted(){

this.cTime = this.$refs.player.currentTime,

this.dTime = this.$refs.player.duration

}

如此下来倒是不报错了，但是不管audio播放到什么时候，currentTime一直是0；而音频总时间则很诡异的为NaN。

经过一番查找，第一个问题是因为挂载mounted钩子只执行了一次当前时间也就是初始时间0，并没有进行监听，所以无法一直更新；

而第二个问题是浏览器的bug，某些主流浏览器需要监听canplay属性才能得到duration。

于是增加两个监听method：

methods: {addEventListeners: function () {const self = this;self.$refs.player.addEventListener('timeupdate', self._currentTime),self.$refs.player.addEventListener('canplay', self._durationTime)},removeEventListeners: function () {const self = this;self.$refs.player.removeEventListener('timeupdate', self._currentTime)self.$refs.player.removeEventListener('canplay', self._durationTime)},_currentTime: function () {const self = this;self.timeNow = parseInt(self.$refs.player.currentTime)},_durationTime: function () {const self = this;self.timeDuration = parseInt(self.$refs.player.duration)}},mounted() {this.addEventListeners()},beforeDestroyed() {this.removeEventListeners()}

如此，便能正确监听到动态当前时间和音频总时间了。

后期只要对获取到的时间做个小处理，变成时：分：秒的形式就可以，代码很简单就不贴出来了。

至此，这个audio的坑基本解决，值得一提的是中间还尝试了Vue.nextTick方法，但在这个demo中却并不适用，

其原理是等dom更新后执行返回函数，但我们这个audio在播放中currentTime的改变并不会引发dom的更新，

所以同样不能监听到。

Vue2.0之H5元素Audio属性currentTime、duration应用相关推荐

vue2.0 结合HTML5原生Audio标签在移动端的使用实现方式，应用场景为钉钉微应用
在做vue2.0钉钉微应用项目,有需要播放音频的是需求,用阿里云sdk播放器不购买相关服务,音频有些播放不了.于是我就直接用HTML5原生的Audio标签自己写音频播放器.(业务需求:记录上次播放位置 ...
Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释
最近在用mint-ui重写一个vue.js音乐App项目,做到播放器模块,感觉挺有意思,记录一下播放器歌曲播放及歌曲切换功能实现方法及原理. 先上一张运行效果图(歌词尚未抓取.播放进度条及时间尚未开发 ...
VUE2.0搭建H5项目
1.搭建VUE2.0项目 vue create '项目名' 2.安装flexible插件(适配移动端插件) npm install lib-flexible -S 2.1 在main.js中引入fle ...
Vue2.0 $set()处理数据更新但视图不更新的问题（给对象添加属性必须用this.$set(this.data,”key”,value’)）
vue2.0 给data对象新增属性,并触发视图更新如下代码,给 student对象新增 age 属性 data () {return {student: {name: '',sex: ''}} } ...
Vue2.0 $set()的正确使用方式
vue2.0 给data对象新增属性,并触发视图更新如下代码,给 student对象新增 age 属性 data () {return {student: {name: '',sex: ''}} } ...
关于H5、CSS3新增的一些元素及属性
H5简介 HTML5是HTML最新的修订版本,具有新的元素,属性和行为. HTML5规范于2014年10月29日由万维网联盟正式宣布. 随着移动化的进程,HTML5终将成为主流. H5的新变化 H5文 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格
vue2.0+stylus实现星级评定组件,computed计算属性实现全星半星,多种星星规格使用方法如下:(size为星星的大小,score为评分,比如传4.5,则4.5颗星亮:传4.1则四颗星亮 ...

Vue2.0之H5元素Audio属性currentTime、duration应用

Vue2.0之H5元素Audio属性currentTime、duration应用相关推荐

最新文章

热门文章