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开放平台2 小时前
美颜SDK性能优化实战:GPU加速与AI人脸美型的融合开发
人工智能·音视频
卜锦元5 小时前
音视频媒体服务领域中三种架构方式的定义与区别(Mesh、MCU、SFU)
架构·音视频·媒体
EasyCVR5 小时前
打造景区“视觉中枢”:视频融合平台EasyCVR助力智慧景区安防智能化升级
音视频
上大科技蔡生6 小时前
CS8389、CS8390:防破音,AB/D,2×6.6W立体音频功率放大器
音视频·音频功放
githubcurry9 小时前
深度相机kinect拍摄的.mkv深度视频为什么特别大,mkv文件中含有什么数据,以及数据格式是什么
人工智能·数码相机·音视频
ACP广源盛139246256739 小时前
GSV6127E#ACP#Type-C/DisplayPort 1.4/HDMI 2.0 到 MIPI CSI-2 混合转换器(带嵌入式 MCU)
单片机·嵌入式硬件·音视频
赖small强10 小时前
【ZeroRange WebRTC】Amazon Kinesis Video Streams WebRTC SDK 音视频传输技术分析
音视频·webrtc·nack·pli·twcc·带宽自适应
Laravel技术社区12 小时前
海康视频 h5player 配置 proxy 代理websocket播放视频问题(websocket在业务系统https方式访问http的播放视频)
websocket·http·音视频
LXA080915 小时前
在 UniApp 中为小程序实现视频播放记录功能
小程序·uni-app·音视频
美摄科技1 天前
视频sdk是什么意思?
音视频