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()
	}
}
相关推荐
Hygge-star9 小时前
Flask音频处理:构建高效的Web音频应用指南
前端·flask·音视频·pygame·csdn开发云
hao_wujing17 小时前
使用有限计算实现视频生成模型的高效训练
音视频
追随远方18 小时前
Android音频开发:Speex固定帧与变长帧编解码深度解析
android·音视频
aqi0020 小时前
FFmpeg开发笔记(六十四)使用国产的RedPlayer播放器观看网络视频
android·ffmpeg·音视频·直播·流媒体
英英_1 天前
视频爬虫的Python库
开发语言·python·音视频
weixin_527550401 天前
Linux 环境下高效视频切帧的实用指南
linux·运维·音视频
ai产品老杨1 天前
减少交通拥堵、提高效率、改善交通安全的智慧交通开源了。
前端·vue.js·算法·ecmascript·音视频
红米饭配南瓜汤2 天前
WebRTC中的几个Rtp*Sender
网络·网络协议·音视频·webrtc·媒体
EasyDSS2 天前
EasyRTC嵌入式音视频通信SDK助力物联网/视频物联网音视频打造全场景应用
人工智能·音视频
aqi002 天前
FFmpeg开发笔记(六十三)FFmpeg使用vvenc把视频转为H.266编码
ffmpeg·音视频·直播·流媒体