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()
	}
}
相关推荐
byte轻骑兵7 小时前
【AVDTP】规范精讲[6]: 打通全流程,蓝牙音频连接背后的12步信令博弈
人工智能·音视频·avrcp·蓝牙耳机·蓝牙车机
qq3621967058 小时前
# 视频转文字准确率如何提升?影响识别质量的 6 个关键因素与优化技巧
音视频
不爱记笔记8 小时前
音视频转笔记工具横评2026,通义听悟、Ai好记、NotebookLM 实测对比
人工智能·笔记·ai·音视频·飞书·obsidian
中微极客8 小时前
Seedance 2.5深度解析:字节跳动30秒4K视频生成模型架构与API实战
音视频
SimpleLearingAI9 小时前
生成图像/视频质量评估
音视频·多模态大模型
hz567899 小时前
音视频技术SDK选型指南:企业实时互动场景的关键能力解析
网络·云计算·音视频·实时音视频·信息与通信
paokuflying9 小时前
ffmpeg提取视频中的音频
ffmpeg·音视频
不爱记笔记10 小时前
上下班路上怎么消化技术视频?我把B站内容转成播客,通勤时间也能系统学习
学习·ai·音视频·知识库·知识管理
zandy101111 小时前
Seedance 2.0第三方创作工具怎么选?商用视频工作流评估指南
音视频
小猴子爱上树1 天前
一站式解决图片视频翻译难题的高效AI工具
人工智能·python·音视频