<audio ref="audio" @canplay="ready" @error="error"  @timeupdate="updateTime" :src="currentSong.url"></audio>
I
ready() {
this.songReady = true
}
// 当音频能够播放的时候,会触发该事件。
error() {
this.songReady = true
}
// 当发生错误时会触发该事件。比如,音频地址错误;网络不稳定请求播放地址时中断等等

II

updateTime(e) {
this.currentTime = e.target.currentTime
}
// 音频已经播放的时间[毫秒] 可读可写 。 可以修改这个时间,该变音频的播放进度 。这个毫秒值是实时更新的

<audio>音频标签的更多相关文章

  1. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

  2. HTML5之Audio音频标签学习

    HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...

  3. h5中的audio音频标签与对应的dom对象

    HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签 此标签是H ...

  4. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  5. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  6. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  7. 音频标签化2:youtube-8m项目的训练、评估与测试

    之前小程介绍了使用机器学习的办法来解决"音频标签化"的问题,并且提到了训练样本audioset跟youtube-8m的dataset,而训练模型上也提到了youtube-8m的模型 ...

  8. HTML5视音频标签参考

    本文将介绍HTML5中的视音频标签和对应的DOM对象.是相关资料的中文化版本,可以作为编写相关应用的简易中文参考手册. 一些约定 所有浏览器:指支持HTML5的常见桌面浏览器,包括IE9+.Firef ...

  9. HTML5新增的音频标签、视频标签

    我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: <audio autopla ...

随机推荐

  1. linux开启端口命令

    1. 开放端口命令: /sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT 2.保存:/etc/rc.d/init.d/iptables save ...

  2. if语句的汇编表示

    转自:https://blog.csdn.net/u011608357/article/details/22586137 demo: C语言: int max(int x,int y) { if (x ...

  3. PTA喊山

    喊山 喊山,是人双手围在嘴边成喇叭状,对着远方高山发出“喂—喂喂—喂喂喂……”的呼唤.呼唤声通过空气的传递,回荡于深谷之间,传送到人们耳中,发出约定俗成的“讯号”,达到声讯传递交流的目的.原来它是彝族 ...

  4. input file multiple 配合springmvc实现多文件上传

    .前端页面的样子 <input id="file" name="file" type="file" multiple="mu ...

  5. crawlSpider全站爬取 分布式

    # 如何提升scrapy爬取数据的效率? 推荐: 单线程加异步协程 增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings.py中修改 CONCURRENT_REQU ...

  6. mysql中的数据类型长度

    “mysql中的数据类型长度是固定的 数据类型后面改的只是展示长度 没用的 int就是四个字节 2的31次方减一是最大值 所以改这个长度没用 只能改数据类型”

  7. Computational Complexity of Fibonacci Sequence / 斐波那契数列的时空复杂度

    Fibonacci Sequence 维基百科 \(F(n) = F(n-1)+F(n-2)\),其中 \(F(0)=0, F(1)=1\),即该数列由 0 和 1 开始,之后的数字由相邻的前两项相加 ...

  8. svn服务器IP/URL地址更换,修改本地的仓库地址

    TortoiseSVN服务器ip地址修改后如何使用_windows和linux下svn切换新仓库地址的方法 windows下svn切换仓库地址 右键项目文件夹 TortoiseSVN => Re ...

  9. 吴裕雄--天生自然Numpy库学习笔记:NumPy 数据类型

    下表列举了常用 NumPy 基本类型. 名称 描述 bool_ 布尔型数据类型(True 或者 False) int_ 默认的整数类型(类似于 C 语言中的 long,int32 或 int64) i ...

  10. 电脑读取U盘总提示格式化

    参考: https://zhidao.baidu.com/question/588981499.html 1.进入命令提示符界面:在此我们需要以管理员的身份进入命令提示符界面,可以通过右击桌面左下角的 ...