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()
	}
}
相关推荐
美狐美颜SDK开放平台5 天前
开发直播APP时如何接入视频美颜SDK?开发流程与注意事项
android·人工智能·计算机视觉·音视频·直播美颜sdk
2601_955662465 天前
短剧多人对白怎么配?2026年多角色配音工具对比
大数据·人工智能·音视频·语音识别
开发笔记-阿牛5 天前
蓝牙音乐灯拆解,又一次拆到蓝牙音乐灯芯片CK6865L
人工智能·单片机·嵌入式硬件·音视频·音频
旺仔小馒头wang5 天前
AI 智能手机发布会:赋予人类的五种新能力
人工智能·学习·音视频
纳祥科技6 天前
拆机拆到芯片级:ARC功放机里的NX7026、NX8420、NX6805
单片机·音视频·智能音箱
youandyouyou6 天前
律所内部培训共享的内网部署方案:架构、参数与三步落地
音视频
爱吃提升6 天前
文生视频核心
人工智能·音视频
2601_955662466 天前
抖音视频怎么做多语言配音?2026年AI配音工具与制作流程详解
人工智能·音视频·语音识别·视频
音视频牛哥6 天前
Android与HarmonyOS NEXT如何接入GB28181:从SIP到PS/RTP的完整链路
音视频·gb28181-2022对接·鸿蒙next gb28181·gb/t 28181-2022·gb/t 28181-2016·gb28181-2022平台
美狐美颜SDK开放平台6 天前
直播APP源码与视频美颜sdk如何配合?一套完整开发思路
android·人工智能·计算机视觉·音视频·直播美颜sdk