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()
	}
}
相关推荐
是Yu欸1 天前
【AI视频】从单模型,到AI Agent工作流
人工智能·ai·ai作画·aigc·音视频·实时音视频
Jonathan Star1 天前
基于 recorder-core 的实时音频流与声纹识别技术实践
音视频
向阳花开_miemie1 天前
Android音频学习(二十二)——音频接口
学习·音视频
码农阿树1 天前
Java 离线视频目标检测性能优化:从 Graphics2D 到 OpenCV 原生绘图的 20 倍性能提升实战
java·yolo·目标检测·音视频
Guheyunyi1 天前
用气安全与能效优化平台
运维·网络·人工智能·安全·音视频
EasyCVR1 天前
视频融合平台EasyCVR在智慧水利中的实战应用:构建全域感知与智能预警平台
人工智能·音视频
雾江流2 天前
视频播放器 v12.1.357 | 4K顶级播放器,内置了视频下载器,可下载推特~脸书等国外视频
音视频·软件工程
骄傲的心别枯萎2 天前
项目1:FFMPEG推流器讲解(五):FFMPEG时间戳、时间基、时间转换的讲解
ffmpeg·音视频·视频编解码·时间戳·rv1126
却道天凉_好个秋2 天前
音视频学习(六十九):视音频噪声
音视频·噪声
bluesen2 天前
WebRTC获取GB28181监控摄像头实时音视频流的实现方法
音视频·webrtc·gb28181·gb/t.28181