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()
	}
}
相关推荐
音视频牛哥1 小时前
计算机视觉的新浪潮:扩散模型(Diffusion Models)技术剖析与应用前景
人工智能·计算机视觉·ai·音视频·实时音视频·扩散模型
电子科技圈1 小时前
SmartDV推出先进的H.264和H.265视频编码器和解码器IP
音视频·h.265·h.264
feiyangqingyun3 小时前
Qt音视频开发技巧/推流带旋转角度/rtsprtmp推流/保存文件到MP4/拉流解析旋转角度
qt·音视频·qt旋转角度推流
Despacito0o4 小时前
ESP32-s3摄像头驱动开发实战:从零搭建实时图像显示系统
人工智能·驱动开发·嵌入式硬件·音视频·嵌入式实时数据库
毕设做完了吗?10 天前
视频相似度检测算法(带课设报告)
人工智能·算法·机器学习·音视频
语音之家10 天前
2025年CCF先进音频技术竞赛
人工智能·音视频
音视频牛哥10 天前
音视频全链路开发实践:基于SmartMediakit的架构设计与应用实战
音视频·大牛直播sdk·rtsp播放器·rtmp播放器·安卓rtmp播放器·rtmpplayer·linux rtsp
十年编程老舅11 天前
音视频流媒体高级开发-学习路线
ffmpeg·音视频·音视频开发·音视频编解码·c++音视频·流媒体服务器·音视频学习路线
weisian15111 天前
一款强大的音视频处理工具--FFmpeg-2--常用音频处理示例
音视频·mpeg-2
9527华安11 天前
国产安路FPGA实现MIPI视频解码转HDMI输出,基于SC500摄像头,提供TD工程源码和技术支持
fpga开发·音视频·csi·mipi·dphy·安路fpga·sc500