vue3项目引入本地js文件,实现一个音频播放按钮
warning:
这篇文章距离上次修改已过190天,其中的内容可能已经有所变动。
在Vue 3项目中引入本地JavaScript文件并实现一个音频播放按钮可以通过以下步骤完成:
- 将你的本地JavaScript文件放在项目的适当位置,例如在
src/assets
文件夹内。 - 在你的Vue组件中,使用
import
语句引入这个JavaScript文件。 - 在模板中添加一个按钮,并绑定点击事件来触发音频播放。
以下是一个简单的示例:
首先,确保你有一个音频文件,例如src/assets/audio.mp3
。
然后,创建一个本地JavaScript文件,比如src/assets/audioPlayer.js
,并在其中定义播放音频的函数:
// src/assets/audioPlayer.js
export function playAudio(audioUrl) {
const audio = new Audio(audioUrl);
audio.play();
}
接下来,在你的Vue组件中引入这个JavaScript文件,并添加播放按钮:
<template>
<button @click="playAudio">播放音频</button>
</template>
<script>
// 引入本地JavaScript文件
import { playAudio } from '@/assets/audioPlayer.js';
export default {
setup() {
// 音频文件的URL
const audioUrl = '@/assets/audio.mp3';
// 播放音频函数
function playAudio() {
playAudio(audioUrl);
}
return { playAudio };
},
};
</script>
在这个例子中,我们定义了一个playAudio
函数来播放音频,并在模板中通过按钮点击事件触发它。当用户点击按钮时,playAudio
函数会被调用,并播放定义好的音频文件。
评论已关闭