If youre having trouble with this method or need to have multiple audios play. Watch this video ua-cam.com/video/ECfcp3Ccnx4/v-deo.htmlsi=D7Cb9bKyAvhcP_En
Darn! It isn't working for me! It looks like I have everything in order, but I must be missing something. This is literally the only resource I can find that answers my challenge. If everyone else in the comments has gotten it to work, I'll keep trying. I wonder if there are any common errors that other folks have made in implementing this great solution. Thanks for your work! I really appreciate this.
This is really helpful, but I have one question. How to turn this into autoplay? So whenever someone reloads or loads the homepage, the audio will auto play
Outstanding tutorial. I was able to use these instruction to play and pause a music video used in a container background. It worked perfectly! What a great tutorial!
Thank's for good tutorial. Unfortunatelly it does not work for several audio tracks in one page. Also with the changing the clases for each new icon it does not work. Can you please give some solution or make a tutorial for this problem?
Whatever you think, the comment was just related to the preface you repeatedly use, probably subconsciously... Like so many who use the word 'literally' or 'like' repeatedly. Your video is good, just an observation to help....
everything's good until i save it, click on the preview and try to play the audio... then nothing is happenning. Does the website have to be host ? (mine is not for the moment) or is it something else?
Very good tutorial, thanks for the video. But it doesn't work for mobile devices. Replacing "click" with tap, touchstart, etc. does not help. Works great on desktops.
super nice! thx! I have multiple images with sound and was wondering how I can stop playing one sound when the other starts playing. Right now everything is playing at the same time :D
Hi, Thanks for this awesome tutorial. Im looking for a way to play bird songs when someone clicks on an image of the bird. There will be say 40-50 bird photos in one page and all with click to listen its call feature. Can your method be used to accomplish something like this? If any different then how? Can you please reply? Thanks
I can only get one mp3 file to work with one button. I would like to add multiple mp3s to multiple buttons, but it doesn't seem to work. Does this only work with one mp3 per page?
Thanks for your tutorial. Can we combine that click with scroll to id? I trying to add link scroll to id but it didn't work. It's work fine when You just add code to button without link.
Great tutorial, is there a way you can create a tutorial or suggest one that creates a post or updates another post based on current post actions or click of a button? For example, I have a transportation company and loads is a post type and accounting is another one so when I update the load status to complete or paid, I want to automatically create an accounting post like income or expense for example
@@UrielSoto Thankyou. If I may, I am trying to get multiple files to play on the page, do you know if its possible to duplicate this on multiple buttons on the same page. when I tried and chaged the button name to audio-buttontwo or something it dosen't seem to work just plays the first one on the page.
Hi, thanks for the video! I'd like to ask a question. With the code above, if I have multiple elements with the class .audio-button, I'm only able to pause-play the music with the first element with the class... I can't pause/play with the other elements... How would I be able to do so? My use case: 1. User is given a full-screen modal 2. User presses the button in the modal --> modal is dismissed; music is autoplayed 3. Used should still be able to play/pause when scrolling in the page
Awesome video! This may be the solution I've been looking for. Quick question. What if you want to play more than one audio bite? If the first one is selected followed by the second one, will the first one automatically stop playing or will they both play at the same time, based on the audio length? If they both play is there a way to have only one play at a time? Thanks in advance!!!
Thank you for making this. Very helpful. Just wondering, is it possible to have multiple audio files linked throughout a page? - For instance, a different audio clip for other images on the same page
@@UrielSoto Tnx very much for the precious script...but for 2 audios in the same page it doesn't work (with 2 scripts and different class)..it recognize only the first script
@@domenicobaglioni2072 @Uriel Soto Did anyone figure out how to get 2 different audio tracks on the same page? I tried playing around with the element ID and button classes, but still could only get the first instance on the page to play.
@@MarieHopkinsonMusic I ended giving up on the script for more than one audio on a page. It works great for just one sound, but could not get it to work for more than one per page. So I bought a super simple plugin from Code Canyon called Hover Sounds. It works perfect for multiple sounds on a single page by just using shortcodes in Wordpress. And my time is worth more than the $18 price tag.
Hi! Sounds interesting but it doesn't work for me! I move to the bottom the html code, change the source and add the class to the button but nothing happened.
Hello, I tried this method. But it doesnt seem to work for me. Whenever I go to preview the website I can see the HTML code and the button does not work. Do you have any advice on how to help?
Hi! I got this to work (the code on the website had to be changed a bit to match exactly what you had in the UA-cam video - for us non-coders that might be the issue people are experiencing). Question - the sound plays when clicked but the page jumps to the top when I click. Anyway to keep it where you click? Thanks again!
Thank you so much. Can I ask a question? How did you present the mockup of a website, I mean showing in the mobile and desktop on this website? Some of the mockup websites I use doesn't give me proper resolution
I usually present a mockup as a PDF. I use Adobe XD to design my sites, but you can use figma it's free. You can also use a chrome extension to take a screenshot of the entire site.
@@UrielSoto Thank you so much for the quick answer! But my question was not exactly that one but to understand if it is possible to click an image (directly the image, without any icon or button or audio control things etc.) and play the sound. I tried to modify your js codes to have such a functionality but no joy for now. And not sure if it is something possible tho. But anyway thanks a lot again!
@@meltemkenis5991 In the first line of the code instead of grabbing '.audio-button' grab your image. Note that you would have to give the image some class like 'audio-image' first.
Hi @UrielSoto thanks for the video above. I'm creating a website for a voice recording studio and the company demoreel plays great on the header. My challenge is for their artists to also have individual clicks on a Media Carousel. As a carousel only has 1 CSS Class input, I can't assign any one class to the individual artist images for a user to click into. Have any thoughts on working around that?
I will try to do this on Lottie play/stop animated icon, and not work in this case ? Is it possible ??! Or, better solution, how to make play icon visible, and whet click on it to show stop icon ...that will be amazing becouse Elementor have only classic (too old) audio player widget...
thats closely what i mean. but can u make some tutorial when u klik button play . the icon will change to stop icon. and if u klik stop icon it wil change to play icon . by the way your voice very small
Here is the code.. the link os broken let audioButton = document.querySelector('.audio-button') audioButton.addEventListener("click", function(){ var audio = document.getElementById("audio"); if (audio.paused) { audio.play(); }else{ audio.pause(); // audio.currentTime = 0 } });
This tutorial is nice and clear, however I wanted to add multiple sounds on buttons on the same page and it was only able to play the first one.... so if you encountered the same problem use this guy's video: ua-cam.com/video/NnQ2GlbJNkQ/v-deo.html Problem solved! Thanks anyway Uriel, I just needed a little bit extra (:
It seems to be a familiar American thing to say, but when you preface almost every instruction with it, it is a bit distracting. Perhaps instead of saying 'Go ahead and do this....', just say 'Do this' - seems logical. Not that you do it, but it is a similar word (over)use of, 'Literally' and the word 'Like' before every point is made. That also gets annoyoiying and seems to be an American and even a Canadian thing.
If youre having trouble with this method or need to have multiple audios play. Watch this video ua-cam.com/video/ECfcp3Ccnx4/v-deo.htmlsi=D7Cb9bKyAvhcP_En
Thanks man!
Darn! It isn't working for me! It looks like I have everything in order, but I must be missing something. This is literally the only resource I can find that answers my challenge. If everyone else in the comments has gotten it to work, I'll keep trying. I wonder if there are any common errors that other folks have made in implementing this great solution. Thanks for your work! I really appreciate this.
This is really helpful, but I have one question. How to turn this into autoplay? So whenever someone reloads or loads the homepage, the audio will auto play
very useful video, the exact solution I've been looking for,
Hi, thank you so much but have you tried in on elementor popup? I tried on elementor popup but it didn't work as well
Outstanding tutorial. I was able to use these instruction to play and pause a music video used in a container background. It worked perfectly! What a great tutorial!
Hi! How?? Trying to do the same
Is there any way of auto play on page load?
I am using on home page on different locations but only working first location.. And does not work on other location now what can i do???
Thank's for good tutorial. Unfortunatelly it does not work for several audio tracks in one page. Also with the changing the clases for each new icon it does not work. Can you please give some solution or make a tutorial for this problem?
it does'nt work for a many icons or images in a same page?
Hi there! It worked for me, but why the sound doesn't work on iPhone (all browsers)?
Did you manage to make it work?
Same here! Did it ever work?
@@mariaclaudiaochoaprieto Did you figure this out?
To make it work on Iphone. Have a separate page for phone only (so the code is displayed only once per page)
hi, how add a vibration effect when click a button? No audio
Thank you this save my life! Could I set the audio to autoplay?
Is there a way to play audio on mouseover or hover? Not on clicking.
Thank you so so much!!
If someone wants to play the audio when you hover the mouse over the button, just change the "Click" to "mouseenter"
Hi thanks, it works but i have to press the button one time for it to work ? Did u have any idea why ?
Hi, thanks for the video!
I'd like to ask a question. can we get the element class from button popup? i try it but it didnt work.
Whatever you think, the comment was just related to the preface you repeatedly use, probably subconsciously... Like so many who use the word 'literally' or 'like' repeatedly. Your video is good, just an observation to help....
Thank you so much for this Uriel...works brilliantly.
can you do this for youtube play?
everything's good until i save it, click on the preview and try to play the audio... then nothing is happenning.
Does the website have to be host ? (mine is not for the moment) or is it something else?
AMAZING!!! Thank you for your great tutorial, came just in place ♥
Very good tutorial, thanks for the video. But it doesn't work for mobile devices. Replacing "click" with tap, touchstart, etc. does not help. Works great on desktops.
Really helpful for me thank you bro
super nice! thx!
I have multiple images with sound and was wondering how I can stop playing one sound when the other starts playing. Right now everything is playing at the same time :D
If you have a solution for this, please let me know. Thank you
Hi, Thanks for this awesome tutorial. Im looking for a way to play bird songs when someone clicks on an image of the bird. There will be say 40-50 bird photos in one page and all with click to listen its call feature. Can your method be used to accomplish something like this? If any different then how? Can you please reply? Thanks
I can only get one mp3 file to work with one button. I would like to add multiple mp3s to multiple buttons, but it doesn't seem to work. Does this only work with one mp3 per page?
Worked great for me thanks.
YOU ARE A GOD - HI FROM BRAZIL
Thanks for your tutorial. Can we combine that click with scroll to id? I trying to add link scroll to id but it didn't work. It's work fine when You just add code to button without link.
Work Great .., But How to auto play the audio when page load..?
Code works but it is making my icon go left aligned. Any way to code it so that it stays centered?
can you please tell me how play it only once ??????
Great tutorial, is there a way you can create a tutorial or suggest one that creates a post or updates another post based on current post actions or click of a button? For example, I have a transportation company and loads is a post type and accounting is another one so when I update the load status to complete or paid, I want to automatically create an accounting post like income or expense for example
Excelente, me sirvió.
Thank you I am making an album release landing page and this helped me a lot to get the song to play in the same window :) thanks
It's what I do! Thanks for watching and good luck on your album
@@UrielSoto Thankyou. If I may, I am trying to get multiple files to play on the page, do you know if its possible to duplicate this on multiple buttons on the same page. when I tried and chaged the button name to audio-buttontwo or something it dosen't seem to work just plays the first one on the page.
@@MarieHopkinsonMusic I believe you need to use a different class and ID.
Awesome video. Thank you!
Hi, thanks for the video!
I'd like to ask a question. With the code above, if I have multiple elements with the class .audio-button, I'm only able to pause-play the music with the first element with the class... I can't pause/play with the other elements...
How would I be able to do so?
My use case:
1. User is given a full-screen modal
2. User presses the button in the modal --> modal is dismissed; music is autoplayed
3. Used should still be able to play/pause when scrolling in the page
Please fix this case...
Resolved? I have the same problem
Great! Thanks for the video!
doesnt work for me: Uncaught SyntaxError: Identifier 'audioBTN' has already been declared
Can this be done for a radio stream?
Awesome video! This may be the solution I've been looking for. Quick question. What if you want to play more than one audio bite? If the first one is selected followed by the second one, will the first one automatically stop playing or will they both play at the same time, based on the audio length?
If they both play is there a way to have only one play at a time? Thanks in advance!!!
You are awesome! thank you!
Thank you so much !
Thank you so much
Thank you, excellent presentation and works as expected - however when I click the button the page goes to the top - what can I do to stop this ?
solved the issue by linking the button to the section that it's in :)
btw, thank you for the video
Perfect super fantastic. You mind is made of gold. Thanks a million.
Thank you for making this. Very helpful.
Just wondering, is it possible to have multiple audio files linked throughout a page? - For instance, a different audio clip for other images on the same page
I think if you a different class and script for each it should work. But not using the same class will probably not work
@@UrielSoto Tnx very much for the precious script...but for 2 audios in the same page it doesn't work (with 2 scripts and different class)..it recognize only the first script
@@domenicobaglioni2072 @Uriel Soto Did anyone figure out how to get 2 different audio tracks on the same page? I tried playing around with the element ID and button classes, but still could only get the first instance on the page to play.
@@geoff-fraser I am trying to get this to and still can't work it out
@@MarieHopkinsonMusic I ended giving up on the script for more than one audio on a page. It works great for just one sound, but could not get it to work for more than one per page. So I bought a super simple plugin from Code Canyon called Hover Sounds. It works perfect for multiple sounds on a single page by just using shortcodes in Wordpress. And my time is worth more than the $18 price tag.
I have a music player made in a pop-up but the code doesn't work in a pop-up? Is there a change of code necessary to let it work in a pop-up?
I'll see if I can make a video on this
Please i have the same problem in the pop up dont work the code please!@@UrielSoto
@@PameFigueroa Try this method ua-cam.com/video/WA9v_YrylIU/v-deo.htmlsi=b98mD-a6MpaEbG-5
Thank you
Hi! Sounds interesting but it doesn't work for me! I move to the bottom the html code, change the source and add the class to the button but nothing happened.
Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.
easy to follow! unfortunately custom css requires a subscription!!!
Great..
Is possible to make this autoplay when we close a Popup..?
Yes with right event listener.
@@UrielSoto it will be very helpful for me if you are willing to make a tutorial.. 🙏🙏
Hello, I tried this method. But it doesnt seem to work for me.
Whenever I go to preview the website I can see the HTML code and the button does not work.
Do you have any advice on how to help?
Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.
thanks
Hi! I got this to work (the code on the website had to be changed a bit to match exactly what you had in the UA-cam video - for us non-coders that might be the issue people are experiencing). Question - the sound plays when clicked but the page jumps to the top when I click. Anyway to keep it where you click? Thanks again!
Nevermind, I figured it out. Needed to link the button to the same button's CSS ID. Thanks again for the video!
@@heatherstarner8202 I have the same problem. I don't understand how you fixed it, could you explain please?
Did this like ten times. When button was clicked nothing happened
Thank you so much. Can I ask a question? How did you present the mockup of a website, I mean showing in the mobile and desktop on this website? Some of the mockup websites I use doesn't give me proper resolution
I usually present a mockup as a PDF. I use Adobe XD to design my sites, but you can use figma it's free. You can also use a chrome extension to take a screenshot of the entire site.
@@UrielSoto thank you so much for this. I'm grateful 🤗🤗
I hope that the google translator does its job well hahaha.
is it possible to play an audio just by hovering over it, instead of having to click it?
Hello and thank you for this video. I would like to trigger an audio on image click with Elementor. Is there any advice/ suggestion for that?
ua-cam.com/video/kEL6W446z90/v-deo.html
@@UrielSoto Thank you so much for the quick answer! But my question was not exactly that one but to understand if it is possible to click an image (directly the image, without any icon or button or audio control things etc.) and play the sound. I tried to modify your js codes to have such a functionality but no joy for now. And not sure if it is something possible tho. But anyway thanks a lot again!
@@meltemkenis5991 In the first line of the code instead of grabbing '.audio-button' grab your image. Note that you would have to give the image some class like 'audio-image' first.
Genius!
Brabo
Thanks for your helpful video
There is only one problem
The link to HTML code actually doesn't work
Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.
@@UrielSoto still doesn't
Hi @UrielSoto thanks for the video above. I'm creating a website for a voice recording studio and the company demoreel plays great on the header.
My challenge is for their artists to also have individual clicks on a Media Carousel. As a carousel only has 1 CSS Class input, I can't assign any one class to the individual artist images for a user to click into. Have any thoughts on working around that?
Have you tried targeting something like .parent img
@@UrielSoto That doesn't work. I'm hoping I can add a custom attribute to each link, but still investigating. Thanks though.
It does not work with me. Could please advise me?
I tested it. It still works. It's very important you drag and drop the html element under the button you click.
Try this bruh
I will try to do this on Lottie play/stop animated icon, and not work in this case ? Is it possible ??! Or, better solution, how to make play icon visible, and whet click on it to show stop icon ...that will be amazing becouse Elementor have only classic (too old) audio player widget...
Sure I can create a play icon that switches from play and pause. We can do anything with this. Try it with Lottie and let me know haha
@@UrielSoto I try now with icon only, and sound didnt play :-( !?
@@UrielSoto not work with Lottie too :-(
@ Works for me. Make sure the HTML widget is under ur icon or Lottie. And make sure you are only using the css class for one element at a time.
@ I also removed something from the code. Maybe that was the issue
the code is not exist
doesnt work
thats closely what i mean. but can u make some tutorial when u klik button play . the icon will change to stop icon. and if u klik stop icon it wil change to play icon . by the way your voice very small
Yes I did right here ua-cam.com/video/kEL6W446z90/v-deo.html
Didn't work for me.
Checked.
Double checked.
Just jumps to top of page after click.
I'll double check and get back to you.
Does the same for me. Jumps to top of the page.
Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.
Here is the code.. the link os broken
let audioButton = document.querySelector('.audio-button')
audioButton.addEventListener("click", function(){
var audio = document.getElementById("audio");
if (audio.paused) {
audio.play();
}else{
audio.pause();
// audio.currentTime = 0
}
});
Not working , please new tutorial
Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.
This tutorial is nice and clear, however I wanted to add multiple sounds on buttons on the same page and it was only able to play the first one.... so if you encountered the same problem use this guy's video:
ua-cam.com/video/NnQ2GlbJNkQ/v-deo.html
Problem solved!
Thanks anyway Uriel, I just needed a little bit extra (:
didnt work for me, thanks anyways
Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.
Dude, please stop prefacing everything with 'Go Ahead...', it gets a bit annoying real quick.
What would you recommend I say instead?
It seems to be a familiar American thing to say, but when you preface almost every instruction with it, it is a bit distracting. Perhaps instead of saying 'Go ahead and do this....', just say 'Do this' - seems logical. Not that you do it, but it is a similar word (over)use of, 'Literally' and the word 'Like' before every point is made. That also gets annoyoiying and seems to be an American and even a Canadian thing.
Is there any way of auto play on page load?
Thank you so much 😁
Thanks for help!
Thanks, hopefully, Elementor will release a feature for this soon....
Hello, thank you very much for your contribution! It works perfect on Chrome and Mozilla, but not on Mac or iPhone, do you know what can I do?