vue下的audio标签播放、暂停、完成事件

@play、@pause、@ended都是自带的事件，一开始不知道整了半天

<div >  <audio controls autoplay @play="play" @pause="pause"  @ended="audioEnded" :src="require('@/assets/Listen_material/'+imgANDaudioIndex+'.mp3')" ></audio></div>

js部分

methods:{play(){this.isPlaying=true;console.log("running~")},pause(){this.isPlaying=false;console.log("stop!")},audioEnded(){console.log('end')Toast.success('任务完成！');setTimeout(() => {this.$router.go(-1)}, 2000);  },},

vue下的audio标签播放、暂停、完成事件相关推荐

HTML5 audio 标签播放事件流程
此代码包括了html5 audio 标签整个播放流程. 你可以暂停,调整音量,拖动进度条观察一下 var audio = new Audio(); document.body.appendChi ...
微信小程序web-view使用audio标签播放音频文件时无法自动播放的问题
重点: 这个解决方法仍然最少还是需要点击一次才可以, 完全不点击就自动播放的方法暂时还是没有找到 1. 背景我要实现的功能是语音导航, 需要将导航的信息通过文字转换成语音, 然后播放出来. 现在就差 ...
vue中使用video标签播放FLV总结
Audio/Video 标签属性及自定义(进度条.播放.快进.全屏) - SeaJson - 博客园 (cnblogs.com) //全屏按钮video::-webkit-media-controls ...
vue使用原生video标签播放视频
页面效果如下图如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性添加了以后会自动播放但是没有声音怎么 ...
原生js实现播放器操作（随机播放、上/下一首、播放/暂停）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
chorme vue中使用audio自动播放问题
我这里是将audio文件放在static文件夹中,vue页面中直接引用: <audio class="audio" src="./static/audio/alar ...
html在线播放mp4文件,关于使用Html audio标签播放视频文件的问题
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Html 标签的使用,如果不考虑浏览器兼容,无非就是路径设置的问题导致 ...
audio标签播放音频二进制文件
网页上放一个audio元素 <audio id="aud"></audio> 将这个元素的src属性绑定数据流 websocket.onmessage = ...
vue.js使用audio标签实现聊天语音条组件
效果演示 <template><div class="audio__wrap"><audio controls :src="src" ...

vue下的audio标签播放、暂停、完成事件

vue下的audio标签播放、暂停、完成事件相关推荐

最新文章

热门文章