vue中使用H5的audio

最新推荐文章于 2023-08-22 18:05:06 发布

劲枫

最新推荐文章于 2023-08-22 18:05:06 发布

阅读量5.4k

点赞数 1

分类专栏： VUE 文章标签： vue使用audio

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/86666351

版权

VUE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>

劲枫

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue中使用H5的audio

H5audio标签有许多事件在应用到vue中后的使用如下：比如在使用onplay时，要去掉on，用@play派发时间，在methods中定义方法执行体&lt;template&gt; &lt;div&gt; &lt;audio src="../../static/1.mp3" @play="ready" @pause="pause" controls&g..
复制链接

扫一扫