H5audio标签有许多事件
在应用到vue中后的使用如下：
比如在使用onplay时，要去掉on，用@play派发时间，在methods中定义方法执行体
<template>
<div>
<audio src="../../static/1.mp3" @play="ready" @pause="pause" controls></audio>
</div>
</template>
<script>
export default {
name: 'musci',
data() {
return {
}
},
methods:{
ready(){
console.log("play click");
},
pause(){
console.log("pause click");
}
}
}
</script>
而在普通HTML文件中使用audio时，则需要添加addEventListener事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn">click</button>
<audio class="au" src="./1.mp3"></audio>
</body>
</html>
<script>
var btn = document.querySelector('.btn')
var au = document.querySelector('.au')
btn.addEventListener('click',function () {
console.log("aa");
au.play()
})
au.addEventListener('play',function () {
console.log("play click");
})
</script>