(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`
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
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! 👍
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 :)
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.
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.
@@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 :)
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 :)
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');
after many Stackoverflow and youtube search, this video provided a simple solution. Thank you
You're welcome. I'm glad I could help :)
Straight to the point, thank you very much!
You're welcome :)
straigth to the point! Thanks so much
You're welcome :)
Thank you so much for this excellent tutorial🙏 straight to the point
You're welcome. I'm glad I could help :)
Thank you , best one on youtube
This is what I need. Thank you.
You're welcome :)
Excellent video.
Thank you :)
Amazing. This is exactly what I was looking for. THanks!!!!!
You're welcome :)
Good video. Thanks!
perfect man subbed, thanks a ton!
You're welcome. I'm glad you enjoyed the video :)
Thank you, meu chapa!
You're welcome :)
thank you sir that is really helpfull
You're welcome! I'm glad I could help :)
(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`
That's unfortunate. Sorry to hear that... But thank you for pointing out an alternative solution :)
thanks!!!!! howler indeed worked, nothing else was working and I was exasperated and so depressed
Nice video
Thanks, I'm glad you liked it :)
Thankyou so much brother it’s very helpfull
You're welcome :)
Now how do you do it with multiple sounds like a drumkit?
Just create one Audio object for each sound and play them accordingly :)
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
If you want every source to work independently, then you'll need one audio object per source
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! 👍
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 :)
Hello, can you make a video tutorial on playing audio using base64 string in react native
Thank you so much
You're welcome :)
nice m8
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.
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 :)
thx so much, is there any way that the volume value can be controled with input range ?
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.
what if i want to play different sounds on different buttons, can u help?
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
I'm just asking the same above lol
@@NiklasZiermann rather than having multiple, would it make sense to use an object?
@@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 :)
how to make it play automatically after load
Just create the 'Audio' object and run the 'play' method inside a useEffect with an empty dependency array, like shown in the video. :)
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.
You're welcome :)
how to stop ?
The Audio Object should have a .pause() method. Try using that :)
Your solution doesnt work!!! NextJS crashes at Build stage, returning error: Module parse failed: unexpected character ' ' with MP3 files
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 :)
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');
This worked! Can't thank you enough,@@pixerize-me !
thanks man
You're welcome :)