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()
	}
}
相关推荐
追风20191 小时前
OSS存储的视频,安卓和PC端浏览器打开正常,苹果端打开不播放,什么原因?
音视频
救救孩子把2 小时前
从 Sora 到 Sora 2:文本生成视频进入下一个阶段(附sora教程)
音视频·sora
-KamMinG4 小时前
云上极速转码:阿里云ECS+T4 GPU打造高性能FFmpeg视频处理引擎(部署指南)
阿里云·ffmpeg·音视频
给大佬递杯卡布奇诺18 小时前
FFmpeg 基本API avcodec_alloc_context3函数内部调用流程分析
c++·ffmpeg·音视频
给大佬递杯卡布奇诺21 小时前
FFmpeg 基本API avio_open函数内部调用流程分析
c++·ffmpeg·音视频
Damon小智1 天前
RedPlayer 视频播放器在 HarmonyOS 应用中的实践
音视频·harmonyos·鸿蒙·小红书·三方库·redplayer
云雾J视界1 天前
Linux企业级解决方案架构:字节跳动短视频推荐系统全链路实践
linux·云原生·架构·kubernetes·音视频·glusterfs·elk stack
Likeadust1 天前
新版视频直播点播平台EasyDSS用视频破局,获客转化双提升
大数据·音视频
涛涛讲AI2 天前
一段音频多段字幕,让音频能够流畅自然对应字幕 AI生成视频,扣子生成剪映视频草稿
人工智能·音视频·语音识别
lzptouch2 天前
数据预处理(音频/图像/视频/文字)及多模态统一大模型输入方案
人工智能·音视频