vue中使用H5的audio

忘是亡心i 2022-03-22 08:51 632阅读 0赞

H5audio标签有许多事件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70][]

在应用到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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70]: /images/20220322/cb5fe9ef1e304f17b008b2460f28c533.png

发表评论取消回复

表情：

评论列表（有 0 条评论，632人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用和操作H5的data-xxxx属性

资料 [H5中data-xxxx属性][H5_data-xxxx]. 基本使用注意这里的`navFirst($event)`,只能写`$event`,写别的都获

分手后的思念是犯贱/ 2023年07月19日 10:55/ 0 赞/ 40 阅读

相关 vue-i18n.js在h5中的使用

说明：该文章描述的是vue-i18n.min.js（多语言切换）在apicloud中的使用，基于vue.js 第一步引入js 需要引入的js有 <scrip

偏执的太偏执、/ 2023年06月29日 07:26/ 0 赞/ 9 阅读

相关 vue项目pc端的audio组件--vue-audio

demo：https://shershen08.github.io/vue-plugins-demo-static/index.html\/sound NPM：https:

Dear 丶/ 2023年03月02日 10:53/ 0 赞/ 129 阅读

相关 vue 获取页面路径中的参数(h5)

今天要做一个h5页面,用来打开app的,现在要获取url带的参数 created() { const queryUrl = this.getRequest(

拼搏现实的明天。/ 2022年12月30日 12:54/ 0 赞/ 215 阅读

相关 H5处理不同支持格式（audio）

使用 audio 标签不同的浏览器支持不同的音频格式，目前好像还没有哪一种格式获得所有浏览器的支持。如果要做到兼容，需要支持字少两种格式： 1. .mp3 和 .o

女爷i/ 2022年08月21日 12:00/ 0 赞/ 181 阅读

相关 Vue2.0之H5元素Audio属性currentTime、duration应用

需求：正在做的项目是一个SPA音乐播放器，用到了H5新加入的audio标签，同时像主流播放器一样显示当前播放歌曲的秒数和总时间；思路：查阅API文档得知需要用到a

男娘i/ 2022年06月07日 06:55/ 0 赞/ 1117 阅读

相关 h5 audio 背景音乐播放开关控制

现在的活动h5基本都会有bgm的需求，下面提供一个通用的做法。 ![这里写图片描述][70] ![这里写图片描述][70 1] 上面是开关的按钮，页面刚加载进来的时

迈不过友情╰/ 2022年05月31日 07:50/ 0 赞/ 726 阅读

相关 H5中，FileReader使用

FileReader允许web应用程序异步读取存储在用户计算机上的文件的内容。使用File 或 Bolb 对象指定要读取的文件或数据。 file对象可以是来自<input

港控/mmm°/ 2022年04月08日 11:43/ 0 赞/ 316 阅读

相关 vue中使用H5的audio

H5audio标签有许多事件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

忘是亡心i/ 2022年03月22日 08:51/ 0 赞/ 633 阅读

相关 HTML5 中 audio 播放声音

释放 HTML5 <audio> 的力量： http://msdn.microsoft.com/zh-CN/ie/hh377903 转载于:https://www.cnbl

偏执的太偏执、/ 2022年01月12日 08:03/ 0 赞/ 337 阅读