Playing Sounds in Your React App | Tutorial

Sometimes you might like your website to play music or sound effects, so let's take a look at how you might play sounds using React.
I hope this video can help you. If it does then please consider subscribing and giving me some feedback.
Have a great day!
My GitHub: GitHub.com/N-Ziermann
My Website: n-ziermann.github.io?en
Timestamps:
00:00 Starting Point
00:16 Playing Sounds onClick
01:11 Playing Sounds based on React Events (useEffect)

[@kandekore]

after many Stackoverflow and youtube search, this video provided a simple solution. Thank you

[@NiklasZiermann]

You're welcome. I'm glad I could help :)

[@lucasmarques2871]

Straight to the point, thank you very much!

[@NiklasZiermann]

You're welcome :)

[@brandonmchugh9821]

Amazing. This is exactly what I was looking for. THanks!!!!!

[@NiklasZiermann]

You're welcome :)

[@mobile_genshin]

Thank you so much for this excellent tutorial🙏 straight to the point

[@NiklasZiermann]

You're welcome. I'm glad I could help :)

[@seraphitssingh973]

This is what I need. Thank you.

[@NiklasZiermann]

You're welcome :)

[@sebastianlozano7707]

straigth to the point! Thanks so much

[@NiklasZiermann]

You're welcome :)

[@c_zeroyt2556]

Thank you , best one on youtube

[@chrisgraham2123]

perfect man subbed, thanks a ton!

[@NiklasZiermann]

You're welcome. I'm glad you enjoyed the video :)

[@harshitsuyal8285]

Thankyou so much brother it’s very helpfull

[@NiklasZiermann]

You're welcome :)

[@andrew52600]

Excellent video.

[@NiklasZiermann]

Thank you :)

[@Tube-hn9rc]

thank you sir that is really helpfull

[@NiklasZiermann]

You're welcome! I'm glad I could help :)

[@janoscodes]

Thank you so much

[@NiklasZiermann]

You're welcome :)

[@lucasmanoel208]

Thank you, meu chapa!

[@NiklasZiermann]

You're welcome :)

[@web.mayk3l]

Nice video

[@NiklasZiermann]

Thanks, I'm glad you liked it :)

[@reise254]

(edit, added howler) This worked thanks! But.. after a while I got a "distorted/corrupted" sound. Tried everything, the only fix that worked for me was using Howler library instead of the built in HTML audio player in the video. $ `npm i howler`

[@NiklasZiermann]

That's unfortunate. Sorry to hear that... But thank you for pointing out an alternative solution :)

[@amanrubey]

thanks!!!!! howler indeed worked, nothing else was working and I was exasperated and so depressed

[@akmalabid_fip5376]

thx so much, is there any way that the volume value can be controled with input range ?

[@NiklasZiermann]

Yes there is. You can controll the volume of your Audio object using the volume atrribute (0=no sound, 1=max volume). So just set the range of your input to be between 0 and 1 and use a useffect to change the volume attribute whenever the input's value changes.

[@johnathanvalorant697]

nice m8

[@haanghuy]

Hello, can you make a video tutorial on playing audio using base64 string in react native

[@Diamondyy]

Hey there! I'm running into a bit of a hiccup and I hope someone can lend a hand. I'm trying to build my React app, but I keep getting this error message: Module parse failed: Unexpected character '�' (1:5) It seems to be related to the sound file (I'm using the same WAV file). Any advice on how to resolve this? Thanks in advance! 👍

[@NiklasZiermann]

It's probably an issue with your bundler settings. Depending on what bundler you use you'll need to configure wav files as assets/resources. This way it will import just the path to the file instead of interpreting the file as javascript. How you do this depends on your bundler (vite, webpack, bun) but just googling ' import as static asset' should probably do the trick :)

[@uiltonKeyboard]

Hey buddy, I'm using this already in my project. My question here is: I have some customers that is using the app on the mobile device, so when some new message comes, I dispatch a sound, but when the device is locked, the sound is not emitted. Do you know any workaround about this? Thanks in advance.

[@NiklasZiermann]

Unfortunately I dont think that there's a workaround for that specific issue. But you might be able to use the Notifications API as a solution :)

[@payamrezaei-eg8dz]

i have impelementing an book with audio sound for each paragraph that api gives me the audio files by each api call and i want make toggle button to play and pause and other buttons not work till get pause or ended

[@NiklasZiermann]

If you want every source to work independently, then you'll need one audio object per source

[@luv.matters]

Now how do you do it with multiple sounds like a drumkit?

[@NiklasZiermann]

Just create one Audio object for each sound and play them accordingly :)

[@giolosaberidze3613]

what if i want to play different sounds on different buttons, can u help?

[@NiklasZiermann]

Sure, you do the same thing as shown in the video and for every button you just use another Audio object with another source-file

[@luv.matters]

I'm just asking the same above lol

[@luv.matters]

@@NiklasZiermann rather than having multiple, would it make sense to use an object?

[@NiklasZiermann]

@@luv.matters Using only one audio object will most likely cause issues when multiple sounds play simultaniously. So I'd recommend using one object per sound effect. You can of course put all of these Audio objects into a data-structure, to make accessing them easier :)

[@bimasenaanta]

how to make it play automatically after load

[@NiklasZiermann]

Just create the 'Audio' object and run the 'play' method inside a useEffect with an empty dependency array, like shown in the video. :)

[@nachobalo]

Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.

[@NiklasZiermann]

You're welcome :)

[@boyywnkobe]

how to stop ?

[@NiklasZiermann]

The Audio Object should have a .pause() method. Try using that :)

[@user-se5ts2tb7x]

Your solution doesnt work!!! NextJS crashes at Build stage, returning error: Module parse failed: unexpected character ' ' with MP3 files

[@NiklasZiermann]

Thats because you need to tell nextjs that it should handle mp3 files as resources / assets. Right now it treats your mp3 as a JS file. Once you've done that everything should work :)

[@pixerize-me]

One way to use audio in NextJS is to put your audio file in the public folder and then do, without import, just use audio = new Audio('/assets/sounds/incoming.wav');

[@user-se5ts2tb7x]

This worked! Can't thank you enough,@@pixerize-me !

[@turgunov28]

thanks man

[@NiklasZiermann]

You're welcome :)