How to play Audio Files with JavaScript

[@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.

[@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

[@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

[@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

[@bkgraphicdesign3464]

Thank you for the knowledge shared.

[@TheWheelchairGuy]

Glad it was helpful! Thanks

[@mateipi]

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

[@TheWheelchairGuy]

Glad I could help!

[@alloiosis]

Thank you! Kind and generous, helped me a lot!

[@TheWheelchairGuy]

You're welcome! I'm glad I could help.

[@michaelshollaj6428]

Great video, liked and subscribed

[@TheWheelchairGuy]

Big thanks

[@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

[@arab-blogger]

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

[@TheWheelchairGuy]

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

[@oloja__]

Nice

[@very-very-bored]

You're the best! Thank you so much!

[@TheWheelchairGuy]

Glad it helped! Enjoy coding

[@creo_one]

I love it man, thanks!

[@TheWheelchairGuy]

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

[@BlocksOfGoldGD]

underrated

[@TheWheelchairGuy]

Thanks for watching

[@shahzadnoori8678]

Thanks for best teach

[@TheWheelchairGuy]

Most welcome

[@26.muh.zakysyahfadil91]

nice tq

[@TheWheelchairGuy]

Thanks for watching

[@sparefifteen]

absolute legend!!!! Thanks :D

[@TheWheelchairGuy]

Glad it helped!

[@jaimefernandopelembe4339]

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

[@TheWheelchairGuy]

Glad it helped. Thanks for watching

[@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

[@TopHatSquad667]

This is good but how do I make it stop the sound?

[@TheWheelchairGuy]

This video might help.
How to play and pause an audio file with JavaScript
th-cam.com/video/6q4D1O_pEdg/w-d-xo.html

[@TopHatSquad667]

@@TheWheelchairGuy thanks

[@noddygoat]

very cool, thanks! :D

[@TheWheelchairGuy]

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

[@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

[@bijenderlamba906]

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

[@vigilanteagle1980]

thank you, that was very helpful for me

[@TheWheelchairGuy]

Glad to hear that!

[@weareloved]

Thank you!

[@TheWheelchairGuy]

You're welcome!

[@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.

[@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();
}

[@Pokoatlantis]

Thanks bro

[@TheWheelchairGuy]

You’re very welcome bro

[@kaushalyalakshitha9682]

Thanx

[@TheWheelchairGuy]

Welcome ✌️

[@anamorphiiiic]

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

[@anamorphiiiic]

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

[@ItachiUchiha-gv5vl]

thank you my dude

[@TheWheelchairGuy]

Happy to help

[@Muni-i9j]

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!

[@gf_martire]

Gracias. Me salvaste

[@TheWheelchairGuy]

De nada

[@antbotsquad6769]

Can you use the onclick=“ “?

[@TheWheelchairGuy]

Yes you can

[@volumetrick]

THANKYOU

[@TheWheelchairGuy]

You’reWelcome

[@ashirbadpanda9102]

Can you pause that

[@TheWheelchairGuy]

Yes, you can.
Here is the code, but remember that autuplay is blocked on many browsers
Pause

const audio = document.getElementById('myAudio');
const button = document.getElementById('toggleButton');
let isPlaying = true;
button.addEventListener('click', () => {
if (isPlaying) {
audio.pause(); // Pause the audio
button.textContent = 'Play'; // Change button text
} else {
audio.play(); // Play the audio
button.textContent = 'Pause'; // Change button text
}
isPlaying = !isPlaying; // Toggle the state
});

[@manishabhatt124]

Tq u

[@felix-zp4ie]

thanks!

[@TheWheelchairGuy]

You bet!

[@oneplace-ii1bp]

this code not working in iphone browser

[@TheWheelchairGuy]

Could you please tell me what iPhone are you using?

[@PeriklesPeriklesoglu]

thanks

[@TheWheelchairGuy]

You are welcome

[@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

[@uwotgames]

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

[@TheWheelchairGuy]

Sorry for confusion

[@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

[@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

[@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

[@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

[@masudiqval8575]

🦨 🐰🐇 🕊

[@TheWheelchairGuy]

I don’t know what that means