vue3动态加载音频文件，用于不同场景加载不同的文件

在这里插入图片描述

本文主要介绍如何在vue3中动态加载音频文件。

前言

在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>