Play Audio On Click Using Elementor With A Button, Icon Or Image

Просмотров 39 тыс.

% 504

Play any audio on click on Elementor with any element
Source Code:
urielsoto.com/play-audio-on-click-using-elementor/
🔵 Join Our Facebook Community!
bit.ly/urielsotofbgroup
🟢 Tech Support:
urielsoto.com/services/
🟢 My Web Agency:
vluxdesigns.com/
MY COURSES:
🟣 Elementor Mobile Responsive Course
bit.ly/elementormobile
🟣 Website Building Factory Course
bit.ly/websitebuildingfactory
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielelementorpro
PRIVATE GROUP:
🔵 Join My Patreon & Get Design Downloads
bit.ly/uspatreon
CONTACT ME:
My Website: urielsoto.com/
Facebook: urielsotodev
Linkedin: www.linkedin.com/in/uriel-soto-976b3117a

Опубликовано:

4 дек 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 134

@UrielSoto 8 месяцев назад

If youre having trouble with this method or need to have multiple audios play. Watch this video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ECfcp3Ccnx4.htmlsi=D7Cb9bKyAvhcP_En

@virginiaciancia 7 месяцев назад

Thanks man!

@PintoTV Год назад

AMAZING!!! Thank you for your great tutorial, came just in place ♥

@herrydarmawan4138 Год назад

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.

@joanettahendel2946 Год назад

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!

@20f1rstentertainment3 Год назад

Hi! How?? Trying to do the same

@mickbannon2310 Год назад

Thank you so much for this Uriel...works brilliantly.

@TheSuicideFist 2 года назад

Perfect super fantastic. You mind is made of gold. Thanks a million.

@tondialfarizi 2 года назад

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

@deonay 11 часов назад

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.

@ZaberAnsaryOfficial Год назад

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

@Ledindon78 Год назад

Worked great for me thanks.

@1ghosttour 2 года назад

Awesome video. Thank you!

@YohanGayle Год назад

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!!!

@mariaclaudiaochoaprieto Год назад

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?

@haxsaa Год назад

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.

@ivanbritto1810 Год назад

Great! Thanks for the video!

@snazdj 2 года назад

Thank you this save my life! Could I set the audio to autoplay?

@md.shakilkhan6205 2 месяца назад

very useful video, the exact solution I've been looking for,

@zerosureshgaming Год назад

Really helpful for me thank you bro

@RAdams 8 месяцев назад

Is there a way to play audio on mouseover or hover? Not on clicking.

@unpackonceanddone Год назад

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?

@darknesther 11 месяцев назад

Is there any way of auto play on page load?

@caballero.73 2 года назад

it does'nt work for a many icons or images in a same page?

@oksmelnuk 2 года назад

Thanks for help!

@nocapfinancials 2 года назад

Thanks, hopefully, Elementor will release a feature for this soon....

@pacificprospector Год назад

You are awesome! thank you!

@salmanmuyassar Год назад

Thank you so much 😁

@zipanguofficiel 11 месяцев назад

Thank you so much !

@valerieexpress 8 месяцев назад

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

@fnm1900 23 дня назад

Thank you so so much!!

@syedsajjad4674 Год назад

Thank you so much

@Creacionesdigitalespe Месяц назад

Excelente, me sirvió.

@attahirujibrin4034 Год назад

Thank you

@janissemjonovs Год назад

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?

@OLIWIAiMARTA 2 года назад

Hi there! It worked for me, but why the sound doesn't work on iPhone (all browsers)?

@mariaclaudiaochoaprieto Год назад

Did you manage to make it work?

@MarieHopkinsonMusic 2 года назад

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

@UrielSoto 2 года назад

It's what I do! Thanks for watching and good luck on your album

@MarieHopkinsonMusic 2 года назад

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

@UrielSoto 2 года назад

@@MarieHopkinsonMusic I believe you need to use a different class and ID.

@ellagoms. Год назад

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?

@user-sl9rx1zb9o Год назад

Code works but it is making my icon go left aligned. Any way to code it so that it stays centered?

@energy106belfast8 9 месяцев назад

Can this be done for a radio stream?

@abdulkhalek3816 2 года назад

thanks

@convertik 2 месяца назад

hi, how add a vibration effect when click a button? No audio

@hassanraza-oq8bi 9 месяцев назад

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???

@masterraider100 2 года назад

YOU ARE A GOD - HI FROM BRAZIL

@Adhibskr 2 года назад

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

@buzynis Год назад

Please fix this case...

@laurakaram5526 Год назад

Resolved? I have the same problem

@Quvedesign 10 месяцев назад

Genius!

@ugn 2 года назад

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

@lightdigital9503 Год назад

If you have a solution for this, please let me know. Thank you

@kudabovictory 2 года назад

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

@UrielSoto 2 года назад

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.

@kudabovictory 2 года назад

@@UrielSoto thank you so much for this. I'm grateful 🤗🤗

@cyvillasoto 2 месяца назад

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

@ChrisBrownEyecueDesign 3 месяца назад

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

@sekti.m Год назад

Work Great .., But How to auto play the audio when page load..?

@JohnT-GNM Год назад

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 ?

@JohnT-GNM Год назад

solved the issue by linking the button to the section that it's in :)

@unpackonceanddone Год назад

btw, thank you for the video

@MZCreative-ys9gb Месяц назад

can you do this for youtube play?

@heatherstarner8202 2 года назад

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 RU-vid 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!

@heatherstarner8202 2 года назад

Nevermind, I figured it out. Needed to link the button to the same button's CSS ID. Thanks again for the video!

@sofreebohemian 2 года назад

@@heatherstarner8202 I have the same problem. I don't understand how you fixed it, could you explain please?

@emilianomorales7438 2 года назад

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.

@UrielSoto 2 года назад

Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.

@chasek.497 2 года назад

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 2 года назад

I think if you a different class and script for each it should work. But not using the same class will probably not work

@domenicobaglioni2072 2 года назад

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

@geoff-fraser 2 года назад

@@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 2 года назад

@@geoff-fraser I am trying to get this to and still can't work it out

@geoff-fraser Год назад

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

@harrymedia5717 2 года назад

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?

@UrielSoto 2 года назад

Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.

@Vinni1337 7 месяцев назад

can you please tell me how play it only once ??????

@dmitrykamchatka Год назад

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.

@meltemkenis5991 2 года назад

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?

@UrielSoto 2 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kEL6W446z90.html

@meltemkenis5991 2 года назад

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

@jakubgadzala7474 2 года назад

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

@darkwin4625 2 года назад

Great.. Is possible to make this autoplay when we close a Popup..?

@UrielSoto 2 года назад

Yes with right event listener.

@darkwin4625 2 года назад

@@UrielSoto it will be very helpful for me if you are willing to make a tutorial.. 🙏🙏

2 года назад

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

@UrielSoto 2 года назад

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

2 года назад

@@UrielSoto I try now with icon only, and sound didnt play :-( !?

2 года назад

@@UrielSoto not work with Lottie too :-(

@UrielSoto 2 года назад

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

@UrielSoto 2 года назад

@ I also removed something from the code. Maybe that was the issue

@fred3r1k Год назад

doesnt work for me: Uncaught SyntaxError: Identifier 'audioBTN' has already been declared

@areyoujustnelson 9 месяцев назад

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?

@UrielSoto 9 месяцев назад

Have you tried targeting something like .parent img

@areyoujustnelson 9 месяцев назад

@@UrielSoto That doesn't work. I'm hoping I can add a custom attribute to each link, but still investigating. Thanks though.

@pain7823 9 месяцев назад

If someone wants to play the audio when you hover the mouse over the button, just change the "Click" to "mouseenter"

@Proswebdesignct 9 месяцев назад

Hi thanks, it works but i have to press the button one time for it to work ? Did u have any idea why ?

@viniciussouza8292 4 месяца назад

Brabo

@pabloibarguren6236 2 года назад

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?

@KichewGaming Год назад

easy to follow! unfortunately custom css requires a subscription!!!

@aywannory4411 2 года назад

It does not work with me. Could please advise me?

@UrielSoto 2 года назад

I tested it. It still works. It's very important you drag and drop the html element under the button you click.

@yoganandasaputra8356 2 года назад

Try this bruh

@user-uk3it6zk4j 2 года назад

Thanks for your helpful video There is only one problem The link to HTML code actually doesn't work

@UrielSoto 2 года назад

Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.

@SalvatoredeMosticos 2 года назад

@@UrielSoto still doesn't

@itsmadson Год назад

the code is not exist

@egipebriyawan1455 2 года назад

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

@UrielSoto 2 года назад

Yes I did right here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kEL6W446z90.html

@tinabobby9356 Год назад

Did this like ten times. When button was clicked nothing happened

@aeriefaerie1166 2 года назад

Didn't work for me. Checked. Double checked. Just jumps to top of page after click.

@UrielSoto 2 года назад

I'll double check and get back to you.

@thesoutherndonkey 2 года назад

Does the same for me. Jumps to top of the page.

@UrielSoto 2 года назад

Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.

@Jake-px3ob Год назад

doesnt work

@Groovepublic 2 года назад

Not working , please new tutorial

@UrielSoto 2 года назад

Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.

@SalvatoredeMosticos 2 года назад

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 } });

@simonanavardauskaite6728 Год назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NnQ2GlbJNkQ.html Problem solved! Thanks anyway Uriel, I just needed a little bit extra (:

@bryllupsfotofilm 2 года назад

didnt work for me, thanks anyways

@UrielSoto 2 года назад

Should be working now. A plugin was altering the code. So it should be fixed now. Just repaste the code.

@ChrisBrownEyecueDesign 3 месяца назад

Dude, please stop prefacing everything with 'Go Ahead...', it gets a bit annoying real quick.

@UrielSoto 3 месяца назад

What would you recommend I say instead?

@ChrisBrownEyecueDesign 3 месяца назад

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.