本文主要介绍如何在vue3中动态加载音频文件。
目录
- 前言
- 静态加载
- 动态加载
- import函数
- watch函数
- 使用watch函数和import函数动态加载音频文件
前言
在vue3中，我们通常使用import xxx from 'xxxxxx'来加载文件，但是如果我们需要加载哪些文件，是需要条件去判断的，那该怎么做呢？
静态加载
先来看看最普遍的加载方式——静态加载
假设现在我需要加载one、two、three三个音频文件，这3个音频文件分别有中文版和英文版。那么按照最简单的加载方式，我应该直接import，代码如下：
import one_cn from './assets/sounds/cn/one.mp3'
import two_cn from './assets/sounds/cn/two.mp3'
import three_cn from './assets/sounds/cn/three.mp3'
import one_en from './assets/sounds/en/one.mp3'
import two_en from './assets/sounds/en/two.mp3'
import three_en from './assets/sounds/en/three.mp3'
这段代码是使用 JavaScript 导入音频文件。具体来说，它从特定的目录导入了不同语言的音频文件。这样的代码通常用于在一个程序中管理和引用不同的音频资源，可以根据需要播放不同语言的音频文件。例如，如果你想播放中文的音频，你就可以使用 one_cn，如果想播放英文的音频，你就可以使用 one_en。
但这种方式不好的地方是所有音频都会加载进来，而我们一般只需要用到其中一种，这样做的话会比较耗费资源。所以我们应该寻找一种可以动态加载文件的方法。
动态加载
动态加载需要用到import()函数和watch()函数，这里我简单介绍一下。
import函数
在Vue 3中，import()函数可以实现动态导入模块。我们使用import()函数可以异步地加载一个JavaScript模块，而无需在应用程序启动时加载整个模块。
import()函数返回一个Promise对象，当模块加载完成后，该Promise对象会被resolved。
下面是一些使用import()函数的例子：
// 加载单个模块
import('/modules/myModule.js')
.then((module) => {
// 使用myModule中的功能
console.log(module.myFunction());
});
// 加载多个模块
Promise.all([
import('/modules/myModule1.js'),
import('/modules/myModule2.js'),
import('/modules/myModule3.js')
]).then(([module1, module2, module3]) => {
// 使用myModule1、myModule2和myModule3的功能
console.log(module1.myFunction());
console.log(module2.myFunction());
console.log(module3.myFunction());
});
使用import()函数可以延迟模块的加载时间，这可以提高应用程序的性能并减少初始加载时间。不过需要注意，使用import()函数会增加网络请求，因此在使用时需要权衡好加载时间和网络请求数量的关系。
watch函数
在Vue3中，watch()函数是用来监听Vue实例上的一个数据变化，并对其进行相应的处理。其基本语法如下：
watch(source, callback, options)
其中，source是一个函数或一个字符串，用来监听的数据源。callback是一个函数，以参数的形式接收被监听的数据变化。options是一个可选的配置对象，其中包含了如下选项：
deep：是否深度监听，默认值为false。immediate：是否在watcher被创建后立即执行回调函数，默认值为false。flush：用于控制watcher的触发时机。默认值为"pre"，即在Vue更新DOM前触发watcher。可选的值还有"post"和"sync"。
在Vue3中，使用watch()函数的方式与Vue2有些区别。Vue2中使用的是一个对象来进行配置，而Vue3中则是将配置分散到了函数的参数中，使得使用更加灵活和方便。同时，在Vue3中，watch()的返回值是一个函数，可以用来停止监听。
举个例子，下面是在Vue3中使用watch()进行数据监听的示例：
import { watch } from 'vue'
export default {
data() {
return {
count: 0
}
},
mounted() {
// 监听数据变化
watch(() => this.count, (newVal, oldVal) => {
console.log(`count变化了：${oldVal} => ${newVal}`)
}, {
deep: false,
immediate: true
})
}
}
在这个例子中，我们监听了count数据的变化，并在回调函数中打印了变化前后的值。同时，我们还将配置项deep和immediate分别设置为false和true，表示监听数据的深度和是否立即执行回调函数。
使用watch函数和import函数动态加载音频文件
使用watch()函数监听语言的变化，自定义一个dynamicLoadingMp3()函数执行加载函数import。
话不多说，下面是代码示例：
<script setup>
import { ref, watch } from 'vue'
let language = ref('cn')
// 监听语言变化
watch(() => language,(now, prev) => {
//now是language变化后的最新值
dynamicLoadingMp3()//重新加载音频文件
});
// 根据语言动态加载音频文件
const dynamicLoadingMp3 = function(){
// 根据语言环境的变量选择目录进行加载
import(`./assets/sounds/${language.value}/one.mp3`).then((oneSound) => {
//在此处使用音频文件oneSound
});
import(`./assets/sounds/${language.value}/two.mp3`).then((twoSound) => {
//在此处使用音频文件twoSound
});
import(`./assets/sounds/${language.value}/three.mp3`).then((threeSound) => {
//在此处使用音频文件threeSound
});
}
dynamicLoadingMp3()
</script>
