react+vite实现批量引入本地文件

最新推荐文章于 2024-03-19 10:16:30 发布

艋呷

最新推荐文章于 2024-03-19 10:16:30 发布

阅读量379

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_45919328/article/details/129147922

版权

需求：
来了websocker推送根据消息播放不同的语音。语音文件是存在本地的，根据推送中的字段匹配相应的语音文件进行播放。
封装导入文件：

// moduleMp3.js

const modulesFiles = import.meta.globEager("./mp3/*.wav"); // 导入同级目录mp3下面所有的wav文件
const modules = Object.keys(modulesFiles).reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^.\/(.*)/, "$1").slice(4); // 文件名即为key名，方便引用时匹配
  const value = modulesFiles[modulePath];
  modules[moduleName] = value.default;
  return modules;
}, {});
// 所有的语音文件都存入 modules
export {
  modulesFiles,
  modules
}

// 使用时
import {modulesFiles,modules } from './assets/moduleMp3.js'；
let key = msg.voices // voices 为要播放的语音文件名
let mp3: any = document.getElementById('music');
mp3.src = modules[key]