How to play Audio Files with JavaScript

I will show you how to play audio files using Java Script on Visual Studio Code. Code training for beginners. JavaScript for everyone
source code github.com/pes...
#javascript #tutorial #trending

[@leonardmbibi8013]

👍 for the video. I wish you named the variable, "play" differently so it doesn't confuse beginners with the method, "play" within the function.

[@TheWheelchairGuy]

Noted.

[@bilegtsdf5776]

You've been my angel ever since I couldn't upload images in HTML, I love you, my man, you're one of the gods on youtube. keeeeeep goooiiing!!!!🥰

[@TheWheelchairGuy]

Thanks for watching. Enjoy playing audio files

[@raven.4815]

Straight to the point, thanks!

[@TheWheelchairGuy]

Thanks for watching

[@AyushGupta-xq8fe]

Thank You so much Man! I looked for this everywhere and at last it was your video which finally Helped me. Really Thank You!

[@TheWheelchairGuy]

Glad I could help! Thanks for watching Ayush

[@mateipi]

Thanks! Exactly what I was looking for to upgrade my website!

[@TheWheelchairGuy]

Glad I could help!

[@bkgraphicdesign3464]

Thank you for the knowledge shared.

[@TheWheelchairGuy]

Glad it was helpful! Thanks

[@arab-blogger]

thanks man keep it up شكرا اخى لقد استمتعت بمشاهدة فيديوهاتك

[@TheWheelchairGuy]

I am happy انا سعيد thank you شكرا

[@very-very-bored]

You're the best! Thank you so much!

[@TheWheelchairGuy]

Glad it helped! Enjoy coding

[@waliqadri]

Love your videos bro

[@TheWheelchairGuy]

Thanks bro

[@PaperaAstrale]

thank you i needed this, also this was clear fast and very easy to understand

[@TheWheelchairGuy]

Glad it helped! I hope you like and subscribe

[@BlocksOfGoldGD]

underrated

[@TheWheelchairGuy]

Thanks for watching

[@michaelshollaj6428]

Great video, liked and subscribed

[@TheWheelchairGuy]

Big thanks

[@oloja__]

Nice

[@KyleeeYT13]

How do I make an image play an audio when I click it? (pls i need help)

[@TheWheelchairGuy]

You can basically add onclick=“functionName()” attribute to the image for example

[@shahzadnoori8678]

Thanks for best teach

[@TheWheelchairGuy]

Most welcome

[@yevvieart]

thank you! i needed an option to include a pronunciation of my name in a portfolio and this is a life saver!

[@TheWheelchairGuy]

Glad to hear that

[@jaimefernandopelembe4339]

Thank you for the video, you helped me very much.

[@TheWheelchairGuy]

Glad it helped. Thanks for watching

[@creo_one]

I love it man, thanks!

[@TheWheelchairGuy]

Glad to hear it! Thank you for watching. I hope you like and subscribe

[@ZacDomamuo]

absolute legend!!!! Thanks :D

[@TheWheelchairGuy]

Glad it helped!

[@bijenderlamba906]

How we do the same if audio is not in the same folder

[@kartikeytiwari5388]

thanks for the video. imo u should have mentioned that you were using constrcutor while explaining

[@TheWheelchairGuy]

You are right. I used the constructor implicitly

[@user-dr5lh3rc7t]

Thank you! But How if the server doesn’t allow to upload .mp3?? Is there any alter solutions for making music player at browser? (sorry for my terrible english)

[@TheWheelchairGuy]

Hi there. I'm not sure if this will work, but you could try uploading the audio file to GitHub and copying the source code. This is just a suggestion, though. Also, I just wanted to say that your English is very good!

[@26.muh.zakysyahfadil91]

nice tq

[@TheWheelchairGuy]

Thanks for watching

[@vigilanteagle1980]

thank you, that was very helpful for me

[@TheWheelchairGuy]

Glad to hear that!

[@noddygoat]

very cool, thanks! :D

[@TheWheelchairGuy]

Thanks for watching. Please like and subscribe. The road to 20k

[@VolumetrickDST]

THANKYOU

[@TheWheelchairGuy]

You’reWelcome

[@jayparm]

How do you let it select an audio file randomly to play from a folder? AND How do you make a transition sort of thing (play a file during songs) AKA a radio

[@TheWheelchairGuy]

You can try something like this: const musicFiles = ["music1.mp3", "music2.mp3", "music3.mp3"]; const audio = new Audio(); function playRandomMusic() { const randomIndex = Math.floor(Math.random() * musicFiles.length); audio.src = musicFiles[randomIndex]; audio.play(); }

[@israelalcudia9211]

Hello, is it possible to add autoplay with audio in Safari?

[@TheWheelchairGuy]

Autoplay has been disabled on Chrome and Safari for personal security reasons.

[@manishabhatt124]

Tq u

[@weareloved]

Thank you!

[@TheWheelchairGuy]

You're welcome!

[@jefferyaaron3462]

Thanks bro

[@TheWheelchairGuy]

You’re very welcome bro

[@ItachiUchiha-gv5vl]

thank you my dude

[@TheWheelchairGuy]

Happy to help

[@gabbiimartire9299]

Gracias. Me salvaste

[@TheWheelchairGuy]

De nada

[@mala.m.m]

Hi there. If I would like the audio to simply play on click/tap how do I replace the button line of code?

[@TheWheelchairGuy]

You basically add the onclick=“functionName()” to any html element. See all touch events here developer.mozilla.org/en-US/docs/Web/API/Touch_events

[@mala.m.m]

@@TheWheelchairGuy Thank you for taking the time to respond! Tis much appreciated

[@oneplace-ii1bp]

this code not working in iphone browser

[@TheWheelchairGuy]

Could you please tell me what iPhone are you using?

[@kaushalyalakshitha9682]

Thanx

[@TheWheelchairGuy]

Welcome ✌️

[@felix-zp4ie]

thanks!

[@TheWheelchairGuy]

You bet!

[@PeriklesPeriklesoglu]

thanks

[@TheWheelchairGuy]

You are welcome

[@uwotgames]

too confusing i only know html and css and want the text i click to play some audio

[@TheWheelchairGuy]

Sorry for confusion

[@aestellatv6524]

doesnt work, i tried with image link and mormal image

[@TheWheelchairGuy]

Make sure you attach the function to an element. For instance, onclick="function()"

[@Bignaqc]

The audio isn’t playing

[@TheWheelchairGuy]

Check your code and make sure to place the script before the end of the body tag. You can get my code in the description of this video

[@rexzy1852]

how if want auto play?

[@TheWheelchairGuy]

You can try something like window.onload = function() { var audio = new Audio('audio_file.mp3'); audio.play(); } However, some browsers do not allow this because of safety concerns

[@martapfahl940]

Do you know how to make it work on mobile? I have a Timer that counts down and when expired on desktop it will fire the audio but not on mobile....

[@TheWheelchairGuy]

This works on computer, but on your mobile, the browser that you run code with might not support JavaScript Audio

[@martapfahl940]

@@TheWheelchairGuy Is there a way to make it possible? I have built a pomodoro timer app with React so having no audio when timer is expired would really suck.

[@TheWheelchairGuy]

@@martapfahl940 you can use setInterval to start the function when the timer is done.

[@martapfahl940]

@@TheWheelchairGuy You mean start the interval when the user clicked the timer? The problem is the user can pause the timer so the sound would fire earlier then... But you confirm there is no other option that user events to trigger sounds on mobile?

[@TheWheelchairGuy]

@@martapfahl940 You can say for instance, whenever variable count down becomes zero, trigger the sound function

[@MERV_]

I cant get it to work and it's driving me mad

[@TheWheelchairGuy]

You can get the code here. github.com/pescad085/javaScriptAudio/blob/main/Sound.html

[@bprodu1]

How to play 4 audio files?

[@TheWheelchairGuy]

I should make a tutorial about that

[@aceofspades02]

works in computer; works not in mobile.

[@TheWheelchairGuy]

It depends on browsers. Some browsers don’t support JavaScript and autoplay

[@masudiqval8575]

🦨 🐰🐇 🕊

[@TheWheelchairGuy]

I don’t know what that means

[@JabbaDaHut-v7m]

Please don't write script code into an html file...

[@TheWheelchairGuy]

It is optional to write the script in the HTML file or not