4 replies

React Lazy Load Required Files

I have 20 to 25 mp3 files in my react app. User have the ability to setup any one song. The problem is whenever the React app loads, all the songs are imported by default. But i want to import only one song which user have selected so the app can load faster. I have created customhook useSound which takes song name and it return the mp3 file. Below is the code.

// File 1, where useSound is used

const getSound = useSound('song1');
getSound.volume = 0.5;
getSound.play();

const getSound = useSound('song1');
getSound.volume = 0.5;
getSound.play();

// File 2: useSound Implementation

import song1 from "../../assets/songs/song1.mp3"
import song2 from "../../assets/songs/song2.mp3"
...
import song25 from "../../assets/songs/song25.mp3"

export const useSound = (value) => {
if (value == "song1") return new Audio(song1);
if (value == "song2") return new Audio(song2);
...
if (value == "song25") return new Audio(song25);
}

import song1 from "../../assets/songs/song1.mp3"
import song2 from "../../assets/songs/song2.mp3"
...
import song25 from "../../assets/songs/song25.mp3"

export const useSound = (value) => {
if (value == "song1") return new Audio(song1);
if (value == "song2") return new Audio(song2);
...
if (value == "song25") return new Audio(song25);
}

Can anyone help and tell me a better approach for this?

TTC

Theo's Typesafe Cult•2y ago•

4 replies

Noor

React Lazy Load Required Files

const getSound = useSound('song1');
getSound.volume = 0.5;
getSound.play();

const getSound = useSound('song1');
getSound.volume = 0.5;
getSound.play();

// File 2: useSound Implementation

import song1 from "../../assets/songs/song1.mp3"
import song2 from "../../assets/songs/song2.mp3"
...
import song25 from "../../assets/songs/song25.mp3"

export const useSound = (value) => {
if (value == "song1") return new Audio(song1);
if (value == "song2") return new Audio(song2);
...
if (value == "song25") return new Audio(song25);
}

import song1 from "../../assets/songs/song1.mp3"
import song2 from "../../assets/songs/song2.mp3"
...
import song25 from "../../assets/songs/song25.mp3"

export const useSound = (value) => {
if (value == "song1") return new Audio(song1);
if (value == "song2") return new Audio(song2);
...
if (value == "song25") return new Audio(song25);
}

Can anyone help and tell me a better approach for this?

React Lazy Load Required Files

Similar Threads

React Lazy Load Required Files

Similar Threads

Similar Threads

Similar Threads