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()
	}
}
相关推荐
顾北川_野11 小时前
播放PCM音频增益低+单独增强PCM解码的方案
音视频·pcm
Everbrilliant8913 小时前
FFmpeg解码音频数据AudioTrack/OpenSL播放
ffmpeg·音视频·audiotrack·opensl·ffmpeg音频解码播放·decodethread·opensl播放与解码同步
ivy1598683771513 小时前
JM20329是一款高性能、低功耗的USB桥接芯片,实现串行接口(如SATA、IDE)与USB接口之间的数据转换。
c语言·开发语言·ide·嵌入式硬件·eureka·音视频·视频编解码
温暖名字14 小时前
调用qwen3-omni的api对本地文件生成视频文本描述(批量生成)
python·音视频·qwen·qa问答
太阳人79814 小时前
MIPI D-PHY/C-PHY接收器压力眼图测试介绍
功能测试·嵌入式硬件·音视频·硬件工程
blackorbird17 小时前
视频生成类大模型 Sora 2 系统提示提取技术研究
音视频
Android系统攻城狮17 小时前
Android16音频之启动蓝牙SCO链路startBluetoothSco:用法实例(九十六)
音视频·android16·音频进阶·蓝牙sco协议
开开心心就好18 小时前
无需函数:Excel数据筛选工具推荐
xml·网络·pdf·华为云·word·excel·音视频
美狐美颜SDK开放平台1 天前
美颜SDK性能优化实战:GPU加速与AI人脸美型的融合开发
人工智能·音视频
卜锦元1 天前
音视频媒体服务领域中三种架构方式的定义与区别(Mesh、MCU、SFU)
架构·音视频·媒体