<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. Multisim中'地'的问题

    1.地其实就是一个参考电压 对于示波器而言,只用连接一个探头,另一个探头默认就是连接地.

  2. casperJs的安装

    自己买了vps就是爽,想装什么就装什么.就比如说casperjs 1.首先需要安装它的运行环境phantomjs *将这个git项目clone到自己的vps上[https://github.com/a ...

  3. Hyperledger Explorer

    简介 Hyperledger Explorer is a simple, powerful, easy-to-use, well maintained, open source utility to ...

  4. 在C中测试函数运行时间

    #include <stdio.h> #include <time.h> #include <math.h> clock_t start, stop; //cloc ...

  5. 《Web安全攻防 渗透测试实战指南 》 学习笔记 (五)

    Web安全攻防 渗透测试实战指南   学习笔记 (五)   第四章 Web安全原理解析  (一) (一)SQL注入的原理 1.web应用程序对用户输入数据的合法性没有判断. 2.参数用户可控:前端传给 ...

  6. 【代码审计】VAuditDemo 前台搜索功能反射型XSS

    在 search.php中 $_GET['search']未经过任何过滤就被输出 可能存在反射型XSS

  7. 201771010135杨蓉庆 《面对对象程序设计(java)》第九周学习总结

    第7章 异常.日志.断言和调试 1.实验目的与要求 (1) 掌握java异常处理技术: (2) 了解断言的用法: (3) 了解日志的用途: (4) 掌握程序基础调试技巧: 一.理论知识 1.异常:在程 ...

  8. CentOS 7控制台屏幕分辨率问题

    我们在服务器上,很少会安装图形化界面,一般都使用字符界面的控制台.CentOS 下,控制台分辨率缺省情况下,变得很高,导致在显示器上花屏或者只能显示局部. 这是由于使用了frame buffer,好处 ...

  9. 【PAT甲级】1056 Mice and Rice (25 分)

    题意: 输入两个正整数N和M(<=1000),接着输入两行,每行N个数,第一行为每只老鼠的重量,第二行为每只老鼠出战的顺序.输出它们的名次.(按照出战顺序每M只老鼠分为一组,剩余不足M只为一组, ...

  10. [运维] 如何访问虚拟机上的 Tomcat ?

    环境: 虚拟机: VMware 15 pro    操作系统  Linux  CentOS 7 64 物理机: Windows 7 事先准备: 1: 下载 Tomcat  的压缩包  apache-t ...