vue3中使用 audio 音频

已于 2024-03-20 10:16:19 修改
阅读量1.3k 收藏 7
点赞数 10
分类专栏： 11 文章标签： 音视频 vue.js 前端
于 2024-03-13 10:30:00 首次发布
小野猫
本文链接：https://blog.csdn.net/m0_51822639/article/details/136659566
版权

vue3中使用 audio 音频

  • 在页面写 audio 标签
<div>
	<audio id="normalAudio" ref="normalAudioRef" :src="normalAudioSrc"></audio>
</div>
  • 定义音频路径
    const normalAudioSrc = ‘./audio/Windows 鸣钟 正常.wav’

音频文件放在了 public 文件下
在这里插入图片描述

  • 在方法里面使用
const normalAudioRef = ref(null)
normalAudioRef.value.play()
十一吖i
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 -- 使用audio标签播放音频
King Saj
01-06 3327
vue3 使用audio标签播放音频
vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发
05-27
vue视听Vue HTML5音频可视化组件概述安装和设置...它使用HTML5 Web Audio API构建，并且与所有支持HTML5音频API的浏览器兼容。 它提供了多个Vue组件，这些组件允许为“音频” HTML元素绘制光亮的外观。 有一个DEMO ava
vue中添加mp3音频文件的方法
01-19
有的时候我们需要在vue中添加音频文件，但是直接将音频文件放置了assets目录下的时候，会发现并不能正常播放，下面是两种常用的配置方法： 方法一、将音频文件放置在static目录中，然后进行调用，如下所示 <audio class=success src=/static/audios/do_wrong.mp3> </audio> 以上这种方式就能够解决这个问题了。 方法二、给项目配置mp3格式的解析器 1、在webpack.base.conf.js中添加加载器，如下 { test: /\.(mp3)(\?.*)?$/, loader: 'url-loade
Vue3使用audio实现无播放器播放音频，以及多音频切换bug“The play() request was interrupted by a new load request”处理
薛定谔的猫的博客
06-06 466
Vue 的声明性渲染模型抽象了大部分对 DOM 的直接操作，当我们有需要直接访问底层 DOM 元素的需求，就可以使用特殊的 ref attribute，对DOM 元素实现直接引用，从而实现原生audio播放器的更改和控制。如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；
vue3+ts 音频播放功能（多个音频播放器）
最新发布
m0_59006402的博客
06-14 184
【代码】vue3+ts 音频播放功能（多个音频播放器）
Vue3 利用Ref控制audio标签播放音乐
m0_74989367的博客
05-12 539
【代码】Vue3 利用Ref控制audio标签播放音乐。
Vue3 使用audio播放语音+监听播放语音完成事件
蓝胖子的博客
06-05 507
Vue3 使用audio播放语音+监听播放语音完成事件
vue3 自定义 audio音频播放效果
你怎么也喜欢嘴巴嘟嘟
10-06 9953
<template> <!-- --> <div> <div id="page-body"> <!-- banner图文 --> <div class="banner-div"> <img src="../../../../static/img/productModel/headbg.png" class="headbg" /> <label c
vue3和vue2中分别使用audio标签自定义播放音频文件的方法
wed2019的博客
12-09 5481
vue3和vue2中分别使用audio标签自定义播放音频文件的方法
vue3中audio标签自定义播放音频
qdm13209211861的博客
03-30 2002
vue3中循环列表播放音频
记录一次Vue3中自定义audio标签实现拖拽滑动进度和音量的控制
Codernmx
04-05 3838
isListen : false , positionY : 0 , voice : 100 , total : 0.00 , }) const audio = ref() const percentage = ref(0) //播放还是暂停 let timer = null const changePause =() => {//暂停 } else {//播放 if(timer) {
vue3 + Element Plus自定义音频audio样式及控件
qdm13209211861的博客
06-13 5902
先封装一个组件。注意：需提前安装了。
vue3+wangEditor5自定义上传音频+视频
07-05
在本文中，我们将深入探讨如何在Vue3项目中结合wangEditor5实现自定义上传音频和视频功能。wangEditor5是一款轻量级且功能强大的富文本编辑器，它提供了丰富的API和自定义选项，使得在Vue3这样的现代前端框架中集成...
vue通过点击事件读取音频文件的方法
08-27
在 `muiscPlay1` 方法中，我们使用 `new Audio()` 构造函数来创建一个音频对象，并将音频文件的路径设置为 `../../static/audio/` 加上当前选中的音频文件名称。最后，我们调用 `play()` 方法来播放音频文件。 需要...
基于vue框架的audio标签优化--完整组件 传参即可使用
06-10
预览地址：https://blog.csdn.net/qq_42312466/article/details/125218038 功能： 1、可以拖拽进行定位进度、也可能点击进行定位进度 2、拥有倍速效果 3、一键恢复 完整组件 传入src即可
在VUE中播放音频（audio介绍与使用）
热门推荐
qq_45820271的博客
08-25 3万+
本文介绍了如何使用audio标签播放音频，并在vue2,vue3以及uniapp中使用
vue3封装-自定义audio音频播放【拖拽进度条,点击进度条，快进，后退，音量加减】思路
kaikai12345677的博客
04-22 7631
vue3封装-自定义audio音频播放【拖拽进度条,点击进度条，快进，后退，音量加减】思路
vue3播放音频
hello，word！
11-22 2094
使用 autoplay 标签和主动调用 play 方法`document.querySelector('video').play()`都会提示此错误。报错：Error: Uncaught (in promise) DOMException: play() failed。根据 Chrome 的规则，要想使用autoplay自动播放只能加上。在vue3中实测只需点击页面内 程序才能自动调用播放。静音属性就允许自动播放了。
vue3 + vite自定义封装vue+audio ，并发布到npm
l976689的博客
03-29 1468
vue3编写的自定义audio小工具，发布npm使用全过程讲解和遇到的坑
vue3 audio使用
08-23
Vue 3 中的 audio 使用与 Vue 2 中的使用方式类似。你可以在 Vue 组件中使用 `<audio>` 标签来添加音频元素。下面是一个简单的例子： ```html <template> <div> <audio ref="myAudio" src="/path/to/audio.mp3"></audio> <button @click="playAudio">播放</button> </div> </template> <script> export default { methods: { playAudio() { this.$refs.myAudio.play(); } } } </script> ``` 在上面的代码中，我们使用 `<audio>` 标签来创建一个音频元素，并通过 `src` 属性指定音频文件的路径。然后使用 `ref` 属性给这个元素命名为 `myAudio`，方便在 Vue 组件中引用。 在 `playAudio` 方法中，我们使用 `$refs` 来获取到 `myAudio` 元素的引用，并调用 `play()` 方法来播放音频。 这只是一个简单的示例，你可以根据自己的需求进行更复杂的音频操作，比如暂停、停止等。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值