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()
	}
}
相关推荐
DogDaoDao7 小时前
Android 硬件编码器参数完全指南:MediaCodec 深度解析
android·音视频·视频编解码·h264·硬编码·视频直播·mediacodec
音视频牛哥9 小时前
大牛直播SDK(SmartMediaKit)Windows平台RTSP/RTMP直播播放SDK集成说明(C#版)
音视频·低延迟rtsp播放器·windows rtsp播放器·windows rtmp播放器·低延迟rtmp播放器·c# rtsp播放器·c# rtmp播放器
薛定猫AI11 小时前
【深度解析】Gemini Omni 多模态生成与 Agent 化创作工作流:从视频编辑到 UI 生成的技术演进
人工智能·ui·音视频
音视频牛哥19 小时前
大牛直播SDK(SmartMediaKit)Windows平台RTSP/RTMP直播播放SDK集成说明(C++版)
windows·音视频·实时音视频·windows rtsp播放器·windows rtmp播放器·超低延迟rtsp播放器·超低延迟rtmp播放器
EasyGBS21 小时前
1分钟讲清楚选EasyNVR还是国标GB28181视频平台EasyGBS:路线不同,别选错
音视频
日光明媚1 天前
深度解析 SGLang 框架 Wan2.1 视频生成加速技术:从 49 分钟到 1 分钟的极致优化
人工智能·计算机视觉·aigc·音视频·sglang
小猿君1 天前
谷歌I/O前夜Veo 4遭泄露,AI视频底层逻辑浮出水面
人工智能·音视频
南山有乔木7891 天前
音频怎么转换MP3格式?M4A、WAV、FLAC转mp3实测有效的格式转换方法
音视频
不昀1 天前
音频变压器Bourns SM-LP-5001国产替代选型指南
网络·音视频·以太网·网络通信·电子元器件
REDcker1 天前
RGB与YUV像素格式详解
音视频·实时音视频·视频编解码·yuv·rgb