-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to correctly load local assets like audio files #1911
Comments
Parcel only loads paths from requires, imports and workers. let audioUrl = require('../sounds/happy/happy-0.mp3');
let sound = new Audio(audioUrl); |
Thanks! If I want to load one file it's working. But I need to load several files so I don't want to manually require each sound. That's why I did a preload function in a class like this: export class LoadSounds {
audioFiles = [];
loaded = 0;
preload(numberOfSounds: object): void {
// iterates through all the files
for (const emotion in numberOfSounds) {
for (let i=0; i<numberOfSounds[emotion]; i++) {
const url = `../sounds/${emotion}/${emotion}-${i}.mp3`;
const loadUrl = require(url);
this.audioFiles[this.loaded] = new Audio(loadUrl);
this.loaded++;
}
}
}
} If I move the loop outside of the class, I get a let audioFiles = [];
let loaded = 0;
for (const emotion in numberOfSounds) {
for (let i=0; i<numberOfSounds[emotion]; i++) {
const url = `../sounds/${emotion}/${emotion}-${i}.mp3`;
const loadUrl = require(url);
audioFiles[loaded] = new Audio(loadUrl);
loaded++;
}
} |
You could use globs, for example: |
I'm having the same problem. Is there a simple asset plugin that would solve this? I know with webpack you can just use a |
@bozdoz Have you tried using a glob as suggested? |
Tried a glob as suggested; still could not load audio. I just switched to webpack for my project. |
Mhh, running this packs all mp3 files in const files = Object.values(require('./sounds/*.mp3'));
const audios = files.map(v => new Audio(v));
document.body.onclick = () => {
audios.forEach(v => v.play());
}; Could you please be more specific about "still could not load audio"? |
Closing because of inactivity |
I tried with a glob:
|
I am getting the error:
|
Also getting the error about No transformers found |
With Parcel 2, you need to prefix the import with |
If this isn't immediately clear, (like it was for me pre-coffee) Change this; const track = require("../sounds/track3.mp3"); To this const track = require("url:../sounds/track3.mp3"); And it will load the correct uri |
My issue got solved when, I started using the path as ('assets/static/audio.mp3'), instead of ('./../static/audio.mp3') i.e. complete path. |
❔ Question
How to correctly load local assets like audio files? I try to load a simple sound like that:
let sound = new Audio("../sounds/happy/happy-0.mp3");
But I keep getting a
GET http://localhost:1234/sounds/happy/happy-0.mp3 404 (Not Found)
error.🔦 Context
I am building a kind of web radio using mp3 files. I want to preload multiple files in order to be able to play them after. I use Typescript and parcel. I use this command to start the server:
parcel --no-cache index.html --public-url /
My folder is structured like that: My code is in loadSoundFiles.ts
💻 Code Sample
let sound = new Audio("../sounds/happy/happy-0.mp3");
I am using variables for generating the url. When I
console.log
the url I get../sounds/happy/happy-0.mp3
The actual code is:
🌍 Your Environment
The text was updated successfully, but these errors were encountered: