Я пытаюсь воспроизвести звук в приложении, созданном с помощью expo-cli.
Код написан на машинописном языке, и код нарушения выглядит следующим образом, взятым из документация expo.io:
import * as React from 'react'
import { WorkoutComponent } from "./WorkoutExecutor";
import { Audio } from 'expo';
export default class AudioPlayer {
private async playAudio(fileName: string) {
console.info("Playing Audio: " + fileName);
const soundFile = './assets/sounds/' + fileName + '.mp3';
try {
const { sound: soundObject, status } = await Audio.Sound.createAsync(
require(soundFile),
{ shouldPlay: true }
);
// Your sound is playing!
} catch (error) {
console.info(error);
// An error occurred!
}
}
[...]
}
Когда приложение загружается, оно выдает следующую ошибку, даже не дойдя до экрана со звуком
[...]\src\AudioPlayer.ts:Invalid call at line 13: require(soundFile)
Я понимаю, что в примере coe используется javascript, а не машинописный текст, но что мне не хватает?
Мой tsconfig.json взят из примера машинописного текста выставки и выглядит так:
{
"compilerOptions": {
"baseUrl": "./src",
"esModuleInterop": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"jsx": "react-native",
"module": "es2015",
"moduleResolution": "node",
"noEmitHelpers": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
// Using the type definitions in @types/expo becuase they are still better than the ones provided by expo. See SvgScreen.tsx and SystemFontsScreen.tsx.
"paths": {
"expo": [
"../node_modules/@types/expo",
"../node_modules/expo"
],
},
"skipLibCheck": true,
"strict": true,
"target": "es2017"
},
"exclude": [
"node_modules"
]
}
Мне помогли через Twitter, и проблема в том, что require()
не работает с динамическими значениями. Это также объясняет, почему ошибки возникали еще до того, как приложение было загружено, поскольку оно пыталось устранить require
во время сборки или загрузки, а не во время выполнения, как я думал.
Я исправил это с помощью
import song from "./path_to_song/song.mp3"
Но это работает только со статическими значениями, известными при запуске приложения. Моя проблема заключалась в том, что я пытался загрузить файл, имя которого я не знал при загрузке приложения. В итоге я использовал другой метод для загрузки файла.
> В итоге я использовал другой метод загрузки файла. Какой метод? xkcd.com/979
import * as React from 'react'
import { WorkoutComponent } from "./WorkoutExecutor";
import { Audio } from 'expo';
const fileA = require('path/to/sound/file.mp3');
const fileB = require('path/to/sound/file2.mp3');
export default class AudioPlayer {
private async playAudio(fileName: string) {
if (fileName == 'A') {
var soundFile = fileA;
} else {
var soundFile = fileB;
}
try {
const { sound: soundObject, status } = await Audio.Sound.createAsync(
soundFile,
{ shouldPlay: true }
);
// Your sound is playing!
} catch (error) {
console.info(error);
// An error occurred!
}
}
[...]
}
Это объясняет ошибку. А у вас есть решение?