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()
	}
}
相关推荐
恒拓高科WorkPlus11 分钟前
局域网视频软件BeeWorks,内网顺畅沟通
音视频
关键帧-Keyframe24 分钟前
音视频面试题集锦第 26 期
面试·音视频
liefyuan25 分钟前
【音视频】ISP能力
音视频·接口隔离原则
STC_USB_CAN_80514 小时前
实战 AI8051U 音视频播放:USART-SPI→DMA-P2P→SPI+I2S 例程详解
单片机·嵌入式硬件·音视频
阿赵3D8 小时前
Unity引擎播放HLS自适应码率流媒体视频
unity·游戏引擎·音视频·流媒体·hls
sukalot9 小时前
window显示驱动开发—在混合系统中使用跨适配器资源
数据库·驱动开发·音视频
眠りたいです15 小时前
Qt音频播放器项目实践:文件过滤、元数据提取与动态歌词显示实现
c++·qt·ui·音视频·媒体·qt5·mime
FreeDw资源库1 天前
功能强大!开源免费的视频翻译、音视频转录工具
音视频·音视频翻译
早睡身体好~2 天前
【lubancat】鲁班猫4实现开机后自动播放视频
音视频·linux开发
小幽余生不加糖2 天前
电路方案分析(二十二)适用于音频应用的25-50W反激电源方案
人工智能·笔记·学习·音视频