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()
	}
}
相关推荐
小雪人8284 小时前
如何批量旋转视频90度?
音视频
apihz6 小时前
通用图片搜索-搜狗源免费API接口使用指南
android·java·python·php·音视频
aqi006 小时前
FFmpeg开发笔记(七十四)Windows给FFmpeg集成二维码图像的编解码器
ffmpeg·音视频·直播·流媒体
Antonio9156 小时前
【音视频】HLS拉流抓包分析
音视频
9527华安20 小时前
FPGA实现SDI转LVDS视频发送,基于GTP+OSERDES2原语架构,提供工程源码和技术支持
fpga开发·音视频·lvds·gtp·sdi·oserdes2
王者鳜錸1 天前
基于Selenium和FFmpeg的全平台短视频自动化发布系统
selenium·ffmpeg·音视频
aqi001 天前
FFmpeg开发笔记(七十三)Windows给FFmpeg集成MPEG-5视频编解码器
ffmpeg·音视频·直播·流媒体
EasyCVR1 天前
EasyCVR视频汇聚平台国标接入设备TCP主动播放失败排查指南
网络·tcp/ip·音视频
张海森-1688202 天前
FAAC 在海思平台使用得到aac实时音频流
音视频·aac
小兔子酱#2 天前
音频 SDP 文件格式
音视频