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()
	}
}
相关推荐
kaixin_啊啊2 天前
突破限制:Melody远程音频管理新体验
音视频
ai产品老杨2 天前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
MThinker2 天前
02-Media-8-uvc_with_csc.py 使用硬件解码的USB摄像头(UVC)捕获视频并显示的程序
音视频·智能硬件·micropython·canmv·k230
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
清风6666662 天前
基于STM32的APP遥控视频水泵小车设计
stm32·单片机·mongodb·毕业设计·音视频·课程设计
Cary丿Xin2 天前
Luma 视频生成 API 对接说明
音视频
奔跑吧 android3 天前
【车载audio开发】【基础概念1】【音频基础概念通俗讲解】
音视频·channel·audio·aosp·frame·period_size
小狮子安度因3 天前
ffplay音频重采样
ffmpeg·音视频
张晓~183399481213 天前
短视频矩阵源码-视频剪辑+AI智能体开发接入技术分享
c语言·c++·人工智能·矩阵·c#·php·音视频
GilgameshJSS3 天前
【学习K230-例程23】GT6700-音频FFT柱状图
python·学习·音视频