vue2 中使用音频

vue2 中使用音频

  • template 页面 写入 audio 标签
javascript 复制代码
<template>
	<div>
        <audio ref="moreAudio" :src="moreAudioSrc"></audio>
        <audio ref="noAudio" :src="noAudioSrc"></audio>
    </div>
</template>
  • script 内写入音频路径
javascript 复制代码
<script>
export default {
    data() {
        return {
            moreAudioSrc:'./audio/more.wav',
            noAudioSrc:'./audio/no.wav'
        }
    }
}
</script>

通常将音频文件放在 public 文件下

  • 在方法里面使用
javascript 复制代码
playFn(){
	if(!data) {
		this.$refs.noAudio.play()
	} else {
		this.$refs.moreAudio.play()
	}
}
相关推荐
无线视频解决方案2 小时前
HDMI直出vsMIPI转接对比:AM8360D为何能省2颗芯片
音视频·无线图传·炬力北方
ai产品老杨2 小时前
边云协同视频分析性能优化指南:多站点部署下的参数配置与排查清单(边缘推理+云端管理)
性能优化·音视频
程序员老陆4 小时前
OpenGL 在视频渲染里的角色:它到底加速了什么?
音视频·gpu·opengl
熊猫钓鱼>_>4 小时前
Seedance 2.0 技术深度解析:重构AI视频生成的世界模型新范式
人工智能·笔记·ai·重构·音视频·变革·sedence2.0
弈语道破AI4 小时前
3D渲染不再熬时间!即梦 Seedance 2.5 具备3D白模渲染功能的AI视频生成工具
人工智能·3d·音视频
AI创界者5 小时前
最新 ComfyUI + LTX-2.5 本地一键整合包:文生视频/图生视频/数字人全流程指南
人工智能·aigc·音视频
阿童木写作5 小时前
速卖通卖家图片翻译工具:批量图片翻译+视频字幕+智能抠图一站式搞定
大数据·人工智能·python·音视频
hans汉斯14 小时前
《软件工程与应用》期刊推荐&10月版面征稿中
图像处理·人工智能·深度学习·算法·音视频·软件工程
AI服务老曹17 小时前
AI视频分析API常见问题和排查清单
人工智能·音视频
程序员老陆18 小时前
Qt的QThread::usleep和FFmpeg的libavutil模块的av_usleep哪个精度高一些?
开发语言·qt·ffmpeg·音视频