<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. Etcd Learning Notes

    官网:https://etcd.io 官方项目地址:https://github.com/etcd-io/etcd 参考资料: https://www.hi-linux.com/posts/40915 ...

  2. Android学习07

    自定义Dialog 创建一个Java类CustomDialog继承Dialog. package com.example.helloworld.widget; import android.app.D ...

  3. PTA喊山

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

  4. 点击<a href="#">阻止自动跳转到顶部方法

    最近开发web项目,遇到一个问题 ,就是在<a>标签加href="#",并增加onclick事件,页面会自动在点击该标签绑定的元素时,自动跳转到页面顶部,在网上寻求了一 ...

  5. linux contab

    定义格式: * * * * * commandm(0-59), h(0-23) d(1-31) M(1-12) W(0-7)周W用1-6表示分别对应:每周一….五,六,周日在国外老外周日相当于第一个工 ...

  6. 什么是Maven? 使用Apache Maven构建和依赖项管理

    通过优锐课java架构学习中,学到了不少干货,整理分享给大家学习. 开始使用最流行的Java构建和依赖管理工具Maven Apache Maven是Java开发的基石,也是Java使用最广泛的构建管理 ...

  7. ASP.NET Core搭建多层网站架构【9.2-使用Castle.Core实现动态代理拦截器】

    2020/01/31, ASP.NET Core 3.1, VS2019, Autofac.Extras.DynamicProxy 4.5.0, Castle.Core.AsyncIntercepto ...

  8. mysql 单表批量备份sh文件

    #!/bin/bashDBS=$(mysql -u root -padmin -e 'use database; show tables;' | awk '{ print $1 }');for tab ...

  9. Spring Boot Thymeleaf 模板引擎的使用

    Spring Boot 中可以支持很多模板引擎,Thymeleaf 是 Spring Boot 官方推荐使用的模板引擎,虽然在社区 Thymeleaf 的性能被许多人所吐糟,但这仍然不影响大量的开发人 ...

  10. IPSec的链路和设备备份

    链路备份的IPSec VPN和设备备份的IPSec VPN:首先实验的是链路备份的  IPSec VPN,下面是实验拓扑: IP地址配置:R1(Branch):Branch(config-if)#ip ...