<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. 红帽RHCE培训-课程1笔记内容

    ssh -X root@s0 1.环境变量 env 系统变量名都为大写; 引用变量名对应的值时使用$引导: SHELL下,修改变量临时生效. # PS1=' # ' # echo $PS1 永久生效放 ...

  2. 使用php-vmstat遇到的麻烦

    workerman-vmstat是一个基于workerman的扩展,用于监听服务器应用对内存.cpu消耗的友好的查看功能,具体介绍可以去git上看:    https://github.com/wal ...

  3. 消息队列(四)--- RocketMQ-消息发送

    概述 RocketMQ 发送普通消息有三种 可靠同步发送 可靠异步发送 单向(oneway)发送 :只管发送,直接返回,不等待消息服务器的结果,也不注册回调函数,简单地说,就是只管发,不管信息是否发送 ...

  4. 同步I/O和异步I/O

    同步I/O包括:阻塞,非阻塞,多路复用 阻塞模型:给你送的外卖到了,给你打电话,你不去取,外卖小哥一直在那等你,直到你来,形成阻塞,当然应该给外卖小哥点赞,哈哈哈哈!! 非阻塞模型:取外卖的主人非常饿 ...

  5. beyond compare 用法

    1.过滤器用法:点击小眼睛(回话-->回话设置)打开过滤器界面----设置多个过滤文件或目录直接使用回车键 2.比较时最好先设置编码以防出现乱码问题 工具-->文件格式. 3.比较时出现乱 ...

  6. cf--TV Subscriptions (Hard Version)

    time limit per test:2 seconds memory limit per test:256 megabytes input:standard input output:standa ...

  7. toFixed的坑

    因为项目需要使用小数,所以第一时间想到了javaScript 的toFixed 方法,开始测试了一下,觉得没有问题就没管了,后来同事偶然间发现 toFixed 之后的数据不对,后来自己查阅资料才知道, ...

  8. XCOJ 1008: 级数求和

    1008: 级数求和 题目描述 已知:Sn= 1+1/2+1/3+…+1/n.显然对于任意一个整数K,当n足够大的时候,Sn大于K.现给出一个整数K(1<=k<=15),要求计算出一个最小 ...

  9. Java 1.8 红黑树

    红黑树 R-B Tree R-B Tree,全称 Red-Black Tree 又称为 红黑树,它是一种特殊的二叉查找树,红黑树的每个节点都有存储位表示节点的颜色,可以是红Red 或者 黑Black ...

  10. pytoch 安装

    注意替换清华源,否则直接安装速度会很慢. conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud ...