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

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

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

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

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

Can this be done for a radio stream?

Genius!

Is there any way of auto play on page load?

Thank you so much !

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

Thank you so much

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

btw, thank you for the video

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?

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

doesnt work

Really helpful for me thank you bro

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

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

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

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

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?

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?

Worked great for me thanks.

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

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.

You are awesome! thank you!

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.

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?

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 you so much for this Uriel...works brilliantly.

Thank you so much 😁

Great! Thanks for the video!

Thank you

the code is not exist

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 ?

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.

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?

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

Awesome video. Thank you!

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

Here is the code.. the link os broken

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

<audio id="audio" src=""></audio>

Thanks for help!

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

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?

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

thanks

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