How To Play Sound In Browser Using Howler (React Tutorial)

I am now on Twitter: alfiewebdev
Hello all,
In this video I show you the basics of React Howler, an npm package which allows you to easily play sound in the browser using only a few lines of code. I go over how to play and pause an MP3 file as well as how to preload the file to cut down on loading times when a user wants to hear the sound, thus creating a better user experience. If you have any questions or constructive criticism, please leave it down in the comment section below and I'll get back to you as soon as I can. Thanks for watching my video!

[@Ksys]

Thank you for this short and easy to understand video!

[@jeremiahthompson82]

Thanks so much. Fantastic tutorial

[@AlfieWebDev]

Glad you enjoyed it!

[@oscargalvez7]

Thanks for the tutorial, it was just what I needed! Keep up the amazing content! 🔥🔥🔥

[@denniscao8292]

Thanks for the tutorial, it worked for me.

[@johnstevengonzalez2394]

Thanks for everything men! Your tuto helps me

[@AlfieWebDev]

No worries man. If you have any tutorial requests, please let me know. Thanks for viewing!

[@AlfieWebDev]

I'm thankful for all the positive feedback on the video. If you have any tutorial requests, please feel free to let me know. :)

[@ArjunSingh-pm2vt]

Very helpful...love you Man

[@AlfieWebDev]

Thank you for your kind words

[@davidgallego1216]

Amazing!. This help me.

[@AlfieWebDev]

Fantastic. Happy to hear it helped you

[@GAGANDEEP901]

hey great video, i have a query, how to play file from local folder?

[@fattchong1619]

debes poner la carpeta con el audio en la carpeta public

[@rotaikorailgun3261]

@@fattchong1619 hola amigo, lo pudiste hacer de esa forma? Cómo linkeaste a los archivos desde la App.js teniendo los mp3 en la carpeta public? Tuviste que agregar los mp3 al webpack? Gracias

[@fattchong1619]

@@rotaikorailgun3261 como lo puse en el comentario anterior me resulto

[@rotaikorailgun3261]

@@fattchong1619 si, lo pude resolver por suerte. En el src se accede como si fuese desde el html principal

[@ozoindaprince]

import audio from "/path/to/file"; src:[audio]

[@ozoindaprince]

the pause function does not work 😥

[@fazliddinfayziyev8072]

Thank you bro. I liked it

[@AlfieWebDev]

Glad to hear that, Thanks for your comment

[@bravefart651]

Cool vid. I have a folder with lots of mp3's, how do i get my game to play random sounds when i hit the Enter key? Same button but changing the sound each time rather than the same one all the time

[@AlfieWebDev]

Hey! Did you figure it out? If not, feel free to link a repo and I'll help out

[@bravefart651]

@@AlfieWebDev No man, gave up, didn't have the time or patience.. or the brains apparently 😂

[@AlfieWebDev]

@@bravefart651 Ahh sorry to hear that. My offer is open in the case that you decide to go back to it!

[@michaelurner3601]

For some reason onClick is undefined. This may be a rudimentary question, but how do I define it?

[@AlfieWebDev]

Sorry for my late reply. If you still have this problem, please feel free to share your code and I will help you out.

[@michaelurner3601]

@@AlfieWebDev Thank you for the reply. I figured it out.

[@mayank_singh_43]

It is showing me error that howl is not a constructer

[@AlfieWebDev]

Did you solve the problem? If not, you can show me your code and I will see if I can help.

[@nenadnovovic9697]

Got the same issue when trying to import from 'react-howler'.
So, change " import { Howl } from react-'howler'" to "import { Howl } from 'howler' ";