feat: make sound file addresses relative

This commit is contained in:
MAZE 2025-07-19 22:07:06 +03:30
parent 1e24cbc6eb
commit 81d9d7ca03
10 changed files with 114 additions and 89 deletions

View file

@ -21,6 +21,8 @@ import { PiBirdFill, PiDogBold } from 'react-icons/pi/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const animals: Category = {
icon: <FaDog />,
id: 'animals',
@ -29,97 +31,97 @@ export const animals: Category = {
icon: <PiBirdFill />,
id: 'birds',
label: 'Birds',
src: '/sounds/animals/birds.mp3',
src: getAssetPath('/sounds/animals/birds.mp3'),
},
{
icon: <GiSeagull />,
id: 'seagulls',
label: 'Seagulls',
src: '/sounds/animals/seagulls.mp3',
src: getAssetPath('/sounds/animals/seagulls.mp3'),
},
{
icon: <GiCricket />,
id: 'crickets',
label: 'Crickets',
src: '/sounds/animals/crickets.mp3',
src: getAssetPath('/sounds/animals/crickets.mp3'),
},
{
icon: <GiWolfHead />,
id: 'wolf',
label: 'Wolf',
src: '/sounds/animals/wolf.mp3',
src: getAssetPath('/sounds/animals/wolf.mp3'),
},
{
icon: <GiOwl />,
id: 'owl',
label: 'Owl',
src: '/sounds/animals/owl.mp3',
src: getAssetPath('/sounds/animals/owl.mp3'),
},
{
icon: <FaFrog />,
id: 'frog',
label: 'Frog',
src: '/sounds/animals/frog.mp3',
src: getAssetPath('/sounds/animals/frog.mp3'),
},
{
icon: <PiDogBold />,
id: 'dog-barking',
label: 'Dog Barking',
src: '/sounds/animals/dog-barking.mp3',
src: getAssetPath('/sounds/animals/dog-barking.mp3'),
},
{
icon: <FaHorseHead />,
id: 'horse-gallop',
label: 'Horse Gallop',
src: '/sounds/animals/horse-gallop.mp3',
src: getAssetPath('/sounds/animals/horse-gallop.mp3'),
},
{
icon: <FaCat />,
id: 'cat-purring',
label: 'Cat Purring',
src: '/sounds/animals/cat-purring.mp3',
src: getAssetPath('/sounds/animals/cat-purring.mp3'),
},
{
icon: <FaCrow />,
id: 'crows',
label: 'Crows',
src: '/sounds/animals/crows.mp3',
src: getAssetPath('/sounds/animals/crows.mp3'),
},
{
icon: <GiWhaleTail />,
id: 'whale',
label: 'Whale',
src: '/sounds/animals/whale.mp3',
src: getAssetPath('/sounds/animals/whale.mp3'),
},
{
icon: <GiTreeBeehive />,
id: 'beehive',
label: 'Beehive',
src: '/sounds/animals/beehive.mp3',
src: getAssetPath('/sounds/animals/beehive.mp3'),
},
{
icon: <GiEgyptianBird />,
id: 'woodpecker',
label: 'Woodpecker',
src: '/sounds/animals/woodpecker.mp3',
src: getAssetPath('/sounds/animals/woodpecker.mp3'),
},
{
icon: <GiChicken />,
id: 'chickens',
label: 'Chickens',
src: '/sounds/animals/chickens.mp3',
src: getAssetPath('/sounds/animals/chickens.mp3'),
},
{
icon: <GiCow />,
id: 'cows',
label: 'Cows',
src: '/sounds/animals/cows.mp3',
src: getAssetPath('/sounds/animals/cows.mp3'),
},
{
icon: <GiSheep />,
id: 'sheep',
label: 'Sheep',
src: '/sounds/animals/sheep.mp3',
src: getAssetPath('/sounds/animals/sheep.mp3'),
},
],
title: 'Animals',

View file

@ -3,6 +3,8 @@ import { BsSoundwave } from 'react-icons/bs/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const binaural: Category = {
icon: <TbWaveSine />,
id: 'binaural',
@ -11,31 +13,31 @@ export const binaural: Category = {
icon: <BsSoundwave />,
id: 'binaural-delta',
label: 'Delta',
src: '/sounds/binaural/binaural-delta.wav',
src: getAssetPath('/sounds/binaural/binaural-delta.wav'),
},
{
icon: <BsSoundwave />,
id: 'binaural-theta',
label: 'Theta',
src: '/sounds/binaural/binaural-theta.wav',
src: getAssetPath('/sounds/binaural/binaural-theta.wav'),
},
{
icon: <BsSoundwave />,
id: 'binaural-alpha',
label: 'Alpha',
src: '/sounds/binaural/binaural-alpha.wav',
src: getAssetPath('/sounds/binaural/binaural-alpha.wav'),
},
{
icon: <BsSoundwave />,
id: 'binaural-beta',
label: 'Beta',
src: '/sounds/binaural/binaural-beta.wav',
src: getAssetPath('/sounds/binaural/binaural-beta.wav'),
},
{
icon: <BsSoundwave />,
id: 'binaural-gamma',
label: 'Gamma',
src: '/sounds/binaural/binaural-gamma.wav',
src: getAssetPath('/sounds/binaural/binaural-gamma.wav'),
},
],
title: 'Binaural Beats',

View file

@ -11,6 +11,8 @@ import {
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const nature: Category = {
icon: <BiSolidTree />,
id: 'nature',
@ -19,73 +21,73 @@ export const nature: Category = {
icon: <BiWater />,
id: 'river',
label: 'River',
src: '/sounds/nature/river.mp3',
src: getAssetPath('/sounds/nature/river.mp3'),
},
{
icon: <FaWater />,
id: 'waves',
label: 'Waves',
src: '/sounds/nature/waves.mp3',
src: getAssetPath('/sounds/nature/waves.mp3'),
},
{
icon: <BsFire />,
id: 'campfire',
label: 'Campfire',
src: '/sounds/nature/campfire.mp3',
src: getAssetPath('/sounds/nature/campfire.mp3'),
},
{
icon: <FaWind />,
id: 'wind',
label: 'Wind',
src: '/sounds/nature/wind.mp3',
src: getAssetPath('/sounds/nature/wind.mp3'),
},
{
icon: <FaWind />,
id: 'howling-wind',
label: 'Howling Wind',
src: '/sounds/nature/howling-wind.mp3',
src: getAssetPath('/sounds/nature/howling-wind.mp3'),
},
{
icon: <BiSolidTree />,
id: 'wind-in-trees',
label: 'Wind in Trees',
src: '/sounds/nature/wind-in-trees.mp3',
src: getAssetPath('/sounds/nature/wind-in-trees.mp3'),
},
{
icon: <GiWaterfall />,
id: 'waterfall',
label: 'Waterfall',
src: '/sounds/nature/waterfall.mp3',
src: getAssetPath('/sounds/nature/waterfall.mp3'),
},
{
icon: <FaRegSnowflake />,
id: 'walk-in-snow',
label: 'Walk in Snow',
src: '/sounds/nature/walk-in-snow.mp3',
src: getAssetPath('/sounds/nature/walk-in-snow.mp3'),
},
{
icon: <FaLeaf />,
id: 'walk-on-leaves',
label: 'Walk on Leaves',
src: '/sounds/nature/walk-on-leaves.mp3',
src: getAssetPath('/sounds/nature/walk-on-leaves.mp3'),
},
{
icon: <GiStonePile />,
id: 'walk-on-gravel',
label: 'Walk on Gravel',
src: '/sounds/nature/walk-on-gravel.mp3',
src: getAssetPath('/sounds/nature/walk-on-gravel.mp3'),
},
{
icon: <BsFillDropletFill />,
id: 'droplets',
label: 'Droplets',
src: '/sounds/nature/droplets.mp3',
src: getAssetPath('/sounds/nature/droplets.mp3'),
},
{
icon: <FaTree />,
id: 'jungle',
label: 'Jungle',
src: '/sounds/nature/jungle.mp3',
src: getAssetPath('/sounds/nature/jungle.mp3'),
},
],
title: 'Nature',

View file

@ -3,6 +3,8 @@ import { BsSoundwave } from 'react-icons/bs/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const noise: Category = {
icon: <BsSoundwave />,
id: 'noise',
@ -11,19 +13,19 @@ export const noise: Category = {
icon: <GiSoundWaves />,
id: 'white-noise',
label: 'White Noise',
src: '/sounds/noise/white-noise.wav',
src: getAssetPath('/sounds/noise/white-noise.wav'),
},
{
icon: <GiSoundWaves />,
id: 'pink-noise',
label: 'Pink Noise',
src: '/sounds/noise/pink-noise.wav',
src: getAssetPath('/sounds/noise/pink-noise.wav'),
},
{
icon: <GiSoundWaves />,
id: 'brown-noise',
label: 'Brown Noise',
src: '/sounds/noise/brown-noise.wav',
src: getAssetPath('/sounds/noise/brown-noise.wav'),
},
],
title: 'Noise',

View file

@ -18,6 +18,8 @@ import { FaBookOpen } from 'react-icons/fa6/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const places: Category = {
icon: <MdLocationPin />,
id: 'places',
@ -26,97 +28,97 @@ export const places: Category = {
icon: <BiSolidCoffeeAlt />,
id: 'cafe',
label: 'Cafe',
src: '/sounds/places/cafe.mp3',
src: getAssetPath('/sounds/places/cafe.mp3'),
},
{
icon: <BiSolidPlaneAlt />,
id: 'airport',
label: 'Airport',
src: '/sounds/places/airport.mp3',
src: getAssetPath('/sounds/places/airport.mp3'),
},
{
icon: <FaChurch />,
id: 'church',
label: 'Church',
src: '/sounds/places/church.mp3',
src: getAssetPath('/sounds/places/church.mp3'),
},
{
icon: <MdTempleBuddhist />,
id: 'temple',
label: 'Temple',
src: '/sounds/places/temple.mp3',
src: getAssetPath('/sounds/places/temple.mp3'),
},
{
icon: <MdConstruction />,
id: 'construction-site',
label: 'Construction Site',
src: '/sounds/places/construction-site.mp3',
src: getAssetPath('/sounds/places/construction-site.mp3'),
},
{
icon: <TbScubaMask />,
id: 'underwater',
label: 'Underwater',
src: '/sounds/places/underwater.mp3',
src: getAssetPath('/sounds/places/underwater.mp3'),
},
{
icon: <TbBeerFilled />,
id: 'crowded-bar',
label: 'Crowded Bar',
src: '/sounds/places/crowded-bar.mp3',
src: getAssetPath('/sounds/places/crowded-bar.mp3'),
},
{
icon: <GiVillage />,
id: 'night-village',
label: 'Night Village',
src: '/sounds/places/night-village.mp3',
src: getAssetPath('/sounds/places/night-village.mp3'),
},
{
icon: <FaSubway />,
id: 'subway-station',
label: 'Subway Station',
src: '/sounds/places/subway-station.mp3',
src: getAssetPath('/sounds/places/subway-station.mp3'),
},
{
icon: <HiOfficeBuilding />,
id: 'office',
label: 'Office',
src: '/sounds/places/office.mp3',
src: getAssetPath('/sounds/places/office.mp3'),
},
{
icon: <FaShoppingBasket />,
id: 'supermarket',
label: 'Supermarket',
src: '/sounds/places/supermarket.mp3',
src: getAssetPath('/sounds/places/supermarket.mp3'),
},
{
icon: <GiCarousel />,
id: 'carousel',
label: 'Carousel',
src: '/sounds/places/carousel.mp3',
src: getAssetPath('/sounds/places/carousel.mp3'),
},
{
icon: <AiFillExperiment />,
id: 'laboratory',
label: 'Laboratory',
src: '/sounds/places/laboratory.mp3',
src: getAssetPath('/sounds/places/laboratory.mp3'),
},
{
icon: <BiSolidDryer />,
id: 'laundry-room',
label: 'Laundry Room',
src: '/sounds/places/laundry-room.mp3',
src: getAssetPath('/sounds/places/laundry-room.mp3'),
},
{
icon: <IoRestaurant />,
id: 'restaurant',
label: 'Restaurant',
src: '/sounds/places/restaurant.mp3',
src: getAssetPath('/sounds/places/restaurant.mp3'),
},
{
icon: <FaBookOpen />,
id: 'library',
label: 'Library',
src: '/sounds/places/library.mp3',
src: getAssetPath('/sounds/places/library.mp3'),
},
],
title: 'Places',

View file

@ -10,6 +10,8 @@ import { MdOutlineThunderstorm } from 'react-icons/md/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const rain: Category = {
icon: <BsFillCloudRainFill />,
id: 'rain',
@ -18,49 +20,49 @@ export const rain: Category = {
icon: <BsFillCloudRainFill />,
id: 'light-rain',
label: 'Light Rain',
src: '/sounds/rain/light-rain.mp3',
src: getAssetPath('/sounds/rain/light-rain.mp3'),
},
{
icon: <BsFillCloudRainHeavyFill />,
id: 'heavy-rain',
label: 'Heavy Rain',
src: '/sounds/rain/heavy-rain.mp3',
src: getAssetPath('/sounds/rain/heavy-rain.mp3'),
},
{
icon: <MdOutlineThunderstorm />,
id: 'thunder',
label: 'Thunder',
src: '/sounds/rain/thunder.mp3',
src: getAssetPath('/sounds/rain/thunder.mp3'),
},
{
icon: <GiWindow />,
id: 'rain-on-window',
label: 'Rain on Window',
src: '/sounds/rain/rain-on-window.mp3',
src: getAssetPath('/sounds/rain/rain-on-window.mp3'),
},
{
icon: <FaCarSide />,
id: 'rain-on-car-roof',
label: 'Rain on Car Roof',
src: '/sounds/rain/rain-on-car-roof.mp3',
src: getAssetPath('/sounds/rain/rain-on-car-roof.mp3'),
},
{
icon: <BsUmbrellaFill />,
id: 'rain-on-umbrella',
label: 'Rain on Umbrella',
src: '/sounds/rain/rain-on-umbrella.mp3',
src: getAssetPath('/sounds/rain/rain-on-umbrella.mp3'),
},
{
icon: <PiTentFill />,
id: 'rain-on-tent',
label: 'Rain on Tent',
src: '/sounds/rain/rain-on-tent.mp3',
src: getAssetPath('/sounds/rain/rain-on-tent.mp3'),
},
{
icon: <FaLeaf />,
id: 'rain-on-leaves',
label: 'Rain on Leaves',
src: '/sounds/rain/rain-on-leaves.mp3',
src: getAssetPath('/sounds/rain/rain-on-leaves.mp3'),
},
],
title: 'Rain',

View file

@ -14,6 +14,8 @@ import { PiVinylRecord } from 'react-icons/pi/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const things: Category = {
icon: <MdSmartToy />,
id: 'things',
@ -22,97 +24,97 @@ export const things: Category = {
icon: <BsFillKeyboardFill />,
id: 'keyboard',
label: 'Keyboard',
src: '/sounds/things/keyboard.mp3',
src: getAssetPath('/sounds/things/keyboard.mp3'),
},
{
icon: <FaKeyboard />,
id: 'typewriter',
label: 'Typewriter',
src: '/sounds/things/typewriter.mp3',
src: getAssetPath('/sounds/things/typewriter.mp3'),
},
{
icon: <RiFilePaper2Fill />,
id: 'paper',
label: 'Paper',
src: '/sounds/things/paper.mp3',
src: getAssetPath('/sounds/things/paper.mp3'),
},
{
icon: <FaClock />,
id: 'clock',
label: 'Clock',
src: '/sounds/things/clock.mp3',
src: getAssetPath('/sounds/things/clock.mp3'),
},
{
icon: <GiWindchimes />,
id: 'wind-chimes',
label: 'Wind Chimes',
src: '/sounds/things/wind-chimes.mp3',
src: getAssetPath('/sounds/things/wind-chimes.mp3'),
},
{
icon: <TbBowlFilled />,
id: 'singing-bowl',
label: 'Singing Bowl',
src: '/sounds/things/singing-bowl.mp3',
src: getAssetPath('/sounds/things/singing-bowl.mp3'),
},
{
icon: <FaFan />,
id: 'ceiling-fan',
label: 'Ceiling Fan',
src: '/sounds/things/ceiling-fan.mp3',
src: getAssetPath('/sounds/things/ceiling-fan.mp3'),
},
{
icon: <BiSolidDryer />,
id: 'dryer',
label: 'Dryer',
src: '/sounds/things/dryer.mp3',
src: getAssetPath('/sounds/things/dryer.mp3'),
},
{
icon: <GiFilmProjector />,
id: 'slide-projector',
label: 'Slide Projector',
src: '/sounds/things/slide-projector.mp3',
src: getAssetPath('/sounds/things/slide-projector.mp3'),
},
{
icon: <MdWaterDrop />,
id: 'boiling-water',
label: 'Boiling Water',
src: '/sounds/things/boiling-water.mp3',
src: getAssetPath('/sounds/things/boiling-water.mp3'),
},
{
icon: <RiBubbleChartFill />,
id: 'bubbles',
label: 'Bubbles',
src: '/sounds/things/bubbles.mp3',
src: getAssetPath('/sounds/things/bubbles.mp3'),
},
{
icon: <MdRadio />,
id: 'tuning-radio',
label: 'Tuning Radio',
src: '/sounds/things/tuning-radio.mp3',
src: getAssetPath('/sounds/things/tuning-radio.mp3'),
},
{
icon: <IoIosRadio />,
id: 'morse-code',
label: 'Morse Code',
src: '/sounds/things/morse-code.mp3',
src: getAssetPath('/sounds/things/morse-code.mp3'),
},
{
icon: <GiWashingMachine />,
id: 'washing-machine',
label: 'Washing Machine',
src: '/sounds/things/washing-machine.mp3',
src: getAssetPath('/sounds/things/washing-machine.mp3'),
},
{
icon: <PiVinylRecord />,
id: 'vinyl-effect',
label: 'Vinyl Effect',
src: '/sounds/things/vinyl-effect.mp3',
src: getAssetPath('/sounds/things/vinyl-effect.mp3'),
},
{
icon: <TbWiper />,
id: 'windshield-wipers',
label: 'Windshield Wipers',
src: '/sounds/things/windshield-wipers.mp3',
src: getAssetPath('/sounds/things/windshield-wipers.mp3'),
},
],
title: 'Things',

View file

@ -5,6 +5,8 @@ import { TbSailboat } from 'react-icons/tb/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const transport: Category = {
icon: <FaCarSide />,
id: 'transport',
@ -13,37 +15,37 @@ export const transport: Category = {
icon: <BiSolidTrain />,
id: 'train',
label: 'Train',
src: '/sounds/transport/train.mp3',
src: getAssetPath('/sounds/transport/train.mp3'),
},
{
icon: <BiSolidTrain />,
id: 'inside-a-train',
label: 'Inside a Train',
src: '/sounds/transport/inside-a-train.mp3',
src: getAssetPath('/sounds/transport/inside-a-train.mp3'),
},
{
icon: <BiSolidPlaneAlt />,
id: 'airplane',
label: 'Airplane',
src: '/sounds/transport/airplane.mp3',
src: getAssetPath('/sounds/transport/airplane.mp3'),
},
{
icon: <GiSubmarine />,
id: 'submarine',
label: 'Submarine',
src: '/sounds/transport/submarine.mp3',
src: getAssetPath('/sounds/transport/submarine.mp3'),
},
{
icon: <GiSailboat />,
id: 'sailboat',
label: 'Sailboat',
src: '/sounds/transport/sailboat.mp3',
src: getAssetPath('/sounds/transport/sailboat.mp3'),
},
{
icon: <TbSailboat />,
id: 'rowing-boat',
label: 'Rowing Boat',
src: '/sounds/transport/rowing-boat.mp3',
src: getAssetPath('/sounds/transport/rowing-boat.mp3'),
},
],
title: 'Transport',

View file

@ -6,6 +6,8 @@ import { RiSparkling2Fill } from 'react-icons/ri/index';
import type { Category } from '../types';
import { getAssetPath } from '@/helpers/path';
export const urban: Category = {
icon: <FaCity />,
id: 'urban',
@ -14,43 +16,43 @@ export const urban: Category = {
icon: <PiRoadHorizonFill />,
id: 'highway',
label: 'Highway',
src: '/sounds/urban/highway.mp3',
src: getAssetPath('/sounds/urban/highway.mp3'),
},
{
icon: <FaRoad />,
id: 'road',
label: 'Road',
src: '/sounds/urban/road.mp3',
src: getAssetPath('/sounds/urban/road.mp3'),
},
{
icon: <PiSirenBold />,
id: 'ambulance-siren',
label: 'Ambulance Siren',
src: '/sounds/urban/ambulance-siren.mp3',
src: getAssetPath('/sounds/urban/ambulance-siren.mp3'),
},
{
icon: <BsSoundwave />,
id: 'busy-street',
label: 'Busy Street',
src: '/sounds/urban/busy-street.mp3',
src: getAssetPath('/sounds/urban/busy-street.mp3'),
},
{
icon: <BsPeopleFill />,
id: 'crowd',
label: 'Crowd',
src: '/sounds/urban/crowd.mp3',
src: getAssetPath('/sounds/urban/crowd.mp3'),
},
{
icon: <BiSolidTraffic />,
id: 'traffic',
label: 'Traffic',
src: '/sounds/urban/traffic.mp3',
src: getAssetPath('/sounds/urban/traffic.mp3'),
},
{
icon: <RiSparkling2Fill />,
id: 'fireworks',
label: 'Fireworks',
src: '/sounds/urban/fireworks.mp3',
src: getAssetPath('/sounds/urban/fireworks.mp3'),
},
],
title: 'Urban',

7
src/helpers/path.ts Normal file
View file

@ -0,0 +1,7 @@
export function getAssetPath(relativePath: string): string {
const baseURL = import.meta.env.BASE_URL;
const withoutTrailingSlash = baseURL.replace(/\/+$/, '');
const withoutLeadingSlash = relativePath.replace(/^\/+/, '');
return `${withoutTrailingSlash}/${withoutLeadingSlash}`;
}