vue3 点击播放audio

news/2024/7/10 3:22:05 标签: 开发语言, 前端, vue

vue_0">vue中播放音频


当需要给audio设置动态的src时,如果调用play()会出现DOMException: The element has no supported sources.

设置了source标签并不能解决问题,甚至play方法都失效了

此时如果设置了control属性,可以看到音频文件时加载完成的,但是没有播放,因此只需要等audio加载完再执行play即可


<audio ref="audio" controls hidden="true" :src="voicePath"/>
const audio = ref(null)
const voicePath = ref('')

const playVoice = () => {
	// 外部链接
    voicePath.value = `https://mp3在线地址`
    // 本地链接
    voicePath.value = new URL('@/assets/本地mp3文件', import.meta.url).href
    
    nextTick(() => {
    	audio.value?.play()
    })
}

注意: 由于浏览器安全策略的影响并不能在onMounted中调用playVoice,只能在点击按钮之类的操作中调用。


http://www.niftyadmin.cn/n/4945447.html

相关文章

前端代理配置

dev: {env: require(./dev.env),port: process.env.PORT || 8080,autoOpenBrowser: true,assetsSubDirectory: static,assetsPublicPath: /,proxyTable: {// 以 /party/fundamental/ 开头的请求&#xff0c;全部转发到 target 设置的地址/party/fundamental/: {// target: http…

PHP 报修管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 报修管理系统 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 下载地址&#xff1a; https://download.csdn.net/download/qq_41221322/88209950 视…

CKZF-D60170、CKZF-D70190、CKZF-D80210单向离合器

CKZF-C30100、CKZF-C35110、CKZF-C40125、CKZF-C45130、CKZF-C50150、CKZF-C55160、CKZF-C60170、CKZF-C70190、CKZF-C80210、CKZF-C90230、CKZF-C100270、CKZF-C130310、CKZF-B30100、CKZF-B35110、CKZF-B40125、CKZF-B45130、CKZF-B50150、CKZF-B55160、CKZF-B60170、CKZF-B7…

Pyqt5-自动化电池监测工具

开源第二篇&#xff0c;书接上回&#xff0c;上回的工具用起来着实不方便&#xff0c;功能也少&#xff0c;不能满足大部分需求&#xff0c;体现在&#xff1a;钉钉发送数据&#xff0c;数据处理&#xff0c;以及接收数据&#xff0c;定时任务等这部分。 随后对其进行了优化 数…

FairyGUI-Unity侧菜单扩展

目录 缘由&#xff1a; 分析&#xff1a; 准备&#xff1a; 完整代码&#xff1a; 缘由&#xff1a; 在使用FairyGUI作为项目UI开发时&#xff0c;有时会使用FairyGUI提供的Scripting Define Symbols。当前FairyGUI中的Scripting Define Symbols有&#xff1a; 骨骼动画 …

Unity引擎使用InteriorCubeMap采样制作假室内效果

Unity引擎制作假室内效果 大家好&#xff0c;我是阿赵。   这次来介绍一种使用CubeMap做假室内效果的方式。这种技术名叫InteriorCubeMap&#xff0c;是UE引擎自带的节点效果。我这里是在Unity引擎里面的实现。 一、效果展示 这个假室内效果&#xff0c;要动态看才能看出效…

layui下拉框select 弹出层在最外层

出现问题如图所示 想要的效果是如下 这样的效果只需一行代码就能解决 .layui-layer-page .layui-layer-content{overflow: visible!important;}

数据结构的树存储结构

数据结构的树存储结构 之前介绍的所有的数据结构都是线性存储结构。本章所介绍的树结构是一种非线性存储结构&#xff0c;存储的是具有“一对多”关系的数据元素的集合。 (A) (B) 图 1 树的示例 图 …